Was in einer Tabelle steckt

veröffentlicht in

Elemente für Datentabellen

In Tabellen werden die Struktur und die Beziehungen zwischen Tabellenzellen durch die visuelle Darstellung vermittelt. Kopfzellen sind oft fett und zentriert formatiert und werden meist oben oder links in der Tabelle angeordnet. Am Bildschirm reicht ein kurzer Blick nach oben oder nach links, um die Beschriftung einer Datenzelle zu erkennen. Solche visuellen Strukturen und Beziehungen müssen nach Erfolgskriterium 1.3.1 der Web Content Accessibility Guidelines (WCAG) 2.2 durch Software wie Assistenztechnologien bestimmt werden können.

Kopfzellen und Datenzellen

Damit Tabellen auch mit Screenreadern genutzt werden können, muss zunächst zwischen Kopfzellen und Datenzellen unterschieden werden. Die Anforderungen an Tabellen gehen aber darüber hinaus und können auch die explizite Verknüpfung von Datenzellen mit ihren Kopfzellen durch spezielle Attribute umfassen.

Nach dem HTML-Standard ist für Kopfzellen das th-Element vorgesehen. Für Datenzellen einer Tabelle ist das td-Element einzusetzen. Das einfachste mögliche Beispiel für eine Datentabelle sieht wie folgt aus:

<table>
  <tr>
    <th> … </th>
    <th> … </th>
  </tr>
  <tr>
    <td> … </td>
    <td> … </td>
  </tr>
</table>

Bei sehr einfachen Tabellen (wie im vorherigen Beispiel) werden Browser die korrekten Rollen für die einzelnen Zellen im Accessibility-Tree ablegen. Je komplexer die Beziehungen zwischen Kopfzellen und Datenzellen werden, desto schwieriger ist es, sich auf Browser oder Assistenztechnologien zu verlassen, die korrekten Beziehungen abzubilden. In der Praxis kann immer wieder festgestellt werden, dass Tabellen in Screenreadern fehlerhaft aufgebaut sind. HTML bietet für solche Situationen die headers- und scope-Attribute, damit Autoren die Beziehungen zwischen Zellen explizit angeben können. Wenn Kopfzellen und Datenzellen mit Attributen verknüpft werden müssen, handelt es sich um komplexe Tabellen.

Die Unterscheidung zwischen Kopfzellen und Datenzellen muss nicht nur für Datentabellen, also Inhalte, die in zwei Dimensionen strukturiert werden, vorgenommen werden. Oft werden interaktive Tabellen (Grids) eingesetzt, die beispielsweise eine Sortierbarkeit oder Bearbeitung durch Nutzende erlauben. Auch für diese Inhaltsformen gelten die gleichen Grundregeln für die Struktur und die Beziehungen zwischen Zellen.

Übersicht der Tabellenelemente

Für den Aufbau einer Tabelle mit HTML benötigen Sie folgende Elemente:

Folgende Elemente werden ebenfalls für Tabellen benötigt, aber ihr Einsatz ist optional:

Reihenfolge der Tabellenelemente

Innerhalb eines table-Elements dürfen die Elemente nur in folgender Reihenfolge vorkommen:

  1. ein optionales caption-Element
  2. null oder mehr optionale colgroup-Elemente
  3. ein optionales thead-Element, wobei ein thead-Element tr-Elemente enthält
  4. eines der folgenden:
    • null oder mehr tbody-Elemente, wobei tbody-Elemente tr-Elemente enthalten, oder
    • ein oder mehrere tr-Elemente
  5. ein optionales tfoot-Element, wobei ein tfoot-Element tr-Elemente enthält

Rollen für das table-Element

Ein table-Element erhält die Rolle "table" und ist für tabellarische Container vorgesehen, die nicht interaktiv sind. Wenn die Tabelle Auswahlmöglichkeiten bietet, eine eigene zweidimensionale Navigation bereitstellt oder es Nutzenden ermöglicht, den Inhalt oder dessen Anordnung zu verändern, müssen Autoren die Rolle "grid" oder "treegrid" dem table-Element zuweisen (zum Beispiel <table role="grid"> … </table>).

Sollte ein table-Element zu Layoutzwecken eingesetzt und nicht für tabellarische Daten genutzt werden, kann die Rolle "table" auch entfernt werden. Siehe dazu Layout-Tabellen sind wie Briefe in Excel.