WCAG 1.3.1: Info und Beziehungen von Tabellenzellen
Zurück zu allen WCAG-KriterienÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Schnell
Wichtig für Rolle:
Entwicklung
Worum geht's?
Komplexe Tabellen müssen zusätzlich zu <th> für Header und <td> für Inhalte noch mit dem scope-Attribut ausgezeichnet sein, um die Zusammenhänge klarzumachen.
Umsetzung
Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.
Verknüpfe Tabellen-Header richtig mit den Inhalten
Wenn eine Tabelle zwei Header hat (links und oben), dann muss das
scope-Attribut eingesetzt werden, um Tabellen-Header mit Datenzellen zu verbinden.Scopezeigt an, ob die Zelle eine Kopfzeile für eine Zeile (row), eine Spalte (col) oder Gruppe von Zeilen (rowgroup), oder Spalten (colgroup) ist.Bei komplexeren Tabellen mit mehreren Zwischenheadern brauchen die
<th>-Tags auch eine ID, um sie mit den einzelnen Tabellenzellen zu verknüpfen.Sehr gute Beispiele für das Implementieren von barrierefreien Tabellen findet man auf der Seite des W3C:
DAs Accessbility-Center
Teste selbstständig auf digitale Barrierefreiheit!
Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!
- Alle Prüfschritte leicht erklärt
- Teile und exportiere Prüfberichte
- Teste direkt auf der Live-Webseite!
