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.
- For Mac users, check out this video on using VoiceOver.
- For PC users, check out this video on using NVDA.
- For Chromebooks users, check out ChromeVox, the built-in screen reader.
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
<button class="remove-me">Can't reach me with the TAB key!</button>