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
aria-hidden="true" entfernt das Element und alle Kindelemente aus dem Accessibility Tree. Die Tastaturbedienung bleibt davon unberührt: Enthaltene Links, Schaltflächen oder Formularfelder sind weiterhin per Tabulatortaste erreichbar, werden aber nicht mehr angekündigt. Solche Elemente müssen zusätzlich mit display: none, dem hidden-Attribut oder inert aus der Fokusreihenfolge genommen werden.
Regeln für die Verwendung:
Niemals für inhaltlich relevante Informationen verwenden
Nicht bei fokussierbaren Elementen einsetzen
Beachtung der Verschachtelung (Kindelemente werden ebenfalls versteckt)
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
