Skip to content
Learn Measure Blog Case studies About
On this page
  • How to manually test
  • How to fix
  • Resources

Offscreen content is hidden from assistive technology

May 2, 2019 — Updated Sep 19, 2019
Appears in: Accessibility audits
On this page
  • How to manually test
  • How to fix
  • Resources

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.

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

Last updated: Sep 19, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.