Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten

Casandra Visser

Autor

Yotam Flohr

Forscher

Ritvik Shrivastava

Experte

Juli 29, 2024

Betroffene Behinderungen: Blind Sehbehindert Hören Mobilität

Standards: WCAG 2.2 Level A

Die Barrierefreiheitsalgorithmen überprüfen, dass aria-hidden-Elemente keine fokussierbaren Elemente enthalten.

Der Name und die Rolle aller Benutzeroberflächenkomponenten müssen programmatisch bestimmbar sein, und Benachrichtigungen über Änderungen an diesen Elementen müssen für Benutzeragenten, einschließlich unterstützender Technologien, verfügbar sein.

Warum es wichtig ist

Wenn das Attribut aria-hidden=”true” auf ein Element angewendet wird, entfernt es das Element sowie alle seine untergeordneten Knoten aus der Accessibility-API. Das bedeutet, dass unterstützende Technologien keinen Zugriff darauf haben.

Dieses Attribut sollte nur verwendet werden, wenn das Verbergen von Inhalten die Benutzererfahrung verbessert.

Wenn aria-hidden verwendet werden muss, um sichtbare Inhalte vor Screenreadern zu verbergen, muss eine identische oder gleichwertige Bedeutung und Funktionalität für unterstützende Technologien zugänglich sein.

Bitte beachten Sie, dass die Verwendung von aria-hidden=”false” auf Inhalten, die Nachkommen eines versteckten Elements sind, diesen Inhalt nicht für die Accessibility-API sichtbar macht.

Wenn Sie aria-hidden=”true” zu einem Element hinzufügen, müssen Entwickler sicherstellen, dass unterstützende Technologien das Element ignorieren. Dies ist normalerweise der Fall, wenn dekorative Teile einer Webseite verborgen werden.

Behebung des Problems

Das Problem kann behoben werden, indem sichergestellt wird, dass der Wert in jedem Attribut korrekt geschrieben ist und einem gültigen Wert entspricht. Es ist auch wichtig, geeignete ARIA-Rollen, Zustände und Eigenschaften zu verwenden.

Gute Codebeispiele

Inhalt, der standardmäßig nicht fokussierbar ist:

Codebeispiel

<p aria-hidden="true">Einige Text</p> Kopieren

Inhalt, der durch CSS verborgen ist:

Codebeispiel

<div aria-hidden="true">
<a href="/" style="display:none">Link</a>
</div>

Kopieren

Inhalt, der durch tabindex unfokussierbar gemacht wurde:

Codebeispiel

<div aria-hidden="true">
<button tabindex="-1">Einige Schaltfläche</button>
</div>

Kopieren

Inhalt, der durch disabled unfokussierbar gemacht wurde:

Codebeispiel

<input disabled aria-hidden="true" /> Kopieren

aria-hidden kann nicht zurückgesetzt werden, wenn es auf einem übergeordneten Element auf true gesetzt wurde:

Codebeispiel

<div aria-hidden="true">
<div aria-hidden="false">
<button tabindex="-1">Einige Schaltfläche</button>
</div>
</div>

Kopieren

Schlechte Codebeispiele

Fokussierbarer Link außerhalb des Bildschirms:

Codebeispiel

<div aria-hidden="true">
<a href="/" style="position:absolute; top:-999em">Link</a>
</div>

Kopieren

Fokussierbares Formularfeld, falsch deaktiviert:

Codebeispiel

<div aria-hidden="true">
<input aria-disabled="true" />
</div>

Kopieren

aria-hidden kann nicht zurückgesetzt werden, wenn es auf einem übergeordneten Element auf true gesetzt wurde:

Codebeispiel

<div aria-hidden="true">
<div>

Kopieren

Fokussierbarer Inhalt durch Tabindex:

Codebeispiel

<p tabindex="0" aria-hidden="true">Ein Text</p> Kopieren

Fokussierbares Zusammenfassungselement.

Codebeispiel

<details aria-hidden="true">
<summary>Einige Schaltflächen</summary>
<p>Einige Details</p>
</details>

Kopieren

Testfälle

Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C GitHub.