Do not use display:none to visually hide content intended for screen readers

When auditing websites for accessibility I occasionally find elements that are incorrectly hidden with display:none. The most common example is probably skip links intended to help keyboard and screen reader users. The irony is that those well-intended skip links are made useless by display:none.

The pitfalls of using display:none have been widely known among accessibility-conscious web developers for many years (in Web terms). As I mentioned a couple of years ago in Hiding with CSS: Problems and solutions, setting an element’s display CSS property to none makes it completely invisible. It doesn’t generate a box, it doesn’t take up any place, it doesn’t affect the layout. display:none hides the element—and its descendants—visually, and it also hides the element from screen readers (most screen readers most of the time—see JAWS, Window-Eyes and display:none: Return to 2007 for more).

The property’s name being what it is, it is understandable that some think that the display property doesn’t affect non-visual user agents. The thing is that screen readers run on top of regular browsers, and those browsers do not render elements that are set to display:none. Looking at it that way it makes sense that screen readers don’t announce those elements either (or they wouldn’t be called screen readers).

So be careful when using display:none. I’m not saying that you shouldn’t use it at all as it has plenty of valid use cases, but you should not use it for the specific case of helping screen reader users.

Here are a few rules of thumb to help you determine when and how to hide something visually:

It all comes down to thinking before hiding and being aware that display:none hides content from everybody who uses a CSS capable browser.

Posted on August 16, 2011 in Accessibility, CSS