Barrierefreiheit von HTML-Tabellen

Lassen Sie uns kurz zusammenfassen, wie wir Datentabellen verwenden. Eine Tabelle kann ein praktisches Werkzeug sein, um uns schnellen Zugang zu Daten zu geben und es uns zu ermöglichen, verschiedene Werte nachzuschlagen. Zum Beispiel braucht es nur einen kurzen Blick auf die untenstehende Tabelle, um herauszufinden, wie viele Ringe in Gent während August 2016 verkauft wurden. Um dessen Informationen zu verstehen, treffen wir visuelle Zuordnungen zwischen den Daten in dieser Tabelle und ihren Spalten- und/oder Zeilenüberschriften.

Aber was, wenn man diese visuellen Zuordnungen nicht vornehmen kann? Wie kann man dann eine Tabelle wie die obenstehende lesen? Sehbehinderte Menschen verwenden häufig einen Bildschirmleser, der ihnen Informationen auf Webseiten vorliest. Das ist kein Problem, wenn Sie normalen Text lesen, aber das Interpretieren einer Tabelle kann für eine blinde Person eine ziemliche Herausforderung sein. Dennoch können wir mit der richtigen Markup-Beschriftung visuelle Zuordnungen durch programmatische ersetzen.

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

Bildschirmleser identifizieren alle Überschriften und verwenden sie, um programmatische Zuordnungen zwischen diesen Überschriften und den dazugehörigen Zellen zu machen. Die Kombination aus Spalten- und Zeilenüberschriften identifiziert und interpretiert die Daten in jeder Zelle, sodass Bildschirmleser-Benutzer die Tabelle ähnlich wie ein sehender Benutzer interpretieren können.

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

Sie können Ihrer Tabelle eine Beschriftung geben, indem Sie diese innerhalb eines <caption>-Elements platzieren und dieses innerhalb des <table>-Elements verschachteln. Sie sollten sie direkt unter das öffnende <table>-Tag setzen.

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

  …
</table>

Wie Sie dem obigen kurzen Beispiel entnehmen können, soll die Beschriftung eine Beschreibung der Tabelleninhalte enthalten. Dies ist für alle Leser nützlich, die sich schnell einen Überblick verschaffen möchten, ob die Tabelle für sie nützlich ist, während sie die Seite durchsuchen. Besonders aber für blinde Benutzer. Anstatt dass ein Bildschirmleser den Inhalt vieler Zellen vorlesen muss, nur um zu erfahren, worum es in der Tabelle geht, kann der Benutzer sich auf eine Beschriftung verlassen und dann entscheiden, ob er die Tabelle im Detail lesen möchte oder nicht.

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

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

1. Machen Sie eine lokale Kopie unserer timetable-fixed.html-Datei.
2. Fügen Sie der Tabelle eine geeignete Beschriftung hinzu.
3. Speichern Sie Ihren Code und öffnen Sie ihn in einem Browser, um zu sehen, wie er aussieht.

Wenn Ihre Tabellen etwas komplexer werden, ist es nützlich, ihnen mehr strukturelle Definition zu geben. Eine klare Möglichkeit, dies zu erreichen, ist die Verwendung von <thead>, <tbody>, und <tfoot>, die Ihnen ermöglichen, einen Kopf-, Körper- und Fußbereich für die Tabelle zu kennzeichnen.

Diese Elemente machen die Tabelle nicht unbedingt zugänglicher für Bildschirmleser. Sie führen selbst zu keinerlei visuellen Verbesserungen, sind jedoch sehr nützlich für die Anwendung von Stil- und Layoutverbesserungen über CSS, was die Barrierefreiheit verbessern kann. Um Ihnen einige interessante Beispiele zu geben: Im Fall einer langen Tabelle könnten Sie den Tabellenkopf- und -fuß auf jeder gedruckten Seite wiederholen lassen und den Tabellenkörper auf einer einzigen Seite anzeigen lassen und den Inhalt durch Scrollen auf- und abwärts verfügbar machen.

Um sie zu verwenden, sollten sie in der folgenden Reihenfolge eingeschlossen werden:

• Das <thead>-Element muss den Teil der Tabelle umschließen, der der Kopf ist — das ist normalerweise die erste Zeile mit den Spaltenüberschriften, aber nicht unbedingt immer der Fall. Wenn Sie <col>/<colgroup>-Elemente verwenden, sollte der Tabellenkopf direkt unter diesen kommen.
• 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 beispielsweise eine letzte Zeile mit den Summen der vorherigen Zeilen sein.

Lassen Sie uns diese neuen Elemente in die Praxis umsetzen.

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

