Was in einer Tabelle steckt 
veröffentlicht in
Techniken für Tabellenbeschreibungen
Wenn komplexe Datentabellen eingesetzt werden, muss der grundlegende Aufbau der Zellen beschrieben werden. Solche erläuternde Informationen sind besonders für Nutzende von Screenreadern nützlich, die die visuelle Anordnung in der Tabelle nicht gut erfassen könnten.
Hintergrund für diese Anforderung ist die andauernde unterschiedliche Unterstützung der Barrierefreiheit in Tabellen durch Browser und Assistenztechnologien. Wenn komplexe Tabellen eingesetzt werden, müssen die Beziehungen zwischen den Zellen mit headers- und/oder scope-Attributen abgebildet werden. Auch bei korrekter Verknüpfung der Zellen kann es aber immer noch Probleme bei der Nutzung in Screenreadern geben. Daher müssen Sie nach dem HTML-Standard eine Beschreibung der komplexen Tabelle bereitstellen.
Die Beschreibungstexte sollten:
- den Zweck der Tabelle angeben,
- den grundlegenden Aufbau der Zellen beschreiben,
- etwaige Muster oder Entwicklungen skizzieren und
- allgemein die Nutzung der Tabelle vermitteln.
Die Beschreibung kann im Kontext der Tabelle stehen oder aber auch mit den figcaption- oder caption-Elementen mit der Tabelle in Beziehung gesetzt werden. Die Verknüpfung einer Beschreibung ist auch mit dem aria-describedby- oder aria-description-Attributen möglich. Das in früheren Spezifikationen von HTML vorgesehene summary-Attribut für das table-Element ist hingegen nicht mehr erlaubt.
Das figcaption-Element für Tabellenbeschreibungen
Ein Beschreibungstext für eine Tabelle kann mit einem figure-Element zusammen mit der Tabelle dargestellt werden. Wenn die Tabelle zusammen mit einem figcaption-Element in einem figure-Element steht, dann bringen Sie den Titel der Tabelle zusammen mit der Beschreibung bevorzugt im figcaption-Element unter und verzichten auf das caption-Element für die Tabelle:
Ausmisten / Entrümpeln
Die Tabelle besteht aus drei Spalten. Es gibt zwei Reihen an Kopfzellen gefolgt von einer Reihe mit Datenzellen. Die linke Kopfzelle lautet "Auf den Flohmarkt verkaufen" und überspannt zwei Reihen. Für die zweite und dritte Spalte gibt es jeweils zwei Kopfzellen: Eine gemeinsame Kopfzelle "verschenken", die beide Spalten überspannt, sowie zwei einzelne Kopfzellen "Schule" und "Second Hand Shop" für die zweite und dritte Spalte in der zweiten Reihe.
| auf dem Flohmarkt verkaufen | Verschenken | |
|---|---|---|
| Schule | Second Hand Shop | |
| Schallplatten | Bücher | Klamotten |
Die Beschriftung eines figure-Elements darf im Übrigen länger sein und darf beispielsweise strukturierende oder aktive Elemente enthalten.
Das caption-Element für erweiterbare Beschreibungen
Die Beschreibung einer Tabelle kann in einem caption-Element der Tabelle stehen:
| auf dem Flohmarkt verkaufen | Verschenken | |
|---|---|---|
| Schule | Second Hand Shop | |
| Schallplatten | Bücher | Klamotten |
Der Text im caption-Element wird normalerweise zum Namen der Tabelle. Wenn die Tabellen einer Webseite in einem Screenreader aufgelistet werden, werden die Tabellen anhand ihrer Namen identifiziert. Da ein Name nur aus Text besteht und keine Strukturen enthält, können längere Namen (zum Beispiel mit einer Beschreibung der Tabelle) schwer zu verstehen sein.
Im caption-Element dürfen neben dem Titel der Tabelle weitere strukturierende und aktive Elemente vorkommen, zum Beispiel:
| auf dem Flohmarkt verkaufen | Verschenken | |
|---|---|---|
| Schule | Second Hand Shop | |
| Schallplatten | Bücher | Klamotten |
Der Name der erweiternden Schaltfläche („Beschreibung der Tabelle“) wird Teil des Namens der Tabelle. Die Tabelle erhält mit dieser Technik den Namen "Ausmisten/Entrümpeln Beschreibung der Tabelle".
Die Namen von Tabellen können mit dem aria-labelledby- oder aria-label-Attributen ebenfalls bestimmt werden. Ein caption-Element wird dann nicht zum Namen der Tabelle, sondern zur Beschreibung der Tabelle. Weitere Informationen dazu finden Sie in Tabellen benötigen einen Namen.
Das aria-describedby-Attribut für kurze Beschreibungen
Mit dem aria-describedby-Attribut können ein oder mehrere andere Elemente mit passenden id-Attributen verknüpft und zur Beschreibung einer Tabelle werden. Jedes Element mit einem eindeutigen ID-Attribut kann auf diese Weise als Beschreibung für eine Tabelle verwendet werden.
Die Beschreibung einer komplexen Tabelle steht idealerweise in unmittelbarer Nähe der Tabelle. Sie kann aber auch an beliebiger anderer Stelle der Seite stehen. Wenn mit einem Screenreader eine Tabelle erreicht wird, wird der Name gefolgt von der Beschreibung der Tabelle ausgegeben. Im folgenden Beispiel wird der Name durch das caption-Element und die Beschreibung durch das aria-describedby-Attribut festgelegt:
<table aria-describedby="beschreibung-ausmisten">
<caption>Ausmisten / Entrümpeln</caption>
<thead>
<tr>
<th id="aktion-verkaufen" rowspan="2">auf dem Flohmarkt verkaufen</th>
<th id="aktion-verschenken" colspan="2">Verschenken</th>
</tr>
<tr>
<th id="aktion-verschenken-schule" headers="aktion-verschenken">Schule</th>
<th id="aktion-verschenken-shop" headers="aktion-verschenken">Second Hand Shop</th>
</tr>
</thead>
<tr>
<td headers="aktion-verkaufen">Schallplatten</td>
<td headers="aktion-verschenken aktion-verschenken-schule">Bücher</td>
<td headers="aktion-verschenken aktion-verschenken-shop">Klamotten</td>
</tr>
</table>
<p>… weitere Inhalte …</p>
<hr aria-label="Screenreader-Hilfen">
<div id="beschreibung-ausmisten">
<p>Die Tabelle besteht aus drei Spalten. Es gibt zwei Reihen an Kopfzellen gefolgt von einer Reihe mit Datenzellen. Die linke Kopfzelle lautet "Auf den Flohmarkt verkaufen" und überspannt zwei Reihen. Für die zweite und dritte Spalte gibt es jeweils zwei Kopfzellen: Eine gemeinsame Kopfzelle "verschenken", die beide Spalten überspannt, sowie zwei einzelne Kopfzellen "Schule" und "Second Hand Shop" für die zweite und dritte Spalte in der zweiten Reihe.</p>
</div>
Die Beschreibung eines Elements besteht wie der Name aus reinem Text. Daher ist die Technik mit dem aria-describedby-Attribut nur für kürzere Beschreibungen, die nicht länger als 1-2 Sätze sind, geeignet.
Das aria-description-Attribut
Mit dem aria-description-Attribut können sie einer Tabelle eine Beschreibung geben. Diese Beschreibung ist nur für Screenreader zugänglich:
<table aria-description="Die Tabelle besteht aus drei Spalten. Es gibt zwei Reihen an Kopfzellen gefolgt von einer Reihe mit Datenzellen. Die linke Kopfzelle lautet 'Auf den Flohmarkt verkaufen' und überspannt zwei Reihen. Für die zweite und dritte Spalte gibt es jeweils zwei Kopfzellen: Eine gemeinsame Kopfzelle 'verschenken', die beide Spalten überspannt, sowie zwei einzelne Kopfzellen 'Schule' und 'Second Hand Shop' für die zweite und dritte Spalte in der zweiten Reihe.">
… Rest der Tabelle …
</table>
Auch die Technik mit dem aria-description-Attribut ist nur für kürzere Beschreibungen, die nicht länger als 1-2 Sätze sind, geeignet.
Das summary-Attribut
Ein summary-Attribut für ein table-Element ist nach dem HTML-Standard obsolet:
<!--nicht nachahmen-->
<table summary="Beschreibungstext">
…
</table>
Das summary-Attribut darf heute nicht mehr eingesetzt werden, auch nicht um eine Datentabelle zu beschreiben. Verwenden Sie statt dessen das aria-description-Attribut.