HTML Table Accessibility
Jede Zahl behält ihre Überschrift
Kopfzeile, Kopfspalte, headers-Verweise: drei Stellen in einer Datentabelle.
Bezüge sichtbar machen
Eine Datenzelle braucht Koordinaten
Eine Zahl allein sagt wenig. Gute Tabellen verknüpfen sie im HTML mit Zeile, Spalte und – falls vorhanden – ihrer Spaltengruppe.
scope="colgroup"scope="row"scope="col"- Zeile205/55 R16
- GruppeWinter
- SpaltePreis
- Wert89 Euro
Vorleseprogramme können diese Bezüge beim Navigieren nennen. Wortlaut und Reihenfolge hängen vom Programm und seinen Einstellungen ab.
Der Titel gehört in die Tabelle
<caption> steht direkt nach dem öffnenden <table> und benennt Zweck oder Inhalt. Er ersetzt keine Kopfzellen.
<caption>Reifenpreise nach Saison</caption>Drei Muster
Nehmen Sie die kleinste passende Beziehung
Eine Zeile, eine Spalte
Direkte Köpfe erhalten scope="row" oder scope="col".
Ein Kopf überspannt Spalten
Definieren Sie die Spalten mit <colgroup> und setzen Sie am überspannenden Kopf scope="colgroup".
Bezüge verlaufen nicht geradlinig
Erst bei komplexen, nicht rein horizontalen oder vertikalen Beziehungen ordnen id und headers jeden Kopf ausdrücklich zu.
Saubere Standardlösung
Zweistufiger Kopf mit colgroup
Die Gruppen „Sommer“ und „Winter“ überspannen je zwei Spalten. Ihre scope="colgroup"-Köpfe passen zu den zwei gleich großen <colgroup>-Elementen.
<table>
<caption>Reifenpreise nach Saison</caption>
<colgroup><col></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th rowspan="2" scope="col">Größe</th>
<th colspan="2" scope="colgroup">Sommer</th>
<th colspan="2" scope="colgroup">Winter</th>
</tr>
<tr>
<th scope="col">Preis</th>
<th scope="col">Lager</th>
<th scope="col">Preis</th>
<th scope="col">Lager</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">205/55 R16</th>
<td>79 €</td><td>14</td>
<td>89 €</td><td>6</td>
</tr>
</tbody>
</table>Komplexe Ausnahme
Mit headers wird die Beziehung zur ID-Liste
Eine Datenzelle nennt die IDs aller zugehörigen Köpfe, durch Leerzeichen getrennt. Jede ID muss im Dokument eindeutig sein. Die Reihenfolge der Werte in headers hat laut HTML-Spezifikation keine Bedeutung.
<th id="reifen-r16">205/55 R16</th>
<th id="winter">Winter</th>
<th id="winter-preis" headers="winter">Preis</th>
<td headers="reifen-r16 winter winter-preis">
89 €
</td>Prüfspur
Vier Fragen pro Tabelle
- Datentabelle?Für Seitenlayout verwenden Sie CSS, keine Tabelle.
- Titel vorhanden?Der
caption-Text beschreibt genau diese Tabelle. - Köpfe markiert?Zeilen- und Spaltenköpfe sind
th, nicht fett gesetztetd. - Bezüge geprüft?Testen Sie mehrere Rand- und Innenzellen mit Vorleseprogramm und Tastatur.
Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Die Kopfzeile besteht aus normalen Zellen Regel td-has-header
Eine fett gestaltete erste Zeile aus td gibt keiner Zahl ihren Bezug. th mit scope="col" und scope="row" stellt ihn her.
Prüfen Eine Spalte ohne Werte Regel th-has-data-cells
Ein Kopf ohne zugehörige Datenzellen lässt offen, ob Daten fehlen. Prüfen Sie die Quelle, bevor Sie den Kopf entfernen.
Kritisch Ein headers-Verweis ins Leere Regel td-headers-attr
Zeigt headers auf eine id, die es nicht gibt, bleibt der Bezug offen. Kopfzelle und Datenzelle brauchen denselben Wert.
Zum Mitnehmen
Die Tabelle, korrigiert
Kopfzellen auszeichnen, Verweise geradeziehen.
Korrektur in 2 Schritten ansehen
Kopfzeile und Kopfspalte auszeichnen
Die erste Zeile wird zu th mit scope="col", die Rubrikspalte zu th mit scope="row". Die Zahlen bleiben Datenzellen.
KorrekturvergleichSchritt 1 · HTML Vorher
<tr> <td>Reifen</td><td>Größe</td><td>Preis</td> </tr> <tr> <td>Winterreifen</td><td>205/55 R16</td><td>89 Euro</td> </tr>Nachher
<tr> <th scope="col">Reifen</th> <th scope="col">Größe</th> <th scope="col">Preis</th> </tr> <tr> <th scope="row">Winterreifen</th> <td>205/55 R16</td><td>89 Euro</td> </tr>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie eine Zelle vorlesen. Die Ausgabe nennt Spalte, Zeile und dann den Wert.
Den headers-Verweis richtigstellen
Der Wert in headers muss der id der Kopfzelle entsprechen. Sonst bleibt der Bezug leer, obwohl die Spalte optisch passt.
KorrekturvergleichSchritt 2 · HTML Vorher
<th id="preis-kopf">Preis</th> <!-- Datenzelle in der Zeile Winterreifen --> <td headers="preis">89 Euro</td>Nachher
<th id="preis-kopf">Preis</th> <!-- Datenzelle in der Zeile Winterreifen --> <td headers="preis-kopf">89 Euro</td>Markierte Zeilen wurden geändert
So prüfen Sie es Vergleichen Sie beide Werte im Quelltext. id und headers stimmen Zeichen für Zeichen überein.