Accessible CSS hidden elements

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 a class like this:

.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 a class like this:

.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.

2 thoughts on “Accessible CSS hidden elements”

  1. Absolute positioning does not remove the contents but rather positions the element in the overflow that is always hidden (dependent on bididirection). Within this hidden AP element you can nest an element that if given a position opposite of the value that is equal or more than the initial positioning for it's parent and this element will be visible.

    The browser engine will still do all the calculations on things that are hidden in overflow.

Leave a Reply

Note: Only a member of this blog may post a comment.