Digitales

Tabellen

Eine Frage der Zuordnung

Person betrachtet eine tabellarische Anzeigetafel mit Abflugzeiten

Egal ob Öffnungszeiten oder komplexe statistische Auswertungen – manchmal gibt es Informationen, die am besten in einer Tabelle dargestellt werden können. Tabellen sind in ihrer Ansicht aber auch sehr sperrig. Auf dem Smartphone oder Tablet werden sie oft anders dargestellt, als auf dem PC. So brechen breite Tabellen oft schlecht um. Dann ist nicht mehr zu erkennen, welcher Tabellenkopf den einzelnen Zellen zugeordnet ist. Barrierefreie Tabellen sind möglich, wenn Sie ein paar Regeln beachten.

Auch für sehbehinderte Menschen können Informationen in Tabellen eine Barriere darstellen. So muss sichergestellt sein, dass ein Screenreader die Informationen in genau derselben Reihenfolge vorliest, wie sie eine sehende Person wahrnimmt. Dazu gehört auch die Information, wie viele Zeilen und Spalten die Tabelle enthält. Des Weiteren müssen Tabellenzellen mit der jeweiligen Zeilen- bzw. Spaltenüberschrift vorgelesen werden. Zur Umsetzung der Barrierefreiheit wird zwischen einfachen und komplexen Datentabellen unterschieden.

Einfache Tabellen

Einfache Tabellen haben nur eine Spalten- bzw. Zeilenüberschrift. Um eine Tabelle barrierefrei umzusetzen, muss jeder Tabellenzelle der passende Tabellenkopf zugeordnet werden. In einfachen Datentabellen kann dies zum Beispiel mit Hilfe des „scope“-Attributes umgesetzt werden. Mit der Ergänzung „row“ oder „col“ können somit komplette horizontale oder vertikale Zellen einer Tabellenüberschrift zugeordnet werden.

Einfache Datentabelle
Monate Jahr Einwohnerzahl Veränderung in Prozent
Januar 2019 54.980 0
Februar 2019 55.230 + 0,45
März 2019 55.290 + 0,11 
<table border="1" cellpadding="1" cellspacing="1" style="width:100%">
	<caption>Einfache Datentabelle</caption>
	<thead>
		<tr>
			<th scope="col">Monate</th>
			<th scope="col">Jahr</th>
			<th scope="col">Einwohnerzahl</th>
			<th scope="col">Veränderung in Prozent</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Januar</td>
			<td>2019</td>
			<td>54.980</td>
			<td>0</td>
		</tr>
		<tr>
			<td>Februar</td>
			<td>2019</td>
			<td>55.230</td>
			<td>+ 0,45</td>
		</tr>
		<tr>
			<td>März</td>
			<td>2019</td>
			<td>55.290</td>
			<td>+ 0,11</td>
		</tr>
	</tbody>
</table>

Komplexe Tabellen

Komplexe Tabellen besitzen mehr als eine Zeilen- bzw. Spaltenüberschrift. Deshalb ist eine eindeutige Zellenzuordnung über das „headers“- und „id“-Attribut erforderlich. Dadurch wird die Zuordnung jeder einzelnen Zelle sichergestellt und ist damit noch präziser als das „scope“-Attribut.

Komplexe Datentabelle
Jahr Einwohner
Weiblich Männlich Gesamt
2018 27.200 27.300 54.500
2019 27.780 27.900 55.680
2020 27.900 28.000 55.900 
<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
    <caption>Komplexe Datentabelle</caption>
    <tbody>
        <tr>
            <th colspan="1" id="j" rowspan="2"><strong>Jahr</strong></th>
            <th colspan="3" id="e" rowspan="1"><strong>Einwohner</strong></th>
        </tr>
        <tr>
            <th headers="e" id="e1">Weiblich</th>
            <th headers="e" id="e2">M&auml;nnlich</th>
            <th headers="e" id="e3">Gesamt</th>
        </tr>
        <tr>
            <td headers="j">2018</td>
            <td headers="e e1">27.200</td>
            <td headers="e e2">27.300</td>
            <td headers="e e3">54.500</td>
        </tr>
        <tr>
            <td headers="j">2019</td>
            <td headers="e e1">27.780</td>
            <td headers="e e2">27.900</td>
            <td headers="e e3">55.680</td>
        </tr>
        <tr>
            <td headers="j">2020</td>
            <td headers="e e1">27.900</td>
            <td headers="e e2">28.000</td>
            <td headers="e e3">55.900</td>
        </tr>
    </tbody>
</table>

Checkliste - Tabellen

  1. Vermeiden Sie den Einsatz von Tabellen, die zum Beispiel nur dazu dienen, Text aus optischen Gründen in Spalten darzustellen (Layouttabellen). Solche Informationen sollten besser mit Hilfe von Cascading Style Sheets (CSS) formatiert werden.
  2. Vergewissern Sie sich, dass Tabellen responsiv auf anderen Geräten dargestellt werden. Inhalte dürfen nicht abgeschnitten werden und müssen sinnvoll umbrechen.
  3. Achten Sie in Datentabellen darauf, dass die Zellen den jeweiligen Spalten- bzw. Zeilenüberschriften zugeordnet sind.
  4. Nehmen Sie die Zuordnung der Zellen zu den Überschiften mit Hilfe des „scope“-Attributs oder der Zuordnung von „headers“- und „id“-Attributen vor.
  5. In komplexen Datentabellen ist zwingend die Zuordnung jeder Zelle über „header“- und „id“-Attribute erforderlich. Das ist der Fall, wenn es mehr als eine Spalten- bzw. Zeilenüberschrift gibt.

Weitere Informationen zu den Anforderungen an Barrierefreiheit

Die Checkliste auf dieser Seite soll Ihnen als erster Einstieg in das Thema dienen. Sie gewährleistet keinen Anspruch auf Vollständigkeit. Zentrale Regelwerke mit weiterführenden Informationen finden Sie:

Weitere Informationen zur EN 301 549 und zum Aufbau der WCAG finden Sie auch in unseren Normen und Richtlinien zur Barrierefreiheit.

Erfolgskriterien der WCAG zum Thema Tabellen

Die Anforderungen an die Barrierefreiheit sind in den WCAG als Erfolgskriterien festgeschrieben. Ein Thema kann dabei auch in mehrere Erfolgskriterien behandelt werden. Im Folgenden erhalten Sie eine Übersicht der erforderlichen WCAG-Kriterien zum Thema Tabellen.

WCAG Erfolgskriterium 1.3.1 „Info und Beziehungen“ (externer Link öffnet in englischer Sprache in neuem Fenster)

Ihre Ansprechpartnerin

Foto von Kathrin Wille

Kathrin Wille
Telefon: 0 39 23 / 7 51 - 81
Nutzen Sie das Formular auf der Seite Kontakt Überwachungsstelle, um eine Nachricht an Frau Kathrin Wille zu übermitteln.

Zurück zum Anfang