Jede Zelle in einer Tabelle, die das headers-Attribut verwendet, darf sich nur auf andere Zellen in derselben Tabelle beziehen
Die korrekte Auszeichnung von Datentabellen kann komplex und zeitaufwendig sein. Um eine barrierefreie Nutzung zu gewährleisten, sollten Tabellen semantisch korrekt strukturiert und mit der richtigen Header-Hierarchie versehen werden.
Warum es wichtig ist
Wenn Tabellen nicht korrekt ausgezeichnet sind, führt dies zu verwirrenden oder ungenauen Ausgaben von Screenreadern.
Eine barrierefrei gestaltete Datentabelle ermöglicht es Nutzern, sich von Zelle zu Zelle zu bewegen, während der Screenreader automatisch die zugehörigen Spalten- und Zeilenüberschriften vorliest.
Behebung des Problems
Entwickler sollten sicherstellen, dass sich jede Zelle in einer Tabelle, die das headers-Attribut verwendet, auf eine andere Zelle in derselben Tabelle bezieht, indem sie ein scope-Attribut für jedes <th>-Element innerhalb von <tr>-Elementen erstellen. Diese Regel überprüft, ob Verweise auf Header-Spalten und -Zeilen mit bestimmten <td>-Elementen verbunden sind.
Gutes Codebeispiel
<table>
<caption><strong>Persönliche Bestzeiten des Greensprings Running Club</strong></caption>
<thead>
<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>
</thead>
<tbody>
<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>
</tbody>
</table>
Kopieren Beispiel mit scope=”colgroup” und scope=”rowgroup” Werten in <th>-Elementen:
<table>
<caption>Verkaufte Artikel im August 2016</caption>
<tbody>
<tr>
<td></td>
<td></td>
<th colspan="3" scope="colgroup">Kleidung</th>
<th colspan="2" scope="colgroup">Accessoires</th>
</tr>
<tr>
<td></td>
<td></td>
<th scope="col">Hosen</th>
<th scope="col">Röcke</th>
<th scope="col">Kleider</th>
<th scope="col">Armbänder</th>
<th scope="col">Ringe</th>
</tr>
<tr>
<th rowspan="3" scope="rowgroup">Belgien</th>
<th scope="row">Antwerpen</th>
<td>56</td>
<td>22</td>
<td>43</td>
<td>72</td>
<td>23</td>
</tr>
<tr>
<th scope="row">Gent</th>
<td>46</td>
<td>18</td>
<td>50</td>
<td>61</td>
<td>15</td>
</tr>
<tr>
<th scope="row">Brüssel</th>
<td>51</td>
<td>27</td>
<td>38</td>
<td>69</td>
<td>28</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">Niederlande</th>
<th scope="row">Amsterdam</th>
<td>89</td>
<td>34</td>
<td>69</td>
<td>85</td>
<td>38</td>
</tr>
<tr>
<th scope="row">Utrecht</th>
<td>80</td>
<td>12</td>
<td>43</td>
<td>36</td>
<td>19</td>
</tr>
</tbody>
</table>
Kopieren Testfälle
Für weitere Beispiele besuchen Sie die ACT Rules Library der W3C auf GitHub.