Barrierefreie Tabellen auf Webseiten

Ob es sich um Kurspläne oder detaillierte finanzielle Übersichten handelt – manche Informationen lassen sich am besten in Tabellenform darstellen. Tabellen können jedoch sperrig sein und werden auf mobilen Geräten oft anders angezeigt als auf einem PC. Breite Tabellen brechen häufig ungünstig um, was dazu führt, dass nicht mehr klar erkennbar ist, welche Tabellenköpfe zu den einzelnen Zellen gehören. Mit einigen einfachen Regeln können jedoch barrierefreie Tabellen erstellt werden.

Für sehbehinderte Menschen können Tabellen ebenfalls eine Herausforderung darstellen. Es muss gewährleistet sein, dass ein Screenreader die Informationen in der gleichen Reihenfolge vorliest, wie sie von sehenden Personen wahrgenommen werden. Dies umfasst auch die Angabe der Anzahl der Zeilen und Spalten. Zudem müssen die Zellen mit den entsprechenden Zeilen- und Spaltenüberschriften vorgelesen werden. Zur Umsetzung der Barrierefreiheit wird zwischen einfachen und komplexen Datentabellen unterschieden.

Tabellen nur einsetzen, wenn Daten strukturiert und aufbereitet werden sollen. Für Layout und Darstellungen die rein optisch genutzt werden ist keine Tabelle zu verwenden. In diesem Falle kann CSS besser dafür genutzt werden.

Einfache Tabellen

Einfache Tabellen haben nur eine Spalten- oder Zeilenüberschrift. Um eine Tabelle barrierefrei zu gestalten, muss jeder Tabellenzelle der passende Tabellenkopf zugeordnet werden. In einfachen Datentabellen kann dies beispielsweise durch das „scope“-Attribut erreicht werden. Mit den Werten „row“ oder „col“ können so alle horizontalen oder vertikalen Zellen einer Tabellenüberschrift zugeordnet werden.

<table border="1" cellpadding="1" cellspacing="1" style="width:100%">
    <caption>Kursplan</caption>
    <thead>
        <tr>
            <th scope="col">Tag</th>
            <th scope="col">Zeit</th>
            <th scope="col">Kurs</th>
            <th scope="col">Trainer</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Montag</td>
            <td>10:00</td>
            <td>Yoga</td>
            <td>Anna Müller</td>
        </tr>
        <tr>
            <td>Dienstag</td>
            <td>14:00</td>
            <td>Pilates</td>
            <td>Tom Schmidt</td>
        </tr>
        <tr>
            <td>Mittwoch</td>
            <td>18:00</td>
            <td>HIIT</td>
            <td>Sara Meier</td>
        </tr>
    </tbody>
</table>

Komplexe Tabellen

Komplexe Tabellen haben mehr als eine Zeilen- oder Spaltenüberschrift. Hier ist eine eindeutige Zellenzuordnung über die Attribute „headers“ und „id“ erforderlich. Dies stellt sicher, dass jede einzelne Zelle präzise zugeordnet werden kann, was noch genauer ist als das „scope“-Attribut.

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
    <caption>Finanzübersicht</caption>
    <tbody>
        <tr>
            <th colspan="1" id="j" rowspan="2"><strong>Jahr</strong></th>
            <th colspan="3" id="e" rowspan="1"><strong>Einnahmen</strong></th>
            <th colspan="3" id="a" rowspan="1"><strong>Ausgaben</strong></th>
        </tr>
        <tr>
            <th headers="e" id="e1">Q1</th>
            <th headers="e" id="e2">Q2</th>
            <th headers="e" id="e3">Gesamt</th>
            <th headers="a" id="a1">Q1</th>
            <th headers="a" id="a2">Q2</th>
            <th headers="a" id="a3">Gesamt</th>
        </tr>
        <tr>
            <td headers="j">2021</td>
            <td headers="e e1">10.000 €</td>
            <td headers="e e2">12.000 €</td>
            <td headers="e e3">22.000 €</td>
            <td headers="a a1">8.000 €</td>
            <td headers="a a2">9.000 €</td>
            <td headers="a a3">17.000 €</td>
        </tr>
        <tr>
            <td headers="j">2022</td>
            <td headers="e e1">11.000 €</td>
            <td headers="e e2">13.000 €</td>
            <td headers="e e3">24.000 €</td>
            <td headers="a a1">7.000 €</td>
            <td headers="a a2">10.000 €</td>
            <td headers="a a3">17.000 €</td>
        </tr>
    </tbody>
</table>

Checkliste - Tabellen

• Vermeiden Sie Tabellen, die nur zur optischen Darstellung von Text in Spalten dienen (Layouttabellen). Nutzen Sie stattdessen CSS für solche Darstellung.
• Stellen Sie sicher, dass Tabellen auf verschiedenen Geräten responsiv sind. Inhalte dürfen nicht abgeschnitten werden und müssen sinnvoll umbrechen.
• Achten Sie darauf, dass die Zellen in Datentabellen den jeweiligen Spalten- und Zeilenüberschriften zugeordnet sind.
• Verwenden Sie das „scope“-Attribut oder die Zuordnung von „headers“- und „id“-Attributen, um die Zellen den Überschriften zuzuordnen.
• In komplexen Datentabellen ist es zwingend erforderlich, jede Zelle über „headers“- und „id“-Attribute zuzuordnen, insbesondere bei mehr als einer Spalten- oder Zeilenüberschrift.