Hiding with CSS: Problems and solutions
In most cases, using
display:none to hide an element is a bad choice that reduces accessibility. I thought this was a well-known fact, but apparently there are many who are not aware of it being a problem. For that reason, here is a quick explanation of the problem and a suggestion for an alternative technique (that I also thought was well-known).
display:none really means do not display or speak
What many do not seem to realise is that
display:none really means “Pretend that this element doesn’t exist. Do not display it, print it, or speak its contents.” Perhaps the most obvious example of how that can cause problems is when a person using a screen reader visits a site that uses
display:none to hide something from sighted users. Since most screen readers ignore anything hidden with
display:none to hide things like skip links, text, navigational links, or structural headings is a terrible idea.
An alternative technique that is much less likely to cause problems is the “off-left” technique (described in ScreenreaderVisibility at the css-discuss Wiki), which involves absolutely positioning the hidden element outside the viewport. Here’s the CSS I normally use for that:
The visual effect will be the same as using
display:none, but now screen readers will be able to speak the contents of the hidden elements.
body element a class such as “js”, and then use that in your CSS selectors.
- Previous post: Use the fieldset and legend elements to group HTML form controls
- Next post: CSS background images cannot and should not have alternate text