HTML-Kurs / Zugängliche Tabellen: caption, scope und verbundene Zellen

Eine lesbare Datentabelle identifiziert ihr Thema und gibt an, welche Zeilen- und Spaltenüberschriften für jeden Wert gelten. Verwenden Sie caption und th, fügen Sie scope hinzu, wenn dies hilfreich ist, und verbinden Sie Zellen nur dann, wenn die resultierenden Beziehungen verständlich bleiben.

Benennen Sie die Tabelle mit caption

caption beschreibt die Tabelle insgesamt und muss das erste Kindelement von table sein. Es unterscheidet sich von einer angrenzenden Absatzüberschrift dadurch, dass es Teil der Tabelle ist. Wenn ein Zeitraum oder eine Messmethode erforderlich ist, um die Zahlen zu interpretieren, geben Sie diese in der Tabellenbeschriftung oder im angrenzenden Text an. Die Tabellenbeschriftung führt die Tabelle ein; die einzelnen Namen von Zeilen und Spalten bleiben in den Kopfzellen.

Verknüpfen Sie die Daten mit den Überschriften über das scope-Attribut

Verwenden Sie scope="col" für Spaltenüberschriften und scope="row" für Zeilenüberschriften. In diesem Beispiel beträgt der Wert, der Montag und Vormittag entspricht, drei Besucher.

<table>
  <caption>Besucher pro Tag und Tageszeit</caption>
  <thead>
    <tr>
      <th scope="col">Tag</th>
      <th scope="col">Vormittag</th>
      <th scope="col">Nachmittag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Montag</th>
      <td>3 Besucher</td>
      <td>5 Besucher</td>
    </tr>
    <tr>
      <th scope="row">Dienstag</th>
      <td>4 Besucher</td>
      <td>6 Besucher</td>
    </tr>
  </tbody>
</table>

scope beschreibt die Ausrichtung der Beziehung einer Kopfzelle zu den Daten; es ist keine visuelle Stilregel. In einer einfachen Tabelle kann die Beziehung ohne dies offensichtlich sein, aber eine explizite Auszeichnung erleichtert die Überprüfung der Absicht. Das W3C WAI-Tutorial zu Tabellen erläutert weitere Muster.

Zellen nur dann zusammenführen, wenn die Daten dies erfordern

colspan="2" deckt zwei Spalten ab; rowspan="2" deckt zwei Zeilen ab. Das folgende Beispiel gruppiert Vormittag und Nachmittag unter einer gemeinsamen Überschrift. colgroup definiert diese beiden Spalten, damit scope="colgroup" ein klares Ziel hat. Für die darunterliegenden Zeilen und Zellen siehe Grundlagen von Tabellen: table, tr, th und td.

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Tag</th>
    <th scope="colgroup" colspan="2">Besucher</th>
  </tr>
  <tr>
    <th scope="col">Vormittag</th>
    <th scope="col">Nachmittag</th>
  </tr>
  <tr>
    <th scope="row">Montag</th>
    <td>3 Besucher</td>
    <td>5 Besucher</td>
  </tr>
</table>

Das Ergebnis enthält eine Spaltengruppe für Tag und eine Gruppe von zwei Spalten für Vormittag/Nachmittag. Die erste Spalte ist ebenfalls in einer expliziten colgroup, sodass ihre Struktur lesbar ist, ohne sich auf die Regeln zum Weglassen von Tags verlassen zu müssen.

Fügen Sie keine zusammengeführten Zellen einfach hinzu, um eine einfache Tabelle zu dekorieren. Wenn die Leser raten müssen, zu welcher Kopfzelle eine Zahl gehört, vereinfachen Sie die Tabelle oder teilen Sie sie in kleinere Tabellen auf. Der W3C-WAI-Leitfaden zu den unregelmäßigen Tabellenköpfen gibt komplexere Beispiele.

Testen Sie die Beziehungen

Wählen Sie einen beliebigen Tabellenwert aus und fragen Sie: „Welcher Tag und welche Tageszeit wird dadurch angezeigt?“ Überprüfen Sie die Antwort, ohne sich ausschließlich auf Farbe oder Position zu verlassen. Testen Sie schmale Bildschirme auf abgeschnittene Inhalte und versuchen Sie bei komplex zusammengeführten Tabellen auch einen Screenreader. Tabellen sollten Daten darstellen und nicht für Layout oder Eingabeformulare verwendet werden. Kombinieren Sie die Überprüfung der Tabellen mit den Prinzipien des manuellen Testens in Grundlagen der Barrierefreiheit: Überschriften, Links, Bilder und Tastatur.