Barrierefreiheit von HTML-Tabellen

Lassen Sie uns kurz rekapitulieren, wie wir Datentabellen verwenden. Eine Tabelle kann ein praktisches Hilfsmittel sein, um schnellen Zugriff auf Daten zu ermöglichen und verschiedene Werte nachzuschlagen. Zum Beispiel genügt ein kurzer Blick auf die untenstehende Tabelle, um herauszufinden, wie viele Ringe im August 2016 in Gent verkauft wurden. Um die Informationen zu verstehen, stellen wir visuelle Verbindungen zwischen den Daten in dieser Tabelle und den Kopf- bzw. Zeilenüberschriften her.

Aber was, wenn Sie diese visuellen Verknüpfungen nicht herstellen können? Wie können Sie dann eine Tabelle wie die obenstehende lesen? Sehbehinderte Menschen verwenden oft einen Screenreader, der Informationen auf Webseiten vorliest. Dies ist bei einfachem Text kein Problem, aber das Interpretieren einer Tabelle kann für blinde Personen eine echte Herausforderung darstellen. Mit der richtigen Markierung können visuelle Verknüpfungen jedoch durch programmgesteuerte ersetzt werden.

Dieser Abschnitt des Artikels liefert weitere Techniken, um Tabellen so barrierefrei wie möglich zu gestalten.

Screenreader identifizieren alle Überschriften und nutzen sie, um programmgesteuerte Verknüpfungen zwischen diesen Überschriften und den entsprechenden Zellen herzustellen. Die Kombination aus Spalten- und Zeilenüberschriften ermöglicht es, die Daten in jeder Zelle so zu interpretieren, dass Screenreader-Nutzer die Tabelle ähnlich verstehen wie sehende Nutzer*innen.

Wir haben Überschriften bereits in unserem vorherigen Artikel behandelt – siehe Hinzufügen von Überschriften mit <th>-Elementen.

Sie können Ihrer Tabelle eine Überschrift hinzufügen, indem Sie sie in ein <caption>-Element setzen und dieses innerhalb des <table>-Elements platzieren. Sie sollten sie direkt unterhalb des öffnenden <table>-Tags setzen.

<table>
  <caption>
    Dinosaurs in the Jurassic period
  </caption>

  …
</table>

Wie aus dem kurzen obigen Beispiel hervorgeht, soll die Überschrift eine Beschreibung des Tabelleninhalts enthalten. Dies ist nützlich für alle Leserinnen, die sich schnell einen Überblick darüber verschaffen möchten, ob die Tabelle für sie von Nutzen ist – insbesondere jedoch für blinde Nutzerinnen. Statt dass ein Screenreader den Inhalt vieler Zellen vorliest, nur um herauszufinden, worum es in der Tabelle geht, kann sich der Nutzer auf die Überschrift verlassen und dann entscheiden, ob er die Tabelle im Detail lesen möchte.

Eine Überschrift wird direkt unterhalb des <table>-Tags platziert.

Probieren wir das aus, indem wir einen Stundenplan eines Sprachlehrers als Beispiel verwenden.

1. Erstellen Sie eine lokale Kopie der Datei timetable-fixed.html.
2. Fügen Sie eine passende Überschrift für die Tabelle hinzu.
3. Speichern Sie Ihren Code und öffnen Sie ihn in einem Browser, um das Ergebnis anzusehen.

Wenn Ihre Tabellen etwas komplexer werden, ist es nützlich, ihnen mehr Struktur zu geben. Eine klare Möglichkeit, dies zu tun, besteht darin, <thead>, <tbody> und <tfoot> zu verwenden, mit denen Sie einen Kopf-, Körper- und Fußbereich der Tabelle markieren können.

Diese Elemente machen die Tabelle für Screenreader-Nutzer*innen nicht unbedingt zugänglicher. Sie führen nicht von selbst zu visuellen Verbesserungen, sind jedoch äußerst nützlich für die Anwendung von Styling- und Layout-Anpassungen über CSS. In interessanten Fällen, wie etwa bei einer langen Tabelle, könnten Sie die Tabellenüberschrift und den Fußbereich auf jeder gedruckten Seite wiederholen lassen, während der Tabelleninhalt auf einer Seite angezeigt wird und durch Scrollen zugänglich bleibt.

