Stellt sicher, dass ARIA-Attribute gemäß der Spezifikation der Rolle des Elements verwendet werden
Laut WCAG können einige ARIA-Attribute nur unter bestimmten Bedingungen zu einem Element hinzugefügt werden.
Bestimmte Attribute haben jedoch unterschiedliche Einschränkungen:
- aria-checked: Dieses Attribut kann nicht zu einem HTML-Input-Element mit type=”checkbox” hinzugefügt werden. Da der ausgewählte Zustand von einem Browser bestimmt wird, sollte aria-checked ignoriert werden. Browser tun dies jedoch nicht immer konsistent, sodass der Unterschied zwischen dem nativen Checkbox-Zustand und dem aria-checked-Wert zu Unterschieden führen kann, wenn eine Website von Screenreadern und anderen unterstützenden Technologien aufgerufen wird.
- aria-posinset, aria-setsize, aria-expanded und aria-level: Diese Attribute sind bedingt, wenn sie nacheinander in einer Zeile platziert werden. Diese Attribute können nur verwendet werden, wenn die Zeile Teil eines Treegrids ist. Wenn sie innerhalb einer Tabelle oder eines Grids platziert werden, haben diese Attribute keine Funktion und könnten zu unvorhersehbarem Verhalten von unterstützenden Technologien führen.
Warum es wichtig ist
Wenn Elemente nicht wie erwartet funktionieren, kann dies zu einer schlechten Benutzererfahrung für Menschen führen, die auf unterstützende Technologien angewiesen sind. Es ist wichtig sicherzustellen, dass unterstützende Technologien die beabsichtigte Bedeutung von Inhalten korrekt interpretieren und wiedergeben können.
Behebung des Problems
Beim Umgang mit Checkboxen können zwei Lösungen verwendet werden. Eine Option besteht darin, aria-checked zu entfernen, sodass der native Checkbox-Zustand des Browsers anzeigt, ob das Element ausgewählt ist oder nicht.
Die andere Option besteht darin, die native HTML-Checkbox durch ein anderes Element zu ersetzen. Dies bedeutet, dass Sie ihm auch eine Rolle zuweisen und sicherstellen müssen, dass es über die Tastatur zugänglich ist.
Gutes Codebeispiel
<label>
<input type="checkbox" checked> Ich stimme zu, meine Website barrierefrei zu gestalten
</label>
Kopieren Schlechtes Codebeispiel
<label>
<input type="checkbox" aria-checked="true"> Ich stimme zu, meine Website barrierefrei zu gestalten
</label>
Kopieren Behebung des Problems
Für tr-Elemente und Elemente mit role=”row” müssen Sie möglicherweise die Rolle der übergeordneten Tabelle oder des Grids in ein Treegrid ändern, wenn die Attribute wesentlich sind.
Gutes Codebeispiel
<table role="treegrid">
<tr aria-level="1" aria-expanded="false">
<td role="gridcell">Meine Downloads</td>
</tr>
</table>
Kopieren Schlechtes Codebeispiel
<table>
<tr aria-level="1" aria-expanded="false">
<td>Meine Downloads</td>
</tr>
</table>
Kopieren Testfälle
Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.