Was in einer Tabelle steckt 
veröffentlicht in
Komplexe Beziehungen in Datentabellen
Datentabellen können sehr unterschiedlich aufgebaut werden. Grundsätzlich besteht eine Tabelle (table-Element) jedoch aus Reihen (tr-Elementen), und die enthaltenen Zellen (th- und td-Elemente) ergeben ein Rechteck.
Es gibt einfache Tabellen und komplexe Tabellen. Einfache Tabellen sind solche Tabellen mit Kopfzellen ausschließlich in der ersten Tabellenreihe und/oder Kopfzellen in der ersten Spalte. Sobald die Kopfzellen anders angeordnet werden, handelt es sich um eine komplexe Tabelle. Die Komplexität ergibt sich durch die uneindeutigen Beziehungen zwischen Kopfzellen und Datenzellen.
Beziehungen zwischen Kopfzellen und Datenzellen müssen nach Erfolgskriterium 1.3.1 der Web Content Accessibility Guidelines (WCAG) 2.2 durch Software wie Assistenztechnologien bestimmt werden können. Autoren müssen in komplexen Tabellen die Beziehungen zwischen Kopfzellen und Datenzellen explizit angeben. Dadurch können Browser und somit auch Screenreader die korrekten Kopfzellen für einzelne Datenzellen ermitteln.
Merkmale komplexer Tabellen
Komplexe Tabellen entstehen typischerweise dann, wenn
Kopfzellen oder Datenzellen mit
colspan- beziehungsweiserowspan-Attributen über mehr als eine Spalte beziehungsweise mehr als eine Tabellenreihe „gestreckt" werden,
mehr als eine Reihe und/oder mehr als eine Spalte einer Tabelle aus Kopfzellen bestehen,
Kopfzellen nicht in der ersten Reihe oder in der ersten Spalte stehen
oder
die Kopfzellen in einer Spalte selbst eine Hierarchie abbilden.
Umgang mit komplexen Tabellen
Der Aufbau von barrierefreien komplexen Tabellen ist nicht trivial. Vor allem gibt es zahlreiche Gestaltungsmöglichkeiten für komplexe Tabellen. Nicht alle komplexe Datentabellen werden barrierefrei nutzbar sein.
Die generelle Vorgehensweise, komplexe Tabellen zugänglich, verständlich und nutzbar zu machen, ist:
- Komplexe Tabellen sind zu vermeiden; sie sollten in einzelne (einfache) Tabellen heruntergebrochen werden.
- Wenn komplexe Datentabellen dennoch eingesetzt werden, gilt:
- Komplexe Datentabellen müssen beschrieben werden.
- Die Beziehungen zwischen Kopfzellen und Datenzellen müssen durch die Vergabe von
headers- und/oderscope-Attributen explizit angegeben werden.
Vereinfachungen bevorzugen
Bevor wir die Techniken für die Verknüpfung von Zellen anschauen, sollten wir zuerst versuchen, komplexe Tabellen in einfache Tabellen umzuwandeln. Das Ziel der Vereinfachung einer Tabelle ist die bessere Lesbarkeit in Screenreadern. Teilweise gelingt die Vereinfachung durch Umstrukturierung einer Tabelle. Manchmal wird es erforderlich sein, eine komplexe Tabelle in mehrere einfache Tabellen zu trennen.
Attribute für komplexe Tabellen
Tabellenzellen können verschiedene Attribute erhalten. Diese dienen unterschiedlichen Zwecken.
Strecken von Zellen
Für das Strecken von Zellen (td- oder th-Elementen) über zwei oder mehr Reihen und/oder zwei oder mehr Spalten werden die rowspan- und/oder colspan-Attribute benötigt. Dabei definiert der Wert des rowspan-Attributs die Anzahl der Reihen, über die sich eine Zelle erstreckt, und der Wert des colspan-Attributs die Anzahl der Spalten. Die colspan- und rowspan-Attribute können im Übrigen beide für eine Tabellenzelle vergeben werden.
Die beiden Beispiele in den nachfolgenden Abschnitten dienen lediglich dazu, den Einsatz der beiden Attribute zu demonstrieren. Für eine barrierefreie Nutzung fehlen Kopfzellen und Beziehungen zwischen Tabellenzellen. Daher sind die Beispiele mit "nicht nachahmen" gekennzeichnet.
Das rowspan-Attribut
Mit dem rowspan-Attribut kann eine Tabellenzelle über eine oder mehrere Reihen nach unten gestreckt werden. Beachten Sie, dass belegte Slots in den Folgereihen fehlen müssen.
<!--nicht nachahmen-->
<table>
<tr>
<td>1. Spalte</td>
<td>2. Spalte</td>
<td>3. Spalte</td>
</tr>
<tr>
<td rowspan="3">1. Spalte</td>
<td>2. Spalte</td>
<td>3. Spalte</td>
</tr>
<tr>
<td rowspan="3">2. Spalte</td>
<td>3. Spalte</td>
</tr>
<tr>
<td>3. Spalte</td>
</tr>
<tr>
<td>1. Spalte</td>
<td>3. Spalte</td>
</tr>
</table>
Der Standardwert für das rowspan-Attribut ist 1. Der Wert muss eine nicht negative ganze Zahl sein. Ist der Wert 0, so erstreckt sich die Tabellenzelle bis zum Ende der aktuellen Reihengruppe (thead-, tbody- beziehungsweise tfoot-Element). Werte über 65.534 werden auf 65.534 zurückgesetzt.
Das colspan-Attribut
Das colspan-Attribut ermöglicht das Strecken einer Tabellenzelle über eine oder mehrere Spalten nach rechts. Beachten Sie, dass belegte Slots in den Folgespalten fehlen müssen.
<!--nicht nachahmen-->
<table>
<tr>
<td>1. Spalte</td>
<td>2. Spalte</td>
<td>3. Spalte</td>
<td>4. Spalte</td>
</tr>
<tr>
<td colspan="3">1. Spalte</td>
<td>4. Spalte</td>
</tr>
<tr>
<td>1. Spalte</td>
<td colspan="2">2. Spalte</td>
<td>4. Spalte</td>
</tr>
<tr>
<td>1. Spalte</td>
<td>2. Spalte</td>
<td>3. Spalte</td>
<td>4. Spalte</td>
</tr>
</table>
Der Standardwert für das colspan-Attribut ist 1. Der Wert muss eine positive ganze Zahl sein. Werte über 1000 werden auf 1000 zurückgesetzt.
Abbildung von Beziehungen
Um Beziehungen zwischen Tabellenzellen explizit anzugeben, stehen Ihnen die headers- und scope-Attribute zur Verfügung:
- Die
td- undth-Elemente können einheaders-Attribut erhalten. Imheaders-Attribut werden ein oder mehrere leerzeichengetrennte IDs von Kopfzellen der gleichen Tabelle aufgelistet, die beim Lesen der Datenzelle als Beschriftung für die Tabellenzelle dienen. - Das
th-Element kann einscope-Attribut erhalten. Mit demscope-Attribut kann von einer Kopfzelle aus eine Beziehung zu den Datenzellen einer oder mehrerer Spalten oder einer oder mehreren Reihen hergestellt werden.
Das headers-Attribut
Eine Technik, Kopfzellen mit Datenzellen zu verknüpfen, ist mit dem headers-Attribut. Zunächst benötigen jedoch die zu adressierenden Kopfzellen IDs. Im headers-Attribut einer Tabellenzelle werden die durch Leerzeichen getrennte IDs der Kopfzellen aufgelistet.
Im folgenden Beispiel werden die td-Elemente über die Werte in den headers-Attributen mit ihren Kopfzellen verknüpft. Weil es sich um eine komplexe Tabelle handelt, wird der Aufbau der Tabelle vor der Tabelle beschrieben:
Die nachfolgende 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 |
Das scope-Attribut
Das scope-Attribut für eine Kopfzelle wird mit den Werten "col" beziehungsweise "row" einer Spalte beziehungsweise einer Reihe zugeordnet. Wenn eine Tabelle th-Elemente enthält, die sich über 2 oder mehr Spalten und/oder 2 oder mehr Reihen erstrecken, dann benötigt das scope-Attribut einen Wert "colgroup" oder "rowgroup".
Die Tabelle aus dem vorherigen Abschnitt kann wie folgt mit dem scope-Attribut ausgezeichnet werden:
Die nachfolgende 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 |
Wenn Sie mit einem Screenreader von der linken Datenzelle zur mittleren Datenzelle wechseln, kann der Screenreader "Verschenken Schule Bücher" ausgeben.