Barrierefreiheit von HTML-Tabellen

Lassen Sie uns kurz zusammenfassen, wie wir Datentabellen verwenden. Eine Tabelle kann ein nützliches Werkzeug sein, um uns schnellen Zugriff auf Daten zu geben und es uns zu ermöglichen, verschiedene Werte nachzuschlagen. Beispielsweise benötigt es nur einen kurzen Blick auf die Tabelle unten, um herauszufinden, wie viele Ringe im August 2016 in Gent verkauft wurden. Um die Informationen zu verstehen, erstellen wir visuelle Assoziationen zwischen den Daten in dieser Tabelle und ihren Spalten- und/oder Zeilenüberschriften.

Aber was, wenn Sie diese visuellen Assoziationen nicht herstellen können? Wie können Sie dann eine Tabelle wie die obenstehende lesen? Sehbehinderte Menschen verwenden oft einen Screenreader, der ihnen Informationen auf Webseiten vorliest. Dies stellt kein Problem dar, wenn man einfachen Text liest, aber das Interpretieren einer Tabelle kann für eine blinde Person eine Herausforderung sein. Mit der richtigen Markierung können wir jedoch visuelle Assoziationen durch programmgesteuerte ersetzen.

In diesem Abschnitt des Artikels werden weitere Techniken erläutert, um Tabellen so zugänglich wie möglich zu machen.

Screenreader identifizieren alle Überschriften und verwenden sie, um programmgesteuerte Assoziationen zwischen diesen Überschriften und den sie betreffenden Zellen herzustellen. Die Kombination von Spalten- und Zeilenüberschriften erkennt und interpretiert die Daten in jeder Zelle, sodass Benutzer von Screenreadern die Tabelle ähnlich interpretieren können wie ein sehender Benutzer.

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

Sie können Ihrer Tabelle eine Bildunterschrift hinzufügen, indem Sie sie in ein <caption>-Element einfügen und dieses in das <table>-Element eingebettet wird. Sie sollten es direkt unter dem öffnenden <table>-Tag platzieren.

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

  …
</table>

Wie Sie aus dem obigen kurzen Beispiel schließen können, soll die Bildunterschrift eine Beschreibung der Tabelleninhalte enthalten. Dies ist nützlich für alle Leser, die schnell feststellen möchten, ob die Tabelle für sie nützlich ist, während sie die Seite durchsehen, insbesondere aber für blinde Benutzer. Anstatt dass ein Screenreader den Inhalt vieler Zellen vorliest, nur um herauszufinden, worum es in der Tabelle geht, kann der Benutzer sich auf eine Bildunterschrift verlassen und dann entscheiden, ob er die Tabelle genauer lesen möchte oder nicht.

Eine Bildunterschrift wird direkt unter dem <table>-Tag platziert.

Lassen Sie uns das ausprobieren, indem wir den Stundenplan eines Sprachlehrers als Beispiel verwenden.

1. Erstellen Sie eine lokale Kopie unserer Datei timetable-fixed.html.
2. Fügen Sie eine geeignete Bildunterschrift für die Tabelle hinzu.
3. Speichern Sie Ihren Code und öffnen Sie ihn in einem Browser, um zu sehen, wie es aussieht.

Wenn Ihre Tabellen in der Struktur etwas komplexer werden, ist es sinnvoll, ihnen mehr strukturelle Definition zu geben. Eine klare Möglichkeit, dies zu tun, ist die Verwendung von <thead>, <tbody> und <tfoot>, die es ermöglichen, einen Kopf-, Haupt- und Fußbereich für die Tabelle zu kennzeichnen.

Diese Elemente machen die Tabelle für Benutzer von Screenreadern nicht zwingend zugänglicher. Sie führen nicht selbst zu visuellen Verbesserungen, aber sie sind sehr nützlich, um Styling- und Layoutverbesserungen über CSS anzuwenden, was die Barrierefreiheit verbessern kann. Um Ihnen einige interessante Beispiele zu geben: Im Falle einer langen Tabelle könnten Sie den Tabellenkopf und -fuß auf jeder gedruckten Seite wiederholen lassen, und Sie könnten den Tabellinhalt auf einer Seite anzeigen und die Inhalte durch Scrollen verfügbar machen.

Um sie zu verwenden, sollten sie in der folgenden Reihenfolge enthalten sein:

• Das <thead>-Element muss den Teil der Tabelle umschließen, der der Kopf ist — dies ist normalerweise die erste Zeile mit den Spaltenüberschriften, muss aber nicht immer der Fall sein. Wenn Sie <col>/<colgroup>-Elemente verwenden, sollte der Tabellenkopf direkt unter diesen stehen.
• Das <tbody>-Element muss den Hauptteil des Tabelleninhalts umschließen, der nicht der Tabellenkopf oder -fuß ist.
• Das <tfoot>-Element muss den Teil der Tabelle umschließen, der der Fuß ist — dies könnte eine abschließende Zeile mit Summen der Elemente in den vorherigen Zeilen sein.

Lassen Sie uns diese neuen Elemente ausprobieren.

1. Kopieren Sie zunächst spending-record.html und minimal-table.css in einen neuen Ordner.

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