2. Versuchen Sie, die offensichtliche Kopfzeile in ein <thead>-Element, die "SUM"-Zeile in ein <tfoot>-Element und den Rest des Inhalts in ein <tbody>-Element zu setzen.

3. Fügen Sie als nächstes ein colspan-Attribut hinzu, um die "SUM"-Zelle über die ersten vier Spalten zu spannen, sodass die tatsächliche Zahl unten in der "Cost"-Spalte erscheint.

4. Fügen Sie dem Stil der Tabelle einige einfache zusätzliche Stile hinzu, um Ihnen eine Vorstellung davon zu geben, wie nützlich diese Elemente für die Anwendung von CSS sind. Im Kopf Ihrer HTML-Dokumentation sehen Sie ein leeres <style>-Element. Fügen Sie in diesem Element die folgenden CSS-Codezeilen hinzu:

   cssCopy to Clipboard

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

5. Speichern und aktualisieren Sie die Seite und überprüfen Sie das Ergebnis. Wenn die <tbody>- und <tfoot>-Elemente nicht vorhanden wären, müssten Sie viel kompliziertere Selektoren/Regeln schreiben, um das gleiche Styling zu erreichen.

Ihre fertige Tabelle sollte etwa so aussehen wie die folgende:

Das scope-Attribut kann zum <th>-Element hinzugefügt werden, um Bildschirmlesern genau zu sagen, für welche Zellen das Header-Element ein Header ist — ob es beispielsweise ein Header für die Zeile oder die Spalte ist, in der es sich befindet. Zurückblickend auf unser Beispiel der Ausgabenaufzeichnung, könnten Sie die Spaltenüberschriften folgendermaßen 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 Reihe könnte folgendermaßen einen Header haben (falls wir sowohl Zeilen- als auch 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>

Bildschirmleser erkennen so strukturiertes Markup und ermöglichen es ihren Benutzern, die gesamte Spalte oder Zeile auf einmal vorzulesen.

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 im August 2016" am Anfang dieses Abschnitts des Artikels ansehen, werden Sie sehen, dass die Zelle "Kleidung" über den Zellen "Hosen", "Röcke" und "Kleider" sitzt. Alle diese Zellen sollten als Überschriften (<th>) gekennzeichnet werden, aber "Kleidung" ist eine Überschrift, die oben sitzt und die anderen drei Unterüberschriften definiert. "Kleidung" sollte daher ein Attribut von scope="colgroup" erhalten, während die anderen ein Attribut von scope="col" erhalten würden:

<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. Schauen Sie sich erneut die Tabelle "Verkaufte Artikel im August 2016" an, diesmal mit Fokus auf die Zeilen mit den Überschriften "Amsterdam" und "Utrecht" (<th>). Sie werden feststellen, dass die Überschrift "Niederlande", ebenfalls als ein <th>-Element ausgezeichnet, sich über beide Zeilen erstreckt und die Überschrift für die beiden anderen Unterüberschriften ist. Daher sollte scope="rowgroup" für diese Überschrift-Zelle angegeben werden, um Bildschirmlesern zu helfen, die richtigen Zuordnungen 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 ist die Nutzung der id und headers-Attribute, um Zuordnungen zwischen Überschriften und Zellen zu erstellen.

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

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 Zeile, zu der sie gehört, ähnlich wie in einer Tabellenkalkulation. Damit es gut funktioniert, benötigt die Tabelle tatsächlich sowohl Spalten- als auch Zeilenüberschriften.

Zurückgehend zu unserem Beispiel "Verkaufte Artikel im August 2016", können wir die id- und headers-Attribute 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 darüber liegende Überschrift hat, ein headers-Attribut hinzu. Der Wert ist die id der Überschrift, die oben sitzt und die Unterüberschriften definiert, was in unserem Beispiel "kleidung" für die Spaltenüberschriften und "belgien" 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. Sie können vorgehen, wie Sie es in einer Tabellenkalkulation tun würden: Finden Sie die Datenzelle und suchen Sie die entsprechenden Überschriften für die Zeile und Spalte. Die Reihenfolge der angegebenen ids spielt keine Rolle, jedoch sollten Sie 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 letzte Übung möchten wir, dass Sie zuerst lokale Kopien von items-sold.html und von 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. Machen Sie schließlich eine weitere Kopie der Ausgangsdateien und machen Sie die Tabelle diesmal zugänglicher, indem Sie präzise und explizite Zuordnungen mit id- und headers-Attributen erstellen.

Es gibt noch einige andere Dinge, die Sie über Tabellen in HTML lernen könnten, aber das ist alles, was Sie jetzt 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