aria-hidden
Der aria-hidden
-Zustand gibt an, ob das Element für eine Zugänglichkeits-API zugänglich ist.
Beschreibung
Das aria-hidden
-Attribut kann verwendet werden, um nicht interaktive Inhalte vor der Zugänglichkeits-API zu verbergen.
Wenn Sie aria-hidden="true"
zu einem Element hinzufügen, entfernen Sie dieses Element und alle seine Kinder aus dem Zugänglichkeitsbaum. Dies kann die Erfahrung für Benutzer von unterstützenden Technologien verbessern, indem Folgendes verborgen wird:
- Rein dekorative Inhalte wie Symbole oder Bilder
- Doppelte Inhalte, wie wiederholter Text
- Ausgeblendete oder eingeklappte Inhalte, wie Menüs
Das Vorhandensein des aria-hidden
-Attributs verbirgt Inhalte vor unterstützenden Technologien, versteckt jedoch nichts visuell.
aria-hidden="true"
sollte nicht bei Elementen verwendet werden, die Fokus erhalten können. Da dieses Attribut auch auf die Kinder eines Elements vererbt wird, sollte es nicht dem Eltern- oder Vorfahrenelement eines fokussierbaren Elements hinzugefügt werden.
Warnung: Verwenden Sie aria-hidden="true"
nicht bei fokussierbaren Elementen.
Der versteckte Status eines Elements basiert darauf, ob es gerendert wird. Das Rendering wird normalerweise durch CSS gesteuert. Ein Element, dessen display
-Eigenschaft über CSS auf none
gesetzt ist, wird nicht gerendert. Ein Element gilt als versteckt, wenn es oder einer seiner Vorfahren nicht gerendert wird oder dessen aria-hidden
-Attributwert auf true gesetzt ist. Beachten Sie, dass ein Element und seine Kinder, die aria-hidden="true"
deklariert haben, dennoch sichtbar sein werden, es sei denn, sie werden auch durch CSS ausgeblendet.
Seien Sie vorsichtig, wenn Sie aria-hidden
verwenden, um sichtbar gerenderte Inhalte vor unterstützenden Technologien zu verbergen. Sie sollten sichtbare Inhalte nicht verbergen, es sei denn, dies verbessert die Erfahrung für Benutzer von unterstützenden Technologien, indem redundante oder überflüssige Inhalte entfernt werden. Nur wenn identische oder gleichwertige Bedeutung und Funktionalität für unterstützende Technologien zugänglich gemacht werden, kann das Entfernen sichtbarer Inhalte aus der Zugänglichkeits-API in Betracht gezogen werden.
Hinweis: Berücksichtigen Sie alle Behinderungen, wenn Sie sichtbar gerenderte Inhalte vor unterstützenden Technologien verbergen. Nicht alle Benutzer von unterstützenden Technologien sind sehbehindert. Wenn der sichtbare Inhalt nicht mit dem Textinhalt in der Zugänglichkeits-API übereinstimmt, wird das Benutzererlebnis für sehende Benutzer negativ beeinflusst.
Oberflächlich betrachtet scheinen aria-hidden="true"
und role="presentation"
und dessen Synonym role="none"
ähnlich zu sein, aber die Absicht hinter jedem ist unterschiedlich.
aria-hidden="true"
entfernt das gesamte Element aus der Zugänglichkeits-API.role="presentation"
undrole="none"
entfernen die semantische Bedeutung eines Elements, während es und seine Inhalte dennoch für unterstützende Technologien zugänglich bleiben.
aria-hidden="true"
sollte nicht hinzugefügt werden, wenn:
- Das HTML-Attribut
hidden
vorhanden ist - Das Element oder das Elementvorfahre mit
display: none
verborgen ist - Das Element oder das Elementvorfahre mit
visibility: hidden
verborgen ist
In allen drei Szenarien ist das Hinzufügen des Attributs unnötig, da das Element bereits aus dem Zugänglichkeitsbaum entfernt wurde. Visuelles Verbergen von Elementen mit display
oder visibility
versteckt Inhalte vom Bildschirm und von unterstützenden Technologien.
Die Verwendung von aria-hidden="false"
wird das Element nicht für unterstützende Technologien wieder zugänglich machen, wenn einer seiner Eltern aria-hidden="true"
angibt.
Beispiel
Das Hinzufügen von aria-hidden="true"
zu dem Symbol versteckt das Symbol-Zeichen davor, in den zugänglichen Namen aufgenommen zu werden.
<button>
<span class="fa fa-tweet" aria-hidden="true"></span>
<span class="label"> Tweet </span>
</button>
Wir haben eine Schaltfläche mit einem Font Awesome-Symbol. Wir verstecken das Symbol vor unterstützenden Technologien mit aria-hidden="true"
, da das Zugänglichmachen des Symbols für unterstützende Technologien zu Redundanz oder, wenn das Symbol nicht den gleichen Inhalt wie der sichtbare Text hat, zu Verwirrung führen könnte.
Werte
Zugehörige Schnittstellen
-
Die
ariaHidden
-Eigenschaft, die Teil derElement
-Schnittstelle ist, reflektiert den Wert desaria-hidden
-Attributs, das angibt, ob das Element für eine Zugänglichkeits-API zugänglich ist. -
Die
ariaHidden
-Eigenschaft, die Teil derElementInternals
-Schnittstelle ist, reflektiert den Wert desaria-hidden
-Attributs.
Zugehörige Rollen
Wird in ALLEN Rollen verwendet
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-hidden |
Siehe auch
aria-disabled
aria-modal
aria-expanded
- HTML-Attribut
hidden
- CSS-Eigenschaft
display
- CSS-Eigenschaft
visibility