W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2006

Re: Display: none

From: Paul Novitski <paul@juniperwebcraft.com>
Date: Tue, 14 Mar 2006 10:50:50 -0800
Message-Id: <6.2.3.4.2.20060314103615.02f1ef38@spamarrest.com>
To: <w3c-wai-ig@w3.org>

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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:24 GMT