Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Best practice: Content outside the screen is hidden from assistive technologies (WCAG 1.3.1 + 4.1.2)

offscreen-content-hidden

This means

Elements that are outside the visible area (e.g., moved or placed invisibly using CSS) should also be hidden from screen readers and other assistive technologies.

This prevents invisible or decorative content from being read aloud incorrectly or becoming accessible via keyboard navigation.

 

Impact

If offscreen content remains accessible to screen readers, this can lead to confusion. Users will then hear elements that are not even visible on the screen, such as duplicate navigation, hidden menus, or technical containers.

This makes orientation considerably more difficult and violates the principles of WCAG 1.3.1 (A) Information and Relationships and WCAG 4.1.2 (A) Name, Role, Value.

 

Recommendation

  • Use display: none, visibility: hidden or aria-hidden=“true” for hidden content if it is irrelevant for screen readers.
  • Elements that are only temporarily invisible (e.g., mobile menus, modals, or sliders) should only be visible and accessible when they are actively opened.
  • Avoid moving content outside the visible area with CSS positioning (position: absolute; left: -9999px;) – these are often still accessible to screen readers.
  • Check whether dynamically displayed content is correctly visible and focusable in the DOM when displayed.

 

Examples

Problematic:

<div style="position:absolute; left:-9999px;">

<p>Hidden text</p>

</div>

 

This text is visually invisible but still readable by screen readers – this can lead to duplicate or confusing output.

Better:

<div aria-hidden=“true” style="display:none;">

<p>Hidden text</p>

</div>

 

With aria-hidden=“true” and display:none, the content is hidden both visually and semantically.

 

Alternative (temporarily visible content):

<nav id="mobile-menu" aria-hidden=“true” style="display:none;">

<a href="/home">Home</a>

<a href="/contact">Contact</a>

</nav>

 

When the menu is opened, remove aria-hidden=“true” and change display:block; to make it accessible.

 

Note

A clear separation between visible and hidden content is crucial for accessible user guidance. Only relevant information should be available to screen readers—everything else should be hidden correctly.

 

Related WCAG criteria:

WCAG 1.3.1 – Info and Relationships

WCAG 4.1.2 – Name, Role, Value

To the official WCAG documentation →