Screen readers sometimes ignore display:none
It has been widely known for several years that using display:none in your CSS to hide content from users of graphical browsers will also hide it from people who use screen readers. Sometimes that is good, sometimes not. However, it doesn’t always work that way, as Gez Lemon explains in Screen Readers and display: none.
The complete details are available in Gez’s article, so I’m not going to repeat everything here. In short, depending on the circumstances both JAWS and Window-Eyes will sometimes speak content hidden with display:none. This can cause usability problems, especially for Window-Eyes users. But there is a workaround.
Normally when you want to temporarily hide something from all users (provided that their browser supports CSS, of course) you use something like this in your stylesheet:
.hidden {
display:none;
}As mentioned above, this does not always work. The simple workaround, which was discovered thanks to Jared Smith’s comment on Gez’s article, is to use both display:none and visibility:hidden:
.hidden {
display:none;
visibility:hidden;
}By adding that extra line you can make sure that content that is meant to be hidden from all CSS-capable user agents actually is hidden.