A11y tips: hide content only from sighted users

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:

Hide with CSS

This is the most common method, and works best to hide text from sighted users without any disadvantage to others.

.hidden {
  overflow: hidden;
  clip: rect (1px, 1px, 1px, 1px);
  clip-path: inset (50%);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  word-wrap: normal;
}

The 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 height of 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.

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

CSS opacity: 0

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 (width and height), which makes it take up space in the layout even if it is hidden, therefore its use is a lot less common.