CSS: making hidden elements accessible

  • CSS
  • Gabriele Romanato

Don't use display: none to hide relevant elements in your CSS: this is the key rule to follow while developing an accessible website. Why? Because most screen readers don't read aloud an element (and its contents) with such a declaration. That's simple, but what are the feasible alternatives?

  • negative absolute positioning
  • negative text indentation

Negative absolute positioning

You can use the following code:


.hidden {
  position: absolute;
  top: -1000em;
}

This technique removes all the contents of an element (and the element itself) from the screen. Use it when you have an element with a certain amount of contents inside. It applies to both block and inline elements.

Negative text indentation

You can use the following code:


.hidden {
  text-indent: -1000em;
}

This technique removes text contents only, but not the element (and its descendants). Use it when you have to replace only text, for example when you want to display headings with a particular background image. It applies to block elements only.

Back to top