Re: Display: none

At 09:58 AM 3/14/2006, Mike Costello wrote:
>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.


Mike,

Because screenreaders do pay attention to {display: none;} I adopted 
the technique of:

         position: absolute;
         left: -100em;
         width: 99em;

to move the text off-screen.  Recently, though, I've switched to the 
following technique which uses much simpler HTML & CSS:

<h1>This is my title</h1>

h1
{
         overflow: hidden;
         width: 150px;
         height: 0px;
         padding-top: 20px;
         background: url("../images/this_is_my_title.gif") left top no-repeat;
}

Basically what this does is declare a box that's the correct size for 
the background image, with the box's height being the sum of height 
(= 0) & padding-top (= image height).  With overflow set to hidden, 
the text is pushed down below the bottom of the box, invisible to 
visual rendering, but remains present for screen readers.

I like this a lot because it doesn't require any extraneous 
markup.  I'm not aware of any disadvantages to this technique and 
would appreciate hearing about any.

Regards,
Paul

Received on Tuesday, 14 March 2006 18:51:27 UTC