BITV Reloaded – Anforderung 5

Bedingung 5.1: Tabellen mit Überschriften (Prio. 1)

»In Tabellen, die tabellarische Daten darstellen, sind die Zeilen- und Spaltenüberschriften mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.«

  • BIENE
  • WCAG 1
  • WCAG 2

Was heißt das?

Es gilt zu bewerten, ob eine gegebene Datentabelle Zeilen- und Spaltenüberschriften tatsächlich benötigt. Wenn Ihre Seiten echte tabellarische Daten enthalten (also z. B. Wetterdaten, Börsenkurse oder Preislisten), ist es wahrscheinlich, dass es zu den verschiedenen Zeilen und Spalten auch die entsprechenden Zeilen- und Spaltenköpfe mit Überschriften für die jeweiligen Datenzellen gibt. Ist dies der Fall, dann sollten diese nicht als einfache Zellen (TD), sondern mit den hierfür in HTML vorgesehenen Überschriftenelementen (TH und dem dazugehörigen THEAD, optional auch TFOOT) ausgezeichnet sein.

Beispiele:

Im Rahmen unserer Artikelserie zur BITV haben wir eine Tabelle mit einer beispielhaften Übersicht der Verantwortlichkeiten zur Umsetzung der Verordnung erstellt. Darin sind die einzelnen Punkte der BITV aufgelistet bzw. kurz beschrieben und ob die jeweilige Bedingung eher in den Verantwortungsbereich von Konzeptern, Designern, Technikern oder Redakteuren fällt:

Screenshot: Spaltenüberschriften der Beispieltabelle mit CSS

In dieser Tabelle dient die erste Zeile eindeutig als Spaltenüberschrift für die darunter stehenden Datenzellen, folgerichtig sind sie mit th> ausgezeichnet.

Wie können Sie das testen?

Diese Bedingung ist relativ einfach zu testen, da die gängigen grafischen Browser bei der Betrachtung von reinem HTML die Zeilen- und Spaltenüberschriften (TH) anders darstellen als normale Tabellenzellen. Diese sind einfach zu identifizieren, indem Sie das Laden der Style Sheets unterbinden und sich auf das Browser-eigene Style Sheet verlassen. Am einfachsten geht dies mit einer der bekannten Toolbars; in der Web Developer Extension finden Sie den entsprechenden Befehl unter ›CSS‹ → ›Disable Styles‹ → ›All Styles‹. Die Tabelle sollte dann in etwa wie im folgenden Screenshot aussehen. Zu erkennen ist, dass hier die Spaltenüberschriften fett und zentriert dargestellt werden – diese sind also korrekt ausgezeichnet:

Screenshot: Spaltenüberschriften der Beispieltabelle ohne CSS