Accessible Table
Was Ihre Tabelle Zelle für Zelle sagt
Kopfzellen, Bezüge, Überschrift: ohne sie ist jede Zelle nur eine Zahl.
Eine Zelle, zwei Bezüge
Machen Sie den Kopfbezug sichtbar
Die Zahl 8 wird erst durch ihren Zeilen- und Spaltenkopf verständlich.
| Workshop | Termin | Format | Freie Plätze |
|---|---|---|---|
| Keramik am Abend | 8. Oktober | Studio | 12 |
| Holzschnitt | 15. Oktober | Werkstatt | 8 |
| Fotolabor | 22. Oktober | Labor | 5 |
| Freie Plätze insgesamt | 25 | ||
Auf schmalen Bildschirmen lässt sich nur die Tabelle horizontal verschieben.
<th scope="row"><th scope="col"><td>8</td>Was im Markup die Arbeit leistet
caption benennt die Tabelle. th kennzeichnet Kopfzellen; scope="row" und scope="col" legen deren Richtung fest. Assistive Technik kann so beim Navigieren den passenden Kontext zur Datenzelle liefern.
Was die Darstellung nicht versprechen darf
Die genaue Ansage hängt von Vorleseprogramm, Browser und Einstellungen ab. Prüfen Sie deshalb die Beziehung, nicht einen auswendig gelernten Satz. Für mehrstufige Köpfe brauchen Sie je nach Struktur colgroup, rowgroup oder explizite headers-Bezüge.
Kopierbares Grundmuster
Das vollständige HTML
Für eine einfache Tabelle mit je einem Zeilen- und Spaltenkopf.
<div class="table-scroll" role="region" tabindex="0"
aria-labelledby="workshopplan-title">
<table>
<caption id="workshopplan-title">
Workshopplan · Oktober 2026
</caption>
<thead>
<tr>
<th scope="col">Workshop</th>
<th scope="col">Termin</th>
<th scope="col">Format</th>
<th scope="col">Freie Plätze</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Keramik am Abend</th>
<td>8. Oktober</td>
<td>Studio</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Holzschnitt</th>
<td>15. Oktober</td>
<td>Werkstatt</td>
<td>8</td>
</tr>
<tr>
<th scope="row">Fotolabor</th>
<td>22. Oktober</td>
<td>Labor</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="3">
Freie Plätze insgesamt
</th>
<td>25</td>
</tr>
</tfoot>
</table>
</div>Der schmale, tastaturbedienbare Rahmen
.table-scroll {
max-width: 100%;
overflow-x: auto;
border: 1px solid currentColor;
}
.table-scroll:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
table {
width: 100%;
min-width: 42rem;
border-collapse: collapse;
}
th,
td {
padding: 0.75rem;
border-bottom: 1px solid currentColor;
text-align: left;
}So prüfen Sie die Beziehung
VisuellVerkleinern Sie auf 320 CSS-Pixel. Nur der Tabellenrahmen darf horizontal scrollen.
TastaturSpringen Sie mit Tab zum Rahmen und verschieben Sie ihn mit den Pfeiltasten.
VorleseprogrammNavigieren Sie auf die 8. Zeilenkopf „Holzschnitt“ und Spaltenkopf „Freie Plätze“ müssen als Kontext verfügbar sein.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Die Zahl hat keine Kopfzelle Regel td-has-header
Alle Zellen sind td. „12“ bleibt „12“. Mit th in Kopfzeile und erster Spalte wird daraus „Töpfern, Plätze, 12“.
Prüfen Eine Kopfzelle ohne Daten Regel th-has-data-cells
Die Spalte „Raum“ hat einen Kopf, aber leere Zellen. Entweder füllen oder die Spalte entfernen.
Kritisch headers zeigt auf eine unbekannte id Regel td-headers-attr
Ein headers-Attribut muss ids von th nennen, die es in der Tabelle gibt. Sonst ist der Bezug leer.
Kritisch Der Titel steht in einer Zeile Regel table-fake-caption
Ein td mit colspan ist keine Überschrift. caption nennt die Tabelle beim Betreten.
Zum Mitnehmen
Die Tabelle, korrigiert
caption, th mit scope, keine leere Spalte.
Korrektur in 2 Schritten ansehen
Überschrift und Kopfzellen auszeichnen
caption nennt die Tabelle, th mit scope sagt, wofür die Zelle Kopf ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<table> <tr><td colspan="4">Kursplan · Frühjahr 2026</td></tr> <tr><td>Kurs</td><td>Beginn</td><td>Ende</td><td>Plätze</td></tr> <tr><td>Töpfern</td><td>18:00</td><td>19:30</td><td>12</td></tr> </table>Nachher
<table> <caption>Kursplan · Frühjahr 2026</caption> <thead> <tr><th scope="col">Kurs</th><th scope="col">Beginn</th> <th scope="col">Ende</th><th scope="col">Plätze</th></tr> </thead> <tbody> <tr><th scope="row">Töpfern</th><td>18:00</td><td>19:30</td><td>12</td></tr> </tbody> </table>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit einem Vorleseprogramm auf die 12. Es sagt „Töpfern, Plätze, 12“.
Leere Spalten und falsche Bezüge entfernen
Eine Kopfzelle ohne Daten verwirrt. Ein headers-Attribut braucht echte ids, sonst weg damit.
KorrekturvergleichSchritt 2 · HTML Vorher
<tr><th scope="col">Plätze</th><th scope="col">Raum</th></tr> <tr><td headers="platz">8</td><td></td></tr>Nachher
<tr><th scope="col">Plätze</th></tr> <tr><td>8</td></tr>Markierte Zeilen wurden geändert
So prüfen Sie es Die Tabelle hat jetzt in jeder Spalte Daten unter jedem Kopf.