aria-hidden: Elemente vor assistiven Technologien verbergen

Nicht jeder visuelle Inhalt einer Webseite ist für Screenreader-Nutzer relevant. Dekorative Icons, duplizierte Informationen oder visuelle Effekte können die Screenreader-Ausgabe unnötig aufblähen. <code>aria-hidden="true"</code> ist das Werkzeug, um solche Elemente gezielt vor assistiven Technologien zu verbergen. Doch Vorsicht: Wird es auf Elemente mit echtem Informationsgehalt oder interaktive Elemente angewendet, entsteht ein schwerwiegender Barrierefreiheitsfehler. EN 301 549 Abschnitt 11.4.1.2 und WCAG 4.1.2 verlangen, dass alle relevanten Informationen programmatisch verfügbar bleiben.

Wann aria-hidden="true" korrekt ist

Dekorative Icons: Font-Awesome- oder SVG-Icons, die rein dekorativ neben einem Textlabel stehen, sollten mit aria-hidden="true" versehen werden: <button><i class="fa fa-search" aria-hidden="true"></i> Suchen</button>. Ohne aria-hidden würde der Screenreader das Icon möglicherweise als sinnlosen Text vorlesen. Duplizierte Inhalte: Wenn ein visueller Text und ein aria-label die gleiche Information tragen, kann der visuelle Text mit aria-hidden="true" vor Dopplung geschützt werden. Hintergrund-Dekorationen: Rein visuelle Elemente wie Hintergrundmuster, Trennlinien oder animierte Effekte. Modale Dialoge: Wenn ein Modal geöffnet ist, wird der Hintergrundinhalt oft mit aria-hidden="true" versehen, damit Screenreader nur den Dialog wahrnehmen (WCAG 2.4.3). Regel: Verwenden Sie aria-hidden="true" nur, wenn das Entfernen der Information keinen Informationsverlust für Screenreader-Nutzer verursacht.

Wann aria-hidden="true" falsch und gefährlich ist

Auf fokussierbaren Elementen: Ein <button aria-hidden="true"> oder <a href="..." aria-hidden="true"> ist ein schwerwiegender Fehler. Das Element ist weiterhin per Tastatur erreichbar, wird aber vom Screenreader nicht angekündigt – der Nutzer fokussiert ein „Geisterelement". WCAG 4.1.2 wird verletzt. Auf informationstragenden Inhalten: Ein Icon-Button ohne Textlabel, bei dem das Icon mit aria-hidden="true" versteckt wird, verliert seinen gesamten zugänglichen Namen. Auf Eltern von fokussierbaren Kindern: aria-hidden="true" auf einem Container verbirgt auch alle Kinder – einschließlich Buttons und Links darin. Als Ersatz für display: none: aria-hidden="true" versteckt nur vor Screenreadern, nicht visuell. Für visuell und semantisch versteckte Inhalte verwenden Sie display: none oder das hidden-Attribut. Auf Inhalten mit CSS-Visibility: Bei visibility: hidden ist aria-hidden redundant.

aria-hidden="false" – ein Mythos

Ein häufiges Missverständnis: aria-hidden="false" macht ein verstecktes Element nicht wieder sichtbar im Accessibility Tree, wenn ein Elternelement aria-hidden="true" trägt. Die Vererbung von aria-hidden="true" ist absolut – kein Kindelement kann sie aufheben. Praktisches Problem: Ein Modal-Hintergrund hat aria-hidden="true". Ein dynamisch eingefügtes Tooltip innerhalb dieses Bereichs mit aria-hidden="false" bleibt trotzdem unsichtbar für Screenreader. Die korrekte Lösung: Das Tooltip außerhalb des aria-hidden-Containers im DOM platzieren. Technisch gilt: aria-hidden="false" ist äquivalent zum Fehlen des Attributs. Der einzige Anwendungsfall ist das programmatische Entfernen von aria-hidden="true" per JavaScript, z. B. beim Schließen eines Modals, wenn der Hintergrund wieder zugänglich werden soll: container.removeAttribute("aria-hidden") oder container.setAttribute("aria-hidden", "false").

Zusammenspiel mit display: none, hidden und visibility

Die verschiedenen Versteck-Mechanismen im Überblick: display: none: Visuell und semantisch versteckt. Element ist nicht im Accessibility Tree und nicht fokussierbar. visibility: hidden: Visuell versteckt, nimmt aber Platz ein. Nicht im Accessibility Tree, nicht fokussierbar. hidden-Attribut: Wie display: none – visuell und semantisch versteckt. aria-hidden="true": Nur semantisch versteckt. Element ist visuell sichtbar und ggf. fokussierbar, aber nicht im Accessibility Tree. .sr-only-Klasse: Visuell versteckt, aber im Accessibility Tree vorhanden (Gegenteil von aria-hidden). Für BFSG-Konformität entscheidend: Wählen Sie die Methode, die sowohl visuell als auch semantisch das gewünschte Ergebnis erzielt. aria-hidden ist nur dann richtig, wenn das Element visuell sichtbar bleiben soll, aber für Screenreader irrelevant ist.

Best Practices für den Alltag

Icon-Buttons: Icon mit aria-hidden="true" und aria-label auf dem Button: <button aria-label="Schließen"><svg aria-hidden="true">...</svg></button>. Dekorative Bilder: <img src="deko.jpg" alt="" aria-hidden="true"> – leeres alt reicht eigentlich aus, aria-hidden bietet doppelte Absicherung. Modal-Management: Beim Öffnen eines Modals aria-hidden="true" auf den Hauptinhalt setzen, beim Schließen entfernen. Oder besser: das inert-Attribut verwenden. Skip-Content: Visuelle Trennelemente wie <hr aria-hidden="true"> sind gute Kandidaten. Automatisierte Prüfung: axe-core und bf-check erkennen aria-hidden auf fokussierbaren Elementen als kritischen Fehler. Nutzen Sie diese Tools in Ihrer CI/CD-Pipeline, um Regressionen zu vermeiden. Das BFSG verlangt kontinuierliche Barrierefreiheit, nicht nur einmalige Prüfung.