Simon Willison’s Weblog

Screen readers and display: none

I’ve long heard rumours that some screen readers fail to read out text hidden using the CSS display: none property, but I had never really investigated it as I don’t have access to a screen reader myself (I should really download the JAWS trial some day). Bob Easton’s What do screen readers really say? describes the problem and specifies a number of tests for screen reader abilities, the results of which are collated on this Wiki page. As a side note, quickly collecting the results of this kind of test is an excellent way to make use of a Wiki.

The results confirm the initial concern: All three leading screen readers (JAWS, Window Eyes and IBM Home Page Reader) fail to read out text that is hidden using either display: none or visibility: hidden, even when those styles are served up as part of a stylesheet targetted for visual (screen) media. This is yet another example of vendors ignoring valuable parts of the CSS specification, but until screen readers become more intelligent we’re going to have to live with it.

Luckily, a solution is at hand. Jon Hicks demonstrates that the following 4 lines of CSS can hide elements from visual browsers while leaving them available to screen readers:

.skip {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute; /* for the benefit of IE5 Mac */
}

An even neater variant is provided by Tom Gilder on his blog, where the :active and :focus pseudo selectors are used to provide a skip navigation link that remains invisible until focussed on using the tab key on the keyboard. This technique really does provide the best of both worlds; the skip link is invisible in the standard design, but still shows up for keyboard navigation users who may find it useful. I’ve implemented Tom’s technique in my stylesheet for this site.