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 und TBODY zur Gruppierung von Zellen, und COL bzw. COLGROUP zur Gruppierung von Spalten.
• Die nötigen Attribute der Tabellen-Elemente sind scope und headers 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 mit axis-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.

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: