aria-hidden

aria-hidden ist ein WAI-ARIA-Attribut, das mit dem Wert true ein Element samt Kindelementen aus dem Accessibility Tree entfernt und es damit vor Screenreadern verbirgt, ohne die sichtbare Darstellung zu ändern. Der Accessibility Tree ist die Datenstruktur, aus der assistive Technologien den Seiteninhalt lesen. Nur dort wirkt das Attribut: Das Element bleibt am Bildschirm sichtbar und behält sein Layout. Damit ist aria-hidden das Gegenstück zum Muster „Visuell versteckter Text (sr-only)“, das Inhalte umgekehrt nur für Screenreader bereitstellt. Gedacht ist das Verbergen für Redundantes und Dekoratives, etwa ein Icon neben einem ohnehin beschrifteten Button. Die häufigste Fehlanwendung: aria-hidden=true auf einem fokussierbaren Element oder einem seiner Elternelemente. Die Tastatur erreicht Link oder Button dann weiterhin, nur sagt der Screenreader nichts mehr an. Das W3C-Dokument „Using ARIA“ schließt diese Kombination ausdrücklich aus. In Kombination mit display:none oder dem HTML-Attribut hidden ist aria-hidden überflüssig; so versteckte Elemente fehlen im Accessibility Tree ohnehin. Eine Grenze bleibt: aria-hidden=false auf einem Kindelement hebt das Verbergen durch ein Elternelement nicht auf.

In der Praxis

Prüfen Sie vor jedem aria-hidden=true zwei Dinge: Ist der Inhalt wirklich redundant, und steckt im Teilbaum ein Link, ein Button oder ein Formularfeld? Gute Kandidaten sind dekorative SVG-Icons neben Buttontext oder ein Emoji in der Überschrift. Der klassische Fehler ist das geschlossene Overlay-Menü, das aria-hidden=true bekommt, dessen Links aber mit der Tabulatortaste erreichbar bleiben. Wer mit einem Screenreader arbeitet, landet dann auf Elementen ohne Namen und ohne Rückmeldung. Die Abhilfe: geschlossene Menüs zusätzlich mit display:none oder dem hidden-Attribut verstecken, dann sind sie auch nicht mehr fokussierbar. Der Gegentest kostet eine Minute. Gehen Sie mit Tab durch die Seite und lassen Sie einen Screenreader mitlaufen; jedes Element, das Fokus erhält, aber nicht angesagt wird, ist ein Fund. Sichtbaren Text verbergen Sie nur, wenn er für assistive Technologien tatsächlich doppelt wäre. Im Zweifel bleibt er stehen.

Passende Leistung

Quellen

← Zurück zum Glossar