Um sie zu nutzen, sollten sie in folgender Reihenfolge eingefügt werden:

• Das <thead>-Element muss den Teil der Tabelle umschließen, der die Kopfzeile darstellt – in der Regel die erste Zeile mit den Spaltenüberschriften, dies ist jedoch nicht immer der Fall. Wenn Sie <col>/<colgroup>-Elemente verwenden, sollte der Tabellenkopf direkt darunter stehen.
• Das <tbody>-Element muss den Hauptteil des Tabelleninhalts umschließen, der weder Kopf- noch Fußbereich ist.
• Das <tfoot>-Element muss den Teil der Tabelle umschließen, der den Fußbereich darstellt – dies könnte beispielsweise eine Abschlusszeile sein, in der die vorherigen Zeilen summiert werden.

Lassen Sie uns diese neuen Elemente in die Praxis umsetzen.

1. Erstellen Sie zunächst eine lokale Kopie von spending-record.html und minimal-table.css in einem neuen Ordner.

2. Versuchen Sie, die offensichtliche Überschriftenzeile in ein <thead>-Element zu setzen, die "SUM"-Zeile in ein <tfoot>-Element und den restlichen Inhalt in ein <tbody>-Element.

3. Fügen Sie anschließend ein colspan-Attribut hinzu, damit die „SUM“-Zelle sich über die ersten vier Spalten erstreckt, sodass die tatsächliche Zahl unten in der "Cost"-Spalte erscheint.

4. Fügen Sie der Tabelle ein einfaches Styling hinzu, um zu veranschaulichen, wie nützlich diese Elemente für CSS-Anwendungen sind. Fügen Sie innerhalb des Kopfbereichs Ihres HTML-Dokuments in das leere <style>–Element folgende CSS-Zeilen ein:

   css

   tbody {
     font-size: 95%;
     font-style: italic;
   }
   
   tfoot {
     font-weight: bold;
   }
   

5. Speichern und aktualisieren Sie, und überprüfen Sie das Ergebnis. Ohne die <tbody>- und <tfoot>-Elemente müssten Sie viel kompliziertere Selektoren/Regeln schreiben, um das gleiche Styling anzuwenden.

Ihre fertige Tabelle sollte etwa wie folgt aussehen:

Das scope-Attribut kann dem <th>-Element hinzugefügt werden, um Screenreadern genau anzugeben, für welche Zellen die Überschrift eine Überschrift ist – ist sie beispielsweise eine Überschrift für die aktuelle Zeile oder Spalte? Betrachtet man unser früheres Beispiel mit der Ausgabenaufstellung: Sie könnten die Spaltenüberschriften eindeutig als Spaltenüberschriften definieren:

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

Und jede Zeile könnte eine definierte Überschrift erhalten (falls wir Zeilen- sowie Spaltenüberschriften hinzufügen):

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

Screenreader erkennen eine so strukturierte Markierung und erlauben ihren Nutzern, z. B. die gesamte Spalte oder Zeile auf einmal vorzulesen.

scope hat noch zwei weitere mögliche Werte – colgroup und rowgroup. Diese werden für Überschriften verwendet, die sich über mehrere Spalten oder Zeilen erstrecken. Betrachtet man noch einmal die Tabelle "Verkaufte Artikel, August 2016" am Anfang dieses Abschnitts, sieht man, dass die Zelle "Kleidung" sich über die Zellen "Hosen", "Röcke" und "Kleider" erstreckt. Alle diese Zellen sollten als Überschriften (<th>) markiert sein, aber "Kleidung" ist eine Überschrift, die die anderen drei Unterüberschriften definiert. Dementsprechend sollte "Kleidung" ein Attribut scope="colgroup" haben, während die anderen ein Attribut scope="col" erhalten:

<thead>
  <tr>
    <th colspan="3" scope="colgroup">Clothes</th>
  </tr>
  <tr>
    <th scope="col">Trousers</th>
    <th scope="col">Skirts</th>
    <th scope="col">Dresses</th>
  </tr>
</thead>

