Offscreen content is hidden from assistive technology

Published on Updated on

Ensure that only relevant parts of the page are exposed to screen readers and other assistive technologies. For instance, content that's offscreen or just presentational should be hidden from assistive technologies.

How to manually test

To check that offscreen content is hidden, you need to manually test that content using a screen reader.

Use the TAB key to tab through your page. The screen reader shouldn't announce hidden content.

How to fix

To hide offscreen content, remove the element containing that content from the tab order by setting it to display: none or visibility: hidden.

For example:

.remove-me {
visibility: hidden;
<button class="remove-me">Can't reach me with the TAB key!</button>

See also Correctly set the visibility of offscreen content.


Source code for Offscreen content is hidden from assistive technology audit

Updated on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.