Hiding text off the screen view using CSS is one of the ways that web authors can provide contextual information for screen reader users. This is just to make the information that is visually obvious, potentially audible. It’s a great help, but you do need to be careful which CSS technique you use.
If DISPLAY: NONE; or VISIBILITY: HIDDEN; is used, there’s a very good chance that screen readers will “obey” this rule, and won’t read the hidden content.
The surest technique is negative positioning. this only places the text out of screen view, but doesn’t hide it from screen readers. So if the content you are styling out of sight should be available to screen readers, try the following rule:
.screenreader {
position: absolute;
left: -999em;
}
This way, most screen reader users will benefit from your thoughtful additional content.
Ben 'Cerbera' Millard | 14/08/2007 at 11:16 | Permalink
When you say “most screen reader users will benefit” does that mean some won’t? If so, could you be more specific about this?
Steven Tew | 17/08/2007 at 11:25 | Permalink
Access Matters has tested this. They have published a table showing the results for different methods of hiding information from visual display.
http://www.access-matters.com/screen-reader-test-results/
Window Eyes 4.5 and 5 with IE 6 seem to be the most problematic with all the methods tested. Methods 8, 9 and 11 seem to have the broadest screen reader reach.
John | 03/03/2008 at 23:22 | Permalink
Just a thought, for hidden text would a transparent image say 1px with the alt text give the desired effect?
I know when people use such transparant images for layout spacing, their alt-text is read out.
John | 11/03/2008 at 13:30 | Permalink
Further to my last comment about using transparent images, it was pointed out to me, that as this isn’t controlled via CSS, it will remain hidden when CSS is disabled. However, with Bim’s CSS example, it becomes visible while CSS is disabled.
Also IE treats alt text as tool tips where as other browsers rightly don’t.
Tyler | 30/03/2008 at 22:00 | Permalink
As someone who designs CSS-based web-pages, I make frequent use of “display: none” to replace text with background graphics. I’ve recently learned that this is supposedly not a good practice because of issues with screen readers, which may obey the CSS command by not reading the link.
Since then, though, I’ve been wondering — WHY do screen reader applications even look at the CSS file?
It seems to me that CSS files are intended for visual formatting, and carry no content. So why isn’t the default setting on screen readers to ignore the CSS file altogether?
(And, anticipating one possible answer — that people who are visually impaired but not entirely blind may want stylesheets to load — then in that case why not have a built-in option to ignore the “display: none” specification in the stylesheet? It is rarely used for anything BUT image replacement.)
Bim | 07/04/2008 at 13:28 | Permalink
You’re absolutely right, “display: none” does prevent most screen reader from announcing hidden content .
You aren’t quite right in thinking that this is only used for image replacement though. It’s also used to display and collapse menus where, if screen readers ignored the “display: none” command, their users would have the dubious treat of having to read every second and third level link on a page, even though they aren’t visible. It’s also used for showing and hiding FAQ answers on some pages, and because that technique is used, rather than in-page links, the creen reader would need to read through all unwanted answers until they reach the one they want.