3. Fügen Sie als Nächstes ein [colspan]-Attribut (/de/docs/Web/HTML/Reference/Elements/td#colspan) hinzu, um die "SUM"-Zelle über die ersten vier Spalten zu erstrecken, sodass die tatsächliche Zahl am Ende der "Kosten"-Spalte erscheint.

4. Fügen Sie etwas einfaches zusätzliches Styling zur Tabelle hinzu, um Ihnen eine Vorstellung davon zu geben, wie nützlich diese Elemente für die Anwendung von CSS sind. Im Kopfbereich Ihres HTML-Dokuments sehen Sie ein leeres <style>-Element. Fügen Sie in dieses Element die folgenden CSS-Zeilen ein:

   cssCopy to Clipboard

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

5. Speichern und aktualisieren Sie und schauen Sie sich das Ergebnis an. Wenn die <tbody>- und <tfoot>-Elemente nicht vorhanden wären, müssten Sie weitaus kompliziertere Selektoren/Regeln schreiben, um das gleiche Styling anzuwenden.

Ihre fertige Tabelle sollte etwa wie folgt aussehen:

Das [scope]-Attribut (/de/docs/Web/HTML/Reference/Elements/th#scope) kann dem <th>-Element hinzugefügt werden, um Screenreadern genau zu sagen, für welche Zellen die Überschrift eine Überschrift ist — ist es eine Überschrift für die Zeile, in der es sich befindet, oder für die Spalte, zum Beispiel? Wenn wir auf unser früheres Beispiel des Ausgabeprotokolls zurückblicken, könnten Sie 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 wie diese haben (wenn wir Zeilenüberschriften ebenso wie Spaltenüberschriften ergänzen würden):

<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 Benutzern, entweder die gesamte Spalte oder Zeile auf einmal lesen zu lassen.

scope hat zwei weitere mögliche Werte — colgroup und rowgroup. Diese werden für Überschriften verwendet, die über mehreren Spalten oder Zeilen stehen. Wenn Sie sich die Tabelle "Verkaufte Artikel August 2016" am Anfang dieses Artikelsegments nochmal anschauen, sehen Sie, dass die Zelle "Kleidung" über den Zellen "Hosen", "Röcke" und "Kleider" sitzt. Alle diese Zellen sollten als Überschriften mit <th> markiert werden, aber "Kleidung" ist eine Überschrift, die über allem steht und die drei Unterüberschriften definiert. Daher sollte "Kleidung" ein Attribut von scope="colgroup" erhalten, während die anderen ein Attribut von 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 für mehrere gruppierte Zeilen. Werfen Sie einen weiteren Blick auf die "Verkaufte Artikel August 2016" Tabelle, konzentrieren Sie sich diesmal auf die Zeilen mit den Überschriften "Amsterdam" und "Utrecht" (<th>). Sie werden bemerken, dass die Überschrift "Die Niederlande", ebenfalls als <th>-Element markiert, sich über beide Zeilen erstreckt, als Überschrift für die anderen beiden Unterüberschriften. Daher sollte scope="rowgroup" auf diese Kopfzeile angewendet werden, um Screenreadern zu helfen, die richtigen Assoziationen zu erstellen:

<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 darin, die Attribute id und headers zu verwenden, um Assoziationen zwischen Überschriften und Zellen zu erstellen.

Das headers-Attribut akzeptiert eine Liste von ungeordneten, durch Leerzeichen getrennten [String]-Werten (/de/docs/Glossary/string), die jeder einem eindeutigen id der <th>-Elemente entsprechen, die Überschriften für entweder eine Datenzelle (<td>-Element) oder eine andere Kopfzelle (<th>-Element) bereitstellen.

Dies gibt Ihrer HTML-Tabelle eine explizite Definition der Position jeder Zelle in der Tabelle, definiert durch die Überschrift(en) für jede Spalte und Reihe, an der sie teilnimmt, ähnlich wie eine Tabelle in einer Tabellenkalculation. Damit es gut funktioniert, benötigt die Tabelle wirklich sowohl Spalten- als auch Zeilenüberschriften.

Zurück zu unserem Beispiel "Verkaufte Artikel August 2016", können wir 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, das als Unterüberschrift fungiert, d.h. eine Überschrift darüber hat, ein headers-Attribut hinzu. Der Wert ist die id der Überschrift, die darüber sitzt und die Unterüberschriften definiert, was 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 fügen Sie die ids der zugehörigen <th>-Elemente in Form einer durch Leerzeichen getrennten Liste hinzu. Sie können genauso vorgehen, wie Sie es in einem Tabellenkalkulationsprogramm tun würden: Finden Sie die Datenzelle und suchen Sie die entsprechenden Überschriften für die Zeile und die Spalte. Die Reihenfolge der angegebenen ids spielt keine Rolle, aber Sie sollten konsistent sein, 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. Für diese abschließende Übung möchten wir, dass Sie zuerst lokale Kopien von items-sold.html und minimal-table.css in einem neuen Verzeichnis erstellen.
2. Versuchen Sie nun, die entsprechenden scope-Attribute hinzuzufügen, um diese Tabelle zugänglicher zu machen.
3. Schließlich versuchen Sie, eine weitere Kopie der Ausgangsdateien zu erstellen und diesmal die Tabelle durch die Erstellung präziser und expliziter Assoziationen mit id- und headers-Attributen zugänglicher zu machen.

Es gibt noch ein paar andere Dinge, die Sie über Tabellen in HTML lernen könnten, aber das ist alles, was Sie im Moment wissen müssen. Als Nächstes können Sie sich selbst mit unserer HTML-Tabellen-Herausforderung testen. Viel Spaß!

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