Namen und Rollen

Verborgene Elemente dürfen nicht per Tastatur erreichbar bleiben

Regel: aria-hidden-focus
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

aria-hidden="true" verbirgt ein Element vor Screenreadern, nicht aber vor der Tab-Taste. Wer beides nutzt, landet auf einem Bedienelement, das als nichts angesagt wird — in einem Bereich, den man nicht sieht.

So beheben Sie es

Setzen Sie das Attribut inert auf den verborgenen Container, damit sein Inhalt auch aus der Tab-Reihenfolge fällt.
Wo inert nicht möglich ist, setzen Sie tabindex="-1" auf jedes fokussierbare Nachfahrelement.
Ist der Inhalt ohnehin visuell verborgen, entfernt display:none oder das hidden-Attribut ihn aus beidem zugleich.

Im Markup

Fehlerhaft

<div aria-hidden="true">
  <button>Buy now</button>
</div>

Korrekt

<div aria-hidden="true" inert>
  <button>Buy now</button>
</div>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu aria-hidden-focus (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.