Very often we want to hide items from view but we want them to still be available to screen readers and keyboard users. There are two methods for this:
This is the most common method, and works best to hide text from sighted users without any disadvantage to others.
clip: rect (1px, 1px, 1px, 1px);
clip-path: inset (50%);
clip-path property is not supported by all browsers, so we also use the
clip property for those cases, even if it is deprecated.
We use a
width and a
1px instead of
0 because in this case some screen readers could interpret that the element does not exist, as it has no dimensions, and therefore not announce it.
word-wrap property must be declared since, having a width of
1px, some screen readers can interpret that the text is arranged vertically as it does not fit horizontally, and read it letter by letter. By declaring
word-wrap like this, we avoid it and it is pronounced normally.
EDITED: Even if WebAIM or the United States Government uses a
margin: -1px, as @inhuofficial comments (thank you very much for all the help! 🙂) it can cause an error with VoiceOVer, so it is better to leave it outside the CSS class, although in many places you will see that it is included. Scott O'Hara himself also leaves it out in his magnificent article Inclusively Hidden.
It has the same result as the previous one, but as we saw in the case of the CSS
visibility: hidden property, here the dimensions of the element are maintained (
height), which makes it take up space in the layout even if it is hidden, therefore its use is a lot less common.