Zustand Globaler Zustand

`aria-hidden`

Entfernt ein Element und alle seine Nachfahren aus dem Accessibility-Tree. Sehende Nutzende sehen das Element weiterhin; assistive Technologie erreicht es nicht. Nur für dekorative Inhalte verwenden; niemals auf ein fokussierbares Steuerelement anwenden.

Wann zu verwenden

Bei dekorativen Inhalten, die für Screenreader-Nutzende keinen Mehrwert bieten — üblicherweise Icons neben einer Textbeschriftung, Trennlinien, Hintergrundgrafiken oder dupliziertem Text, der ausschließlich layoutbedingt vorhanden ist. Solche Elemente mit aria-hidden="true" zu versehen, hält den Accessibility-Tree auf bedeutungsvolle Inhalte fokussiert.

Im Vergleich mit ähnlichen Mechanismen:

aria-hidden="true" — für sehende Nutzende sichtbar, für assistive Technologie unsichtbar. Das Element nimmt weiterhin Layoutraum ein.
CSS display: none und das HTML-Attribut hidden — für alle unsichtbar (sehende Nutzende und assistive Technologie). Das Element wird überhaupt nicht gerendert.
CSS visibility: hidden — für alle unsichtbar, das Element belegt jedoch weiterhin Layoutraum.
Das inert-Attribut — Element und Nachfahren sind nicht fokussierbar, Klick-Ereignisse werden unterdrückt, sie verbleiben jedoch im Accessibility-Tree (anders als bei aria-hidden). Das richtige Mittel für modale Hintergründe und ausgeblendete Ansichten.

Entscheidend ist: aria-hidden="true" darf niemals auf ein Element angewendet werden, das ein fokussierbares Steuerelement ist oder enthält. Tastaturnutzende können noch immer per Tab dorthin gelangen, ihr Screenreader kündigt es jedoch nicht an. Sie landen auf einem für sie unsichtbaren Steuerelement. Dies ist einer der am häufigsten gemeldeten axe-core-Fehler.

Synchronisierung

Gültige Werte sind "true", "false" und "undefined". Der nützliche Wert ist "true"; "false" existiert, um ein übergeordnetes aria-hidden außer Kraft zu setzen, was in der Praxis so gut wie nie benötigt wird.

Der Zustand kann statisch sein (ein Icon, das immer dekorativ ist) oder dynamisch. Wird aria-hidden auf einem Bereich umgeschaltet — beispielsweise beim Ausblenden der Haupt-App hinter einem Modal — muss es mit dem tatsächlichen visuellen Zustand synchronisiert und mit inert kombiniert werden, damit der Bereich auch nicht fokussierbar ist.

Häufige Fehler

aria-hidden="true" auf einem fokussierbaren Element — das am häufigsten gemeldete axe-core-Problem.
aria-hidden verwenden, um sichtbaren Text auszublenden, den Screenreader nicht vorlesen sollen. Den Text entweder entfernen oder aus dem DOM auslagern.
aria-hidden="true" auf einem rein dekorativen Icon neben einem beschrifteten Button vergessen — der Screenreader kündigt den zugänglichen Namen des Icons zusätzlich zur Button-Beschriftung an.
aria-hidden="true" auf das <body>- oder <main>-Element setzen, um Hintergrundinhalte hinter einem Modal zu sperren, ohne gleichzeitig inert zu verwenden — der Tastaturfokus kann trotzdem entkommen.
aria-hidden="false" verwenden, um etwas per CSS Ausgeblendetes „anzuzeigen“. Das CSS blendet es weiterhin aus.

Beispiel

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Speichern
</button>