Ensure that only relevant parts of the page are exposed to screen readers and other assistive technologies. For example, content that's offscreen should be hidden from assistive technologies.
How to manually test
To check that offscreen content is hidden, you should test with screen readers 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.
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.
Resources
Source code for Offscreen content is hidden from assistive technology audit