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: <>
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.


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>

         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.

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

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:33 UTC