Inhalt für Screenreader ausgeblendet, aber per Tastatur erreichbar

WCAG 4.1.2, 1.3.1 (A) · EN 301 549 9.4.1.2

Ein Element mit aria-hidden="true" enthält Elemente, die den Fokus erhalten können.

Warum das zählt

Das ergibt die denkbar schlechteste Kombination: Wer die Tabulatortaste drückt, landet im Element, aber der Screenreader sagt nichts an. Der Fokus verschwindet in einem Loch. Fast immer passiert das bei Menüs oder Dialogen, die mit aria-hidden ausgeblendet, aber nicht aus der Tabulatorreihenfolge genommen wurden.

So wird es behoben

Wenn Sie etwas ausblenden, blenden Sie es richtig aus: display:none oder das hidden-Attribut — oder geben Sie jedem fokussierbaren Element darin tabindex="-1".

<div aria-hidden="true">
  <a href="/x">Per Tab erreichbarer Link</a>
</div>

<div hidden>
  <a href="/x">Link</a>
</div>

Verwandte Themen

• Grafische Schaltfläche ohne Alternativtext
• Eingebetteter Rahmen ohne Titel
• Formularfelder ohne Beschriftung
• Schaltflächen ohne Namen