Das ARIA-Attribut »aria-hidden« steuert die Sichtbarkeit von Elementen für assistive Technologien – insbesondere Screenreader. Es ermöglicht, visuell sichtbare Elemente vom Accessibility Tree auszuschließen und damit für Screenreader »unsichtbar« zu machen.
Die Verwendung von aria-hidden ist wichtig für:
Dekorative Elemente ohne Informationsgehalt
Redundante Informationen, die bereits anders bereitgestellt werden
Icons, die nur zur visuellen Unterstützung dienen
Ausgeblendete Navigationselemente in mobilen Menüs
Rein ästhetische Gestaltungselemente
Dabei gilt: aria-hidden="true" entfernt das Element und alle seine Kindelemente aus dem Accessibility Tree. Dies bedeutet, dass diese Elemente von assistiven Technologien komplett ignoriert werden. Besondere Vorsicht ist geboten, da auch interaktive Elemente innerhalb eines aria-hidden="true"-Bereichs nicht mehr per Tastatur erreichbar sind.
Regeln für die Verwendung:
Niemals für inhaltlich relevante Informationen verwenden
Nicht bei fokussierbaren Elementen einsetzen
Keine Kombination mit aria-labelledby oder aria-describedby
Beachtung der Verschachtelung (Kindelemente werden ebenfalls versteckt)
Es ist wichtig zu verstehen, dass aria-hidden keine Alternative zum CSS display:none oder visibility:hidden darstellt. Während die CSS-Eigenschaften Elemente auch visuell ausblenden, beeinflusst aria-hidden ausschließlich die Wahrnehmung durch assistive Technologien.
Beispiel: Icons in Schaltflächen:
Das Icon wird mit aria-hidden="true" für Screenreader ausgeblendet:
<span class="icon" aria-hidden="true">→</span>Der begleitende Text bleibt für alle zugänglich
Redundante Informationen werden vermieden
Die visuelle Gestaltung bleibt erhalten
