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).
Posted in Accessibility, CSS.
Copyright © Roger Johansson