Stellen Sie sicher, dass das scope-Attribut in Tabellen korrekt verwendet wird
Die Web-Accessibility-Standards verlangen, dass das scope-Attribut in Tabellen korrekt eingesetzt wird, gemäß den HTML4- oder HTML5-Spezifikationen, um eine effiziente Navigation für Screenreader-Nutzer zu ermöglichen.
Warum es wichtig ist
Das scope-Attribut erleichtert die Tabellennavigation für Screenreader-Benutzer erheblich, jedoch nur, wenn es korrekt verwendet wird.
Screenreader gehen standardmäßig davon aus, dass eine Tabelle Kopfzeilen hat. Das scope-Attribut gibt an, ob eine Kopfzeile eine Zeile oder eine Spalte beschreibt. Falsch gesetzte scope-Werte können zu verwirrenden oder ungenauen Screenreader-Ausgaben führen.
Behebung des Problems
Das scope-Attribut darf nur in <th>-Elementen verwendet werden. In HTML4 darf scope auch in <td>-Elementen verwendet werden, in HTML5 jedoch nicht.
Sie sollten auch sicherstellen, dass der Wert des scope-Attributs entweder row oder col ist, aber nichts anderes.
Alle <th>-Elemente ohne scope-Attribut sollten ein gültiges scope-Attribut erhalten.
Gutes Codebeispiel
Das folgende Markup zeigt eine Tabelle mit korrekt verwendeten scope-Attributen:
<table>
<caption><strong>Persönliche Bestzeiten des Greensprings Running Club</strong></caption>
<tr>
<th scope="col">Name</th>
<th scope="col">1 Meile</th>
<th scope="col">5 km</th>
<th scope="col">10 km</th>
</tr>
<tr>
<th scope="row">Mary</th>
<td>8:32</td>
<td>28:04</td>
<td>1:01:16</td>
</tr>
<tr>
<th scope="row">Betsy</th>
<td>7:43</td>
<td>26:47</td>
<td>55:38</td>
</tr>
<tr>
<th scope="row">Matt</th>
<td>7:55</td>
<td>27:29</td>
<td>57:04</td>
</tr>
<tr>
<th scope="row">Todd</th>
<td>7:01</td>
<td>24:21</td>
<td>50:35</td>
</tr>
</table>
Kopieren