Das Gleiche gilt für Überschriften bei mehreren gruppierten Zeilen. Werfen Sie einen weiteren Blick auf die Tabelle "Verkaufte Artikel, August 2016", diesmal konzentriert auf die Zeilen mit den Überschriften "Amsterdam" und "Utrecht" (<th>). Sie werden bemerken, dass die Überschrift "Die Niederlande", ebenfalls als <th>-Element markiert, beide Zeilen umfasst und die anderen beiden Unterüberschriften definiert. Daher sollte scope="rowgroup" auf diesem Überschriftenfeld angegeben werden, um Screenreadern die richtigen Zuordnungen zu ermöglichen:

<tr>
  <th rowspan="2" scope="rowgroup">The Netherlands</th>
  <th scope="row">Amsterdam</th>
  <td>89</td>
  <td>34</td>
  <td>69</td>
</tr>
<tr>
  <th scope="row">Utrecht</th>
  <td>80</td>
  <td>12</td>
  <td>43</td>
</tr>

Eine Alternative zur Verwendung des scope-Attributs besteht in der Verwendung der id- und headers-Attribute, um Assoziationen zwischen Überschriften und Zellen zu schaffen.

Das headers-Attribut nimmt eine Liste von ungeordneten, durch Leerzeichen getrennten Strings auf, die jeweils der eindeutigen id der <th>-Elemente entsprechen, die Überschriften für eine Datenzelle (<td>-Element) oder eine andere Überschriftenzelle (<th>-Element) liefern.

Dies gibt Ihrer HTML-Tabelle eine explizite Definition der Position jeder Zelle in der Tabelle, definiert durch die Überschriften für jede Spalte und Zeile, in der sie sich befindet, ähnlich einer Tabellenkalkulation. Damit dies gut funktioniert, benötigt die Tabelle wirklich sowohl Spalten- als auch Zeilenüberschriften.

Schauen wir uns das Beispiel "Verkaufte Artikel, August 2016" wieder an. Wir können die Attribute id und headers wie folgt verwenden:

1. Fügen Sie jedem <th>-Element in der Tabelle eine eindeutige id hinzu.
2. Fügen Sie jedem <th>-Element eine headers-Attribut hinzu, das als Unterüberschrift fungiert, d. h. eine Überschrift darüber hat. Der Wert ist die id der Überschrift, die die Unterüberschriften definiert, welches in unserem Beispiel "clothes" für die Spaltenüberschriften und "belgium" für die Zeilenüberschrift ist.
3. Fügen Sie jedem <td>-Element ein headers-Attribut hinzu und geben Sie die ids der zugehörigen <th>-Elemente in Form einer durch Leerzeichen getrennten Liste an. Gehen Sie genauso vor wie in einer Tabellenkalkulation: Finden Sie die Datenzelle und suchen Sie die entsprechenden Überschriften für die Zeile und Spalte. Die Reihenfolge der angegebenen ids spielt keine Rolle, aber Sie sollten konsistent bleiben, um es organisiert zu halten.

<thead>
  <tr>
    <th id="clothes" colspan="3">Clothes</th>
  </tr>
  <tr>
    <th id="trousers" headers="clothes">Trousers</th>
    <th id="skirts" headers="clothes">Skirts</th>
    <th id="dresses" headers="clothes">Dresses</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="belgium" rowspan="3">Belgium</th>
    <th id="antwerp" headers="belgium">Antwerp</th>
    <td headers="antwerp belgium clothes trousers">56</td>
    <td headers="antwerp belgium clothes skirts">22</td>
    <td headers="antwerp belgium clothes dresses">43</td>
  </tr>
</tbody>

1. In dieser abschließenden Übung möchten wir, dass Sie zunächst lokale Kopien von items-sold.html und minimal-table.css in einem neuen Verzeichnis erstellen.
2. Versuchen Sie nun, die passenden scope-Attribute hinzuzufügen, um diese Tabelle zugänglicher zu machen.
3. Schließlich, versuchen Sie, eine weitere Kopie der Startdateien zu erstellen, und machen Sie die Tabelle diesmal zugänglicher, indem Sie präzise und explizite Verknüpfungen mit id- und headers-Attributen erstellen.

Es gibt noch weitere Dinge, die Sie über Tabellen in HTML lernen könnten, aber für den Moment ist dies alles, was Sie wissen müssen. Als nächstes können Sie Ihr Wissen mit unserer Herausforderung zu HTML-Tabellen testen. Viel Spaß!

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter