BITV Reloaded – Anforderung 5
Bedingung 5.2: Zuordnung von Zellen zu Überschriften (Prio. 1)
»Soweit Tabellen, die tabellarische Daten darstellen, zwei oder mehr Ebenen von Zeilen- und Spaltenüberschriften aufweisen, sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache Datenzellen und Überschriftenzellen einander zuzuordnen.«
Was heißt das?
Die in Bedingung 5.1 besprochenen Zeilen- und Spaltenüberschriften sollten mit den Datenzellen, denen Sie als Überschriften dienen, programmatisch verküpft sein. Dies erleichtert die Orientierung in nicht-visuellen Ausgabemedien, indem es Zusammenhänge herstellt, die für sehende Nutzer offensichtlich sind und ist somit für die Nutzer vieler Hilfsmittel von essentieller Bedeutung. Dies gilt insbesondere für komplexe Tabellen mit mehreren Ebenen von Überschriften, wo eine Zuordnung ohne die hier eingeforderten Attribute nicht möglich ist.
Diese Bedingung ist anzuwenden, sobald Datentabellen zwei oder mehr TH
-Elemente innerhalb einer Zeile TR
aufweisen, wenn zwei oder mehr TR
-Elemente mindestens eine TH
enthalten oder wenn eine TH für mehrere Spalten oder Zeilen gilt (rowspan="2"
oder colspan="2"
)
HTML kennt hierfür mehrere Formen der Verknüpfung mittels Elementen und Attributen, die auch miteinander kombiniert werden können:
- Die nötigen Elemente sind die in 5.1 bereits erwähnten
THEAD
,TFOOT
undTBODY
zur Gruppierung von Zellen, undCOL
bzw.COLGROUP
zur Gruppierung von Spalten. - Die nötigen Attribute der Tabellen-Elemente sind
scope
undheaders
bzw.id
, mit denen man Zusammenhänge zwischen Daten festlegen kann. - In komplexen Tabellen kann der Einsatz des
axis
-Attribut durchaus sinnvoll sein, um weitergehende Verknüpfungen herzustellen. Dabei ist zu beachten, dass Zellen mitaxis
-Attribut gemäß dem HTML-Standard wie Überschriftenzellen behandelt werden (was übrigens aktuelle Screenreader wie JAWS tatsächlich auch so handhaben).
Erst wenn die Daten mit ihren jeweiligen Überschriften programmatisch verknüpft sind lassen sie sich per Skript manipulieren und zum Beispiel dynamisch umsortieren oder filtern, ohne dass hierfür die Seite oder Anwendung komplett neu geladen werden muss.
Ob Sie nun das relativ einfach zu deklarierende scope
oder die wesentlich aufwändigere Methode mit headers
und id
benutzen hängt vom gewünschten Einsatzzweck und der Art der Datentabelle ab – funktional sind beide Methoden gleichwertig. Wenn alle zusammengehörigen Datenzellen in einer Reihe oder Spalte stehen, dann genügt es, in der Überschrift die Verknüpfung per scope="col"
oder scope="row"
herzustellen. Wenn die Datenzellen an beliebiger Stelle in der Tabelle stehen oder die Datenzellen sich auf mehrere Überschriftenzellen beziehen, dann müssen Sie auf die Verknüpfung per headers
und id
ausweichen. Beide Methoden schliessen einander nicht aus und können auch gemeinsam in einer Datentabelle benutzt werden.
Beispiele:
In der folgenden Beispieltabelle zeigt einen Ausschnitt aus der BITV in tabellarischer Form. Es gibt mehrere Ebenen von Überschriften (TH
): zum einen in der ersten Zeile die Überschriften der darunter angeordneten Spalten, zum anderen in der linken Spalte die Überschriften der jeweils zu einer Anforderung gehörenden Bedingungen.
Anforderung | Bed. | Prio. | Prüfschritt | ›until user agents‹ |
---|---|---|---|---|
Alternativen | 1. 1. | 1 | Alternativtexte für Bedienelemente, Grafiken und Bilder, Layoutgrafiken, Objekte | Nein |
1. 2. | 1 | Textlinks für serverseitige Imagemaps | Nein | |
1. 3. | 1 | Audiodeskription für Multimedia | Ja | |
1. 4. | 1 | Untertitel für Multimedia | Nein | |
1. 5 | 2 | Textlinks für cllientseitige Imagemaps | Ja | |
Farben | 2. 1. | 1 | Auch ohne Farbe nutzbar | Nein |
2. 2. | 1 | Grafiken vor wechselndem Hintergrund erkennbar, Kontraste von Grafiken ausreichend | Nein | |
2. 3 | 2 | Wahrnehmung mit Farbfehlsichtigkeiten | Nein |
Zur besseren Übersicht finden Sie hier eine separate Datei mit dem Quelltext dieser Tabelle: beispieltabelle.html.
Wie können Sie das testen?
Die Web Developer Toolbar bietet im Menü Information den Befehl ›Display Table Information‹. Mit dieser werden die im obigen Beispiel angeführten Attribute und Elemente unmittelbar im Kontext dargestellt, sodaß Sie die korrekten Verknüpfungen visuell überprüfen können: