How to Hide Text from Screen Readers

It's common to add text, links, and other elements to a website that you hide with CSS or JavaScript, but this can result in useability problems for screen readers and other devices.

A person using a screen reader might have trouble navigating your website if the content is skipped over. The person might also become frustrated if the content is repeated or confused if the content is out of place.

Two of the most common screen readers are JAWS and NVDA. The NVDA screen reader is free, while JAWS requires a license purchased.

This guide discusses common scenarios where you might want to hide content from a screen reader or show content only to a screen reader. The guide will also point out scenarios that cause trouble and additional resources to learn more about accessibility.

A website will often display a logo multiple times to reinforce a brand. But having a screen reader announce your company name each time might become an annoyance. It will also slow down screen reader users when they consume your content. Logos and other decorative images throughout a website may not add value to a person hearing the content of your website. These would be great situations to hide content from a screen reader.

In the opposite scenario, you might have content hidden visually but you want to make sure a screen reader will still read it. You might have special instructions for people without visual access. To solve for this, every website should have a "skip to main content" anchor link that allows a user to skip listening to less important sections of your page.

An additional scenario is to hide the content from everyone. Your website might require the user to perform an action before you display the content. An expand and collapse button, a read more button, or panels that toggle content fit both this scenario and the prior scenario, depending on how much text there is to show or how important that text it is.

To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true.

<p aria-hidden="true">Visible text screen readers should ignore</p>

To hide text from a screen reader and hide it visually use the hidden attribute.

<p hidden>Hidden text screen readers should also ignore</p>

You can also use CSS to set display: none or visibility: hidden to hide an element from screen readers and visually.

To show an element to a screen reader and hide it visually you need to use a CSS pattern to make the text appear off-screen or not fit into a one-pixel visible area. WebAim offers two solutions.

If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it.

The aria-hidden attribute does not work on focusable elements such as form inputs, links, and buttons.

If you use aria-hidden on an element with child elements, the child elements will be hidden as well.

Putting time and effort into accessibility benefits everyone! Accessibility helps with Search Engine Optimization (SEO) and makes content more accessible even for people who don't use screen readers.

To learn more about accessibility, Pluralsight offers a great "Getting Started" course and a course on Web Accessibility Guidelines.

You can also read the W3C's guidelines on how to use ARIA.

Matt Ferderer is a software developer who tweets, posts, and blogs about web development.