<th>-Elemente und Elemente mit role=columnheader oder role=rowheader müssen die Datenzellen beschreiben, die sie darstellen
Laut Web-Accessibility-Standards müssen Tabellen semantisch korrekt strukturiert und mit der richtigen Header-Hierarchie ausgezeichnet werden.
Warum es wichtig ist
Wenn Tabellen nicht korrekt ausgezeichnet sind, führt dies zu ungenauen Ausgaben von Screenreadern.
Ohne die richtige Auszeichnung können Screenreader-Benutzer die Beziehungen zwischen den Zellen und ihren Inhalten nicht korrekt erfassen.
Behebung des Problems
Jede Tabellenüberschrift in einer Datentabelle muss sich auf die zugehörigen Datenzellen beziehen. Dazu muss das <th>-Element mit den entsprechenden Datenzellen verknüpft sein.
Falls headers-Attribute verwendet werden, müssen sie auf Elemente verweisen, die für Screenreader lesbaren Text enthalten.
- Das <th>-Element darf das headers-Attribut nicht verwenden.
- <th>-Elemente sollten nur verwendet werden, wenn es eine einzelne Zeile und eine einzelne Spalte von Überschriften gibt.
- <th>-Elemente müssen ein scope-Attribut enthalten, um die Zuordnung zu Spalten (scope=”col”) oder Zeilen (scope=”row”) zu definieren.
Gutes Codebeispiel
...
<th scope="col">Nachname</th>
<th scope="col">Vorname</th>
<th scope="col">Ort</th>
...
Kopieren Schlechtes Codebeispiel
<table>
<caption>Teddybärensammler:</caption>
<tr>
<th scope="row">Nachname</th>
<th scope="row">Vorname</th>
<th scope="row">Stadt</th>
</tr>
<tr>
<td>Phoenix</td>
<td>Imari</td>
<td>Henry</td>
</tr>
<tr>
<td>Zeki</td>
<td>Rome</td>
<td>Min</td>
</tr>
<tr>
<td>Apirka</td>
<td>Kelly</td>
<td>Brynn</td>
</tr>
</table>
Kopieren Testfälle
Für weitere Beispiele besuchen Sie die ACT Rules Library der W3C auf GitHub.