Offscreen Content

Use a screen reader to be sure that your offscreen content is hidden

Accessibility

Hide offscreen content from assistive technologies

You are not supposed to expose every singular element to assistive technologies such as screen readers: you should expose only relevant ones.

Offscreen content can and should be hidden from them.

 

How can I test and possibly solve the problem?

Use a screen reader to be sure that your offscreen content is hidden: indeed it should not be able to report it. 

If you need to hide offscreen content, simply use visibility: hidden or display: none to remove the elements.

.remove-me {
  visibility: hidden;
}


<button class="remove-me">Can't reach me with the TAB key!</button>

 

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page