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.

Comments

[GrahamTheDev]

Hey, remove the margin:-1px this caused an issue in some versions of VoiceOver.

Other than that a nice and robust visually hidden class 💪

Also opacity:0 was causing some issues with it being treated as hidden so opacity 0.01 was recommended, however I can find the source for that one so I can’t remember which screen reader browser combo it was.

As always a great addition to the series, enjoyed the HTML one and I am enjoying this one even more ❤️

[Carlos Espada]

Regarding opacity: 0, I've found this article from Scott O'Hara:

Testing today (June 17, 2021) after a prompt by Rachel Leggett, it appears this is no longer a bug and opacity: 0 will no longer incorrectly completely hide content from the screen reader.

[GrahamTheDev]

Thanks for that, it is always hard to know if stuff you know is outdated, saves me a load of time (and stops me spreading misinformation!)

[Carlos Espada]

Thank you very much for the tips, I write them down, I will research them for documentation and update the article 🙂

It makes me very happy that there are people who enjoy the articles and find them useful ❤️

[GrahamTheDev]

I always love when an author takes the time to run around and research some random comment, shows a fantastic author!

Yes ChromeVox was the issue, I couldn't remember!

Here is the discussion thread on negative margin causing issues to save you having to dig around for it:

github.com/h5bp/main.css/issues/12

and my StackOverflow answer on visually hidden (which I think you have covered everything else!)

stackoverflow.com/questions/621070...

I look forward to the next instalment and thanks for the mention!

[Carlos Espada]

It is the least I can do, take time to investigate if something I have said is wrong.

I have deleted the edition of the article because I found that article that clarified that it is no longer necessary avoid opacity: 0, and right now I was going to start with the margin: -1px

Thanks to you for contributing to the post !! 🙂