How to hide text from screen readers

In the realm of web development, it’s a common practice to employ CSS or JavaScript to hide certain elements like text, links, or other content on a web page. While this technique can be useful for achieving specific design or functionality goals, it can also inadvertently lead to usability challenges, particularly for users relying on screen readers and other assistive technologies.

Screen reader text hiding

For individuals navigating the web using screen readers, encountering hidden content can be a perplexing experience. It might cause them to miss important information, become disoriented when content appears unexpectedly, or feel frustrated due to repetitive announcements.

[object Object]Screen readers[object Object] are essential tools for those with visual impairments, with two prominent options being Job Access With Speech (JAWS) (a paid solution) and NonVisual Desktop Access (NVDA) (a free alternative). To ensure web content is inclusive and accessible to everyone, it’s crucial to strike a balance between concealing elements when necessary and making them available to screen reader users.

This Answer will delve into common scenarios where hiding or revealing content for screen readers is beneficial, pointing out potential pitfalls and providing valuable resources to foster a deeper understanding of web accessibility.

Common situations

Here are some common situations listed below where content handling matters:

Logo repetition: Many websites display their logos multiple times to reinforce their brand identity. However, for screen reader users, repeatedly hearing the company name can be bothersome and time-consuming. In these cases, it’s wise to hide the logo from screen readers, as these decorative images might not contribute meaningfully to the content.
Hidden visual content: Occasionally, we might need to conceal content visually while ensuring it remains accessible through a screen reader. This can be essential when we have specific instructions intended for users without visual access. To address this, it’s advisable to include a “skip to main content” anchor link, allowing users to skip less critical parts of our webpage.
Content for user interaction: Our website might require user interaction before certain content becomes visible. Elements like expand and collapse buttons, “read more” links, or toggleable panels often fall into this category. The choice between these scenarios depends on the quantity and significance of the concealed text.

Methods to hide content from screen readers

To effectively hide text from screen readers while still rendering it visually, we can employ several methods:

The aria-hidden attribute: By setting the aria-hidden attribute to "true", we signal to screen readers that the content should be ignored, making it visible only to sighted users.

Ideally, it’s optimal to integrate all the solutions to ensure they function correctly across all web browsers.

Considerations to keep in mind

aria-describedby: Be cautious when using aria-describedby alongside aria-hidden="true", as it might cause the screen reader to read the hidden content.
Focusable elements: Keep in mind that aria-hidden doesn’t work on focusable elements such as form inputs, links, and buttons.
Child elements: If we apply aria-hidden to a parent element, its child elements will also be hidden from screen readers.

Wrap up

Navigating the terrain of hiding and revealing content for screen readers requires a delicate balance, ensuring that all users can access web content seamlessly and meaningfully, regardless of their abilities. By applying these techniques thoughtfully and considering the user experience, we can create a web that is more inclusive and accessible to everyone.