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.
