A11y tips: hide content from screen readers

If you want to hide content for screen readers but still be available to sighted or keyboard users, just use aria-hidden="true".

A classic example where it is useful is to hide icons that serve as visual support for a text:

<style>
  .icon-star: before {content: "★"; }
</style>

<span>
  <span class="icon-star" aria-hidden="true"></span>
  Favorite
</span>

In this way the icon that we insert with CSS only appears for sighted users, while screen readers will announce only "Favorite", instead of "Black Star Favorite".

It is best to avoid using this ARIA attribute on focusable elements, as being able to receive focus but hiding from screen readers can cause confusion for their users. You could use a tabindex="- 1" to avoid focus but then it would be out of use for sighted keyboard users.

This and other tips on the use of aria-hidden="true" can be found in the already named article by Scott O'Hara, and on the use of icon fonts in the article by Zach Leathermann, from which the example is taken.