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

Best practice: The focus will be on newly added content (WCAG 1.3.1 + 4.1.2)

offscreen-content-hidden

This means

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

This prevents invisible or decorative content from being read out unintentionally or from becoming reachable via keyboard navigation.

Impact

If off-screen content remains accessible to screen readers, this can lead to confusion. Users may hear elements that are not visible on the screen at all—such as duplicate navigation menus, hidden menus, or technical containers.

This significantly impairs orientation and violates the principles of WCAG 1.3.1 (A) – Info and Relationships as well as WCAG 4.1.2 (A) – Name, Role, Value.

Recommendation

  • Use display: none, visibility: hidden, or aria-hidden="true" for hidden content when it is irrelevant for screen readers.

  • Ensure that elements which are only temporarily invisible (e.g. mobile menus, modals, or sliders) become visible and accessible only when they are actively opened.

  • Avoid moving content outside the visible area using CSS positioning (e.g. position: absolute; left: -9999px;), as such content often remains accessible to screen readers.

Examples

Problematic:

<div style="position:absolute; left:-9999px;">
  <p>Hidden text</p>
</div>

This text is visually invisible but still readable by screen readers, which 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 (temporary visible content):

<nav id="mobile-menu" aria-hidden="true" style="display:none;">
  <a href="/home">Home</a>
  <a href="/kontakt">Contact</a>
</nav>

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

Note

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

Related WCAG criterion:
WCAG 1.3.1 - Info and Relationships
WCAG 4.1.2 - Name, Role, Value