RE: Display: none

Jim and Andrew,
"display:none" will also hide the h1 from screen readers.  A
better approach is to use absolute positioning on the h1, so
screen readers will still read the h1 content.

h1 {
  position: absolute;
  left: -200em;
  top: -20em;
}

The use of absolute positioning takes the h1 out of normal
rendering order and by placing in a location off the rendered
screen it serves the same function as "display: none" but
leaves the h1 visible to screen readers.

Jon


---- Original message ----
>Date: Thu, 16 Mar 2006 09:22:06 -0500
>From: "Jim Tobias" <tobias@inclusive.com>  
>Subject: RE: Display: none  
>To: "'Andrew Kirkpatrick'" <akirkpat@adobe.com>,
<w3c-wai-ig@w3.org>
>
>   Andrew -- this is so great.  It's really a model for
>   how detailed web access issues should be explored
>   and documented.  Thanks.
>    
>
>   ***********
>   Jim Tobias
>   Inclusive Technologies
>   tobias@inclusive.com
>   +732.441.0831 v/tty
>   www.inclusive.com
>
>    
>
>     ------------------------------------------------
>
>     From: w3c-wai-ig-request@w3.org
>     [mailto:w3c-wai-ig-request@w3.org] On Behalf Of
>     Andrew Kirkpatrick
>     Sent: Tuesday, March 14, 2006 1:06 PM
>     To: w3c-wai-ig@w3.org
>     Subject: RE: Display: none
>     my data on this topic:
>     http://www.webaccessibility.info/lab/displaytest.html
>      
>     AWK
>
>     ------------------------------------------------
>
>       From: w3c-wai-ig-request@w3.org
>       [mailto:w3c-wai-ig-request@w3.org] On Behalf Of
>       Mike Costello
>       Sent: Tuesday, March 14, 2006 12:58 PM
>       To: w3c-wai-ig@w3.org
>       Subject: Display: none
>       Hello,
>        
>       I was just wondering what peoples thoughts were
>       on the use of the css property "display: none"
>       to provide content to screen readers that's
>       hidden from visual browsers.
>        
>       The context that I was planning to use this, was
>       to hide h1 text titles from visual browsers by
>       using the display: none property to hide
>       them and replacing them with graphical titles
>       displayed using the css background property.
>        
>       So for example;
>        
>       HTML
>        
>       <h1><span class="hidethis">This is my
>       title</span></h1>   
>        
>       CSS
>        
>       h1 {
>           background:
>       url("images/this_is_my_title.gif");
>           width: 150px;
>           height: 20px;
>       }
>        
>       .hidethis {
>           display: none;
>       }
>        
>       My belief is that this would render the
>       graphical image of the title in visual browsers
>       like Internet Explorer etc. and the text
>       h1 title in screen readers and browsers with CSS
>       turned off. I'm I correct in making this
>       assumption? What are people's opinion on this
>       methodology?
>        
>       Many thanks in advance of any help anyone can
>       offer,
>        
>       Mike
>
>       Kind regards.
>
>       --
>
>       Mike Costello
>       Senior Developer
>
>       Latest News: The Royal Armouries appoints HMA.
>       More....
>
>       HMA Designed Solutions
>       The Coach House
>       51 Sackville Street
>       Barnsley
>       South Yorkshire
>       S70 2BZ
>
>       t: 01226 209 450
>       f: 01226 209 451
>       e: mike@hma.co.uk
>       w: www.hma.co.uk
>
>       This email should not be used by anyone who is
>       not an original intended recipient. Nor may it
>       be copied or disclosed to anyone who is not an
>       original intended recipient. If you have
>       received this email by mistake please notify us
>       by emailing the sender, and then delete the
>       email and any copies from your system. E-mail
>       transmission cannot be guaranteed to be secure
>       or error free as information may be intercepted,
>       corrupted or contain viruses. HMA. nor the
>       sender accepts any responsibility for viruses
>       contained in this e-mail. It is your
>       responsibility to scan the e-mail and any
>       attachments for viruses.
>
>       Liability cannot be accepted for statements made
>       which are the sender's own and not made on
>       behalf of HMA.


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and 
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: jongund@uiuc.edu

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

Received on Thursday, 16 March 2006 14:32:06 UTC