WCAG 2.0, 1.3.1 d, A

Info und Beziehungen: Daten-Tabellen

  • WCAG: 2.0
  • Stufe: A
  • Thema: Semantik

Tabellarische Daten müssen als solche ausgezeichnet werden, inkl. Zeilen-/Spaltentitel sowie ggf. Beschriftung und Zusammenfassung. Dies ermöglicht assistierenden Technologien (z.B. Screenreadern), die einzelnen Elemente miteinander in Bezug zu setzen, die Daten sinnvoll anzukündigen sowie Navigation darin anzubieten.

Verstehen

Für die Beschriftung von Zeilen- und Spaltentiteln wird das <th>-Element eingesetzt; andere Formatierungen (wie etwa das <strong>-Element) reichen nicht. Es müssen zumindest Spalten- oder Zeilenüberschriften vorhanden sein, wenn möglich aber beides.

Komplexe semantische Strukturen innerhalb von Tabellen (etwa Überschriften <h1> bis <h6>) sowie Layouttabellen generell sind zu vermeiden; leere Zeilen oder Spalten ebenfalls.

Umfangreiche oder komplexe Datentabellen sollen über ein <caption>-Element beschriftet werden. Weitere Attribute wie headers, scope, colspan und rowspan sollten mit Bedacht eingesetzt werden, da sie das Browsen mit Screenreadern erschweren können.

Empfehlung: Setzen Sie Tabellen ausschliesslich für die Präsentation von Daten ein und nicht aus Layoutgründen (z.B. um Inhalte anders zu arrangieren).

Verantwortlichkeiten

  • Das Entwicklungsteam versieht die Seitenbereiche und Funktionalitäten mit Tabellen. Es schafft zudem die notwendigen technischen Voraussetzungen für die Inhaltserstellung, etwa die Möglichkeit zum Definieren von Spalten
  • und Zeilentiteln innerhalb von Tabellen in einem WYSIWYG-Editor.
  • Die Inhaltsverantwortlichen formatieren Tabellen korrekt.

WCAG-Text

Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Code-Beispiel

<!-- Tabelle mit Zeilen- und Spaltentiteln -->
<table summary="Übersicht über einige der schönstens Städte der Schweiz">
  <caption>Drei Städte im Vergleich</caption>
  <tr>
    <th>Stadt</th>       <!-- Spaltentitel -->
    <th>Postleitzahl</th><!-- Spaltentitel -->
    <th>Sprache</th>     <!-- Spaltentitel -->
  </tr>
  <tr>
    <th>Zürich</th><!-- Zeilentitel -->
    <td>8000</td>
    <td>Deutsch</td>
  </tr>
  <tr>
    <th>Genf</th><!-- Zeilentitel -->
    <td>1200</td>
    <td>Deutsch</td>
  </tr>
  <!-- Weitere Zeilen... -->
</table>

<!-- Visuell leere Zellen -->
<table>
  <tr>
    <th>Name</th>
    <th>Wohnort</th>
  </tr>
  <tr>
    <th>Hans Muster</th>
    <td>Grünwil</td>
  </tr>
  <tr>
    <th>Maria Bernasconi</th>
    <td>
      <!-- Visuell versteckter Text (für CSS siehe <a href="/de/1.3.1a">1.3.1a</a>) -->
      <span class="visually-hidden">Keine Angabe</span>
    </td>
  </tr>
  <!-- Weitere Zeilen... -->
</table>