Best practice: Inhalte außerhalb des Bildschirms sind für assistierende Technologien ausgeblendet (WCAG 1.3.1 + 4.1.2)

Das bedeutet

Elemente, die außerhalb des sichtbaren Bereichs liegen (z. B. per CSS verschoben oder unsichtbar platziert), sollten auch für Screenreader und andere assistive Technologien ausgeblendet werden.
Dadurch wird verhindert, dass unsichtbare oder dekorative Inhalte fälschlicherweise vorgelesen oder in der Tastaturnavigation erreichbar werden.

Auswirkung

Wenn Offscreen-Inhalte für Screenreader weiterhin zugänglich sind, kann dies zu Verwirrung führen. Nutzer und Nutzerinnen hören dann Elemente, die auf dem Bildschirm gar nicht sichtbar sind – etwa doppelte Navigationen, versteckte Menüs oder technische Container.
Das erschwert die Orientierung erheblich und verletzt die Prinzipien der WCAG 1.3.1 (A) Info und Beziehungen sowie WCAG 4.1.2 (A) Name, Rolle, Wert.

Empfehlung

Verwenden Sie für ausgeblendete Inhalte display: none, visibility: hidden oder aria-hidden="true", wenn sie für Screenreader irrelevant sind.
Elemente, die nur temporär unsichtbar sind (z. B. mobile Menüs, Modale oder Slider), sollten erst dann sichtbar und zugänglich sein, wenn sie aktiv geöffnet werden.
Vermeiden Sie es, Inhalte mit CSS-Positionierung außerhalb des sichtbaren Bereichs zu verschieben (position: absolute; left: -9999px;) – diese sind für Screenreader oft weiterhin erreichbar.
Prüfen Sie, ob dynamisch eingeblendete Inhalte beim Anzeigen korrekt sichtbar und im DOM fokussierbar sind.

Beispiele

Problematisch:

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

Dieser Text ist visuell unsichtbar, aber für Screenreader weiterhin lesbar – das kann zu doppelten oder verwirrenden Ausgaben führen.

Besser:

<div aria-hidden="true" style="display:none;">
  <p>Versteckter Text</p>
</div>

Mit aria-hidden="true" und display:none ist der Inhalt sowohl visuell als auch semantisch ausgeblendet.

Alternativ (temporär sichtbarer Inhalt):

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

Wenn das Menü geöffnet wird, entfernen Sie aria-hidden="true" und ändern Sie display:block;, um es zugänglich zu machen.

Hinweis

Eine klare Trennung zwischen sichtbaren und versteckten Inhalten ist entscheidend für eine barrierefreie Benutzerführung. Nur relevante Informationen sollten für Screenreader verfügbar sein – alles andere sollte korrekt ausgeblendet werden.

Verknüpfte WCAG-Kriterien:
WCAG 1.3.1 – Info und Beziehungen
WCAG 4.1.2 – Name, Rolle, Wert
Zur offiziellen WCAG-Dokumentation →