Manually check offscreen content is hidden from assistive technology

Ensure only relevant parts of the page are exposed to assistive technology. For instance, content that's offscreen or just presentation should be hidden from a screen reader.

How to manually test

To check offscreen content is hidden, you need to manually test that content using a screen reader. For Mac users, checkout this video on using VoiceOver. For PC users, checkout this video on using NVDA. For Chromebooks users, checkout ChromeVox, the built-in 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 visiblity: 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.

More information

Last updated: Improve article