Das ARIA-Attribut aria-hidden steuert, ob ein Element für assistive Technologien wie Screenreader zugänglich ist. Es blendet Elemente ausschließlich aus dem Accessibility Tree aus, ohne deren visuelle Darstellung zu beeinflussen.
Die Verwendung von aria-hidden ist wichtig für:
Dekorative Elemente ohne Informationsgehalt
Redundante Inhalte, die bereits anderweitig für Screenreader zugänglich sind
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 (wirkungslos)
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
