aria-hidden richtig verwenden – Unsichtbar für Screenreader, sichtbar für alle anderen

aria-hidden=“true“ ist kein Attribut, das Sie inflationär nutzen sollten. Sein Wert liegt im gezielten Einsatz, um die Screenreader-Ausgabe zu vereinfachen und redundante oder verwirrende Informationen zu eliminieren. Hier sind die gängigsten und wichtigsten Anwendungsfälle, bei denen aria-hidden=“true“ eine essenzielle Rolle für die Barrierefreiheit spielt:

Dekorative oder redundante Elemente

Dies ist der häufigste und intuitivste Anwendungsfall. Elemente, die für das Verständnis des Inhalts oder die Bedienbarkeit der Seite nicht notwendig sind, sollten für Screenreader unsichtbar gemacht werden.

• Icons ohne eigene Funktion oder mit Text-Begleitung:
  Wenn ein Icon (z.B. ein Font-Icon, SVG oder kleines <img>-Element) rein dekorativ ist oder seine Funktion bereits durch einen direkt daneben stehenden, sichtbaren Text klar benannt wird (z.B. ein „Home“-Icon neben dem Wort „Startseite“), sollte es für Screenreader ausgeblendet werden.
  Beispiel: Ein Sprechblasen-Icon neben dem Text „Kontakt“. Der Text reicht aus, das Icon ist visuelle Zierde.
  HTML
  <p>
  <span class=“icon-chat“ aria-hidden=“true“></span> Kontakt
  </p>
  (Hier geht es um ein Icon, das nicht selbst klickbar ist, sondern den umgebenden Text schmückt.)

• Hintergrundgrafiken mit redundanten Informationen: Wenn eine Grafik über CSS als Hintergrund eingebunden ist (und somit ohnehin nicht von Screenreadern erfasst wird), aber auch als <img> im HTML-Code vorhanden ist und lediglich eine visuelle Verdopplung darstellt, kann die HTML-Variante mit aria-hidden=“true“ versehen werden, falls sie keine zusätzliche Information liefert.
• Visuelle Trenner und reine Design-Elemente: Linien, Ornamente, Farbflächen oder andere Designelemente, die keinerlei Informationsgehalt haben oder nicht interaktiv sind.
  HTML
  <hr aria-hidden=“true“><div class=“decorative-pattern“ aria-hidden=“true“></div>

Duplizierte oder Off-Screen-Inhalte (Mobile Navigationen, Hidden Elements)

Oftmals gibt es im HTML-Code Inhalte, die aus Design- oder technischen Gründen mehrfach vorhanden sind oder nur unter bestimmten Bedingungen sichtbar werden (z.B. auf mobilen Geräten). aria-hidden=“true“ hilft hier, Verwirrung zu vermeiden.

• Mobile Navigationen: Wenn eine Navigation für Desktop und Mobile im DOM existiert, aber nur eine Version davon zu einem Zeitpunkt visuell und interaktiv ist, sollte die jeweils nicht sichtbare/inaktive Version für Screenreader ausgeblendet werden. So wird verhindert, dass Screenreader-Nutzer eine „versteckte“ Navigation finden und versuchen, sie zu bedienen.
• Off-Screen-Inhalte: Inhalte, die außerhalb des sichtbaren Bereichs platziert werden und nur unter bestimmten Bedingungen (z.B. per JavaScript) in den sichtbaren Bereich geschoben werden. Wenn diese Inhalte nicht relevant sind, während sie „off-screen“ sind, kann aria-hidden=“true“ sie ausblenden.

Komplexe Widgets während Übergängen/Interaktionen (Dynamischer Einsatz)

Bei interaktiven Elementen, die den Fokus des Nutzers erfordern, ist aria-hidden=“true“ entscheidend, um den Screenreader auf das Wesentliche zu lenken. Hier wird das Attribut meist dynamisch per JavaScript gesetzt.

• Modal-Dialoge (Pop-ups): Wenn ein Modal-Dialog geöffnet wird, sollte der gesamte restliche Seiteninhalt (alles, was sich hinter dem Modal befindet) aria-hidden=“true“ erhalten. Dies stellt sicher, dass der Screenreader den Fokus ausschließlich auf den Inhalt des Modals lenkt und nicht versucht, mit der darunterliegenden Seite zu interagieren. Nach dem Schließen des Modals muss aria-hidden dann wieder entfernt werden.
• Karussells oder Slider: Bei einem Bildkarussell sollten nur die gerade aktiven oder sichtbaren Elemente für Screenreader zugänglich sein. Nicht aktive Slides erhalten aria-hidden=“true“, um eine Überfrachtung der Ausgaben zu vermeiden.
• Lade-Overlays: Wenn ein Lade-Overlay den gesamten Inhalt einer Seite blockiert, sollte der blockierte Inhalt aria-hidden=“true“ erhalten, um dem Screenreader mitzuteilen, dass dieser Inhalt momentan nicht interaktiv oder relevant ist.

Besonderer Mehrwert: Text, der für sehende Nutzer nötig, aber für Screenreader irrelevant/störend ist

Dies ist ein seltenerer, aber bedenkenswerter Anwendungsfall, der den Mehrwert von aria-hidden unterstreicht und über das Übliche hinausgeht:

Manchmal gibt es kurze Textfragmente, die aus visuellen Gründen unverzichtbar sind, aber für Screenreader-Nutzer eine unnötige Redundanz oder sogar eine Störung darstellen, weil die Information bereits auf andere, bessere Weise bereitgestellt wird.

Beispiel: Eine rein visuelle Bildunterschrift zu einem Bild mit gutem alt-Text. Stellen Sie sich ein Bild vor, das einen präzisen und informativen alt-Text hat (z.B. „Ein sonniger Strand mit Palmen und türkisblauem Meer bei Sonnenuntergang“). Darunter befindet sich eine sichtbare Bildunterschrift, die nur „Urlaubsbild“ sagt. Für sehende Nutzer ist die knappe Unterschrift okay, für Screenreader-Nutzer wäre das jedoch eine störende Dopplung oder sogar eine Abwertung der besseren alt-Text-Information. Hier könnte die oberflächliche Bildunterschrift mit aria-hidden=“true“ versehen werden, um die wertvollere alt-Text-Info in den Vordergrund zu rücken und die auditive Ausgabe zu optimieren.

HTML
<img src=“strand.jpg“ alt=“Ein sonniger Strand mit Palmen und türkisblauem Meer bei Sonnenuntergang“>

<p class=“image-caption“ aria-hidden=“true“>Urlaubsbild</p>

Wichtig: Dies sollte nur geschehen, wenn der alt-Text deutlich besser und ausführlicher ist als die Bildunterschrift. Im Zweifel sollte die Bildunterschrift immer zugänglich bleiben, wenn sie neue oder ergänzende Informationen liefert.)

Der bewusste Einsatz von aria-hidden=“true“ in diesen Szenarien trägt maßgeblich dazu bei, eine aufgeräumte, klare und somit barrierefreiere Nutzererfahrung für Menschen zu schaffen, die auf assistive Technologien angewiesen sind.