HTML/Attribute/aria-hidden

Das aria-hidden-Attribut ist ein ARIA-Attribut, das ein Element vor Hilfstechnologien (wie Screenreadern) verbirgt. Für sehende Benutzer bleibt es aber sichtbar.

erlaubte Werte	true / false /undefined
default-Wert	undefined
erlaubt in	allen Elementen
Browsersupport	Details bei caniuse.com: {{{caniuse}}}

Beispiel

<span class="icon" aria-hidden="true">★</span> Bewerte dieses Produkt!

Die Bewertungsfunktion wird durch einen Stern symbolisiert. Er ist Teil des DOM und auf dem Bildschirm sichtbar, wird aber nicht vorgelesen.

Beachten Sie: Verwende hidden, wenn ein Element sowohl für visuelle Benutzer als auch für Benutzer von Bildschirmlesegeräten vollständig ausgeblendet werden soll. So kann beispielsweise ein Abschnitt einer Seite ausgeblendet sein, bis er durch eine bestimmte Aktion (z. B. das Anklicken einer Schaltfläche) sichtbar wird.

• Verwende aria-hidden="true", wenn ein Element auf dem Bildschirm sichtbar sein soll, es aber für Screenreader ausgeblendet werden soll, weil es Benutzern, die auf unterstützende Technologien angewiesen sind, keine nützlichen Informationen liefert. Das kann zum Beispiel ein dekoratives Symbol oder ein Bild sein, das keinen wichtigen Inhalt vermittelt.
  Elemente, die mit aria-hidden="true" gekennzeichnet sind, sind weder sichtbar noch fokussierbar.

Empfehlung: Verwende es für visuelle Elemente, die für unterstützende Technologien keine Bedeutung haben, wie z. B. dekorative Symbole, Hintergrundbilder oder überflüssiger Text, der von Bildschirmlesern ignoriert werden sollte.

Siehe auch

• WAI-ARIA
• Navigation/Flyout-Menü#Toggle-Design:_Navicon
  Hamburger-Icon und Schließen-Symbol mit aria-hidden auszeichnen

Weblinks

• W3C: aria-hidden
• MDN: aria-hidden

{{{{{Inhaltsverzeichnis}}}}}

Attribut	Sichtbarkeit	Barrierefreiheit (Screenreader)	nimmt Raum im Layout ein
hidden
aria-hidden