HTML-Tabellenzugänglichkeit

Lassen Sie uns kurz zusammenfassen, wie wir Datentabellen verwenden. Eine Tabelle kann ein nützliches Werkzeug sein, um schnellen Zugriff auf Daten zu erhalten 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 ihre Informationen zu verstehen, stellen wir visuelle Assoziationen zwischen den Daten in dieser Tabelle und deren Spalten- und/oder Zeilenüberschriften her.

Aber was, wenn Sie diese visuellen Assoziationen nicht herstellen können? Wie können Sie dann eine Tabelle wie die obige lesen? Sehbehinderte Menschen verwenden oft einen Screenreader, der Informationen auf Webseiten vorliest. Das ist kein Problem, wenn Sie normalen Text lesen, aber das Interpretieren einer Tabelle kann für eine blinde Person ziemlich herausfordernd sein. Dennoch können wir mit der richtigen Auszeichnung visuelle Assoziationen durch programmatische ersetzen.

Dieser Abschnitt des Artikels bietet weitere Techniken, um Tabellen so zugänglich wie möglich zu machen.

Screenreader identifizieren alle Überschriften und verwenden sie, um programmatische Assoziationen zwischen diesen Überschriften und den dazugehörigen Zellen herzustellen. Die Kombination aus Spalten- und Zeilenüberschriften identifiziert und interpretiert die Daten jeder Zelle, sodass Benutzerinnen von Screenreadern die Tabelle ähnlich wie eine sehender Benutzerin 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 sie in ein <caption>-Element einfügen und dieses innerhalb des <table>-Elements verschachteln. Sie sollten es direkt unter dem öffnenden <table>-Tag platzieren.

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

  …
</table>

Wie Sie aus dem kurzen obigen Beispiel ersehen können, soll die Beschriftung eine Beschreibung des Tabelleninhalts enthalten. Dies ist nützlich für alle Leserinnen, die schnell erkennen möchten, ob die Tabelle für sie nützlich ist, während sie die Seite scannen, insbesondere jedoch für blinde Benutzerinnen. Anstatt von einem Screenreader viele Zelleninhalte vorlesen zu lassen, um herauszufinden, worum es in der Tabelle geht, können sich die Benutzer*innen auf eine Beschriftung verlassen und dann entscheiden, ob sie die Tabelle im Detail lesen möchten.

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

Lassen Sie uns dies ausprobieren und ein Beispiel erneut besuchen, das wir im vorherigen Artikel kennengelernt haben.

1. Öffnen Sie den Stundenplan Ihres Sprachlehrers von dem Ende von HTML-Tabellengrundlagen oder machen Sie eine lokale Kopie unserer timetable-fixed.html-Datei.
2. Fügen Sie der Tabelle eine passende 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 in der Struktur werden, ist es nützlich, ihnen mehr strukturelle Definition zu geben. Eine klare Möglichkeit, dies zu tun, besteht darin, <thead>, <tbody> und <tfoot> zu verwenden, die es Ihnen ermöglichen, einen Kopf-, Korpus- und Fußbereich für die Tabelle zu definieren.

Diese Elemente machen die Tabelle nicht unbedingt für Benutzer*innen von Screenreadern zugänglicher. Sie führen selbst nicht zu visuellen Verbesserungen, sind jedoch sehr nützlich zum Anwenden von Gestaltungs- und Layoutverbesserungen über CSS, die die Zugänglichkeit verbessern können. Um Ihnen einige interessante Beispiele zu geben: Im Fall einer langen Tabelle könnten Sie den Tabellenkopf und -fuß auf jeder gedruckten Seite wiederholen und den Körper der Tabelle auf einer Seite anzeigen und die Inhalte durch Scrollen zugänglich machen.

Um sie zu verwenden, sollten sie in folgender Reihenfolge aufgenommen werden:

• Das <thead>-Element muss den Teil der Tabelle umschließen, der der Kopf ist — dies ist normalerweise die erste Zeile, die die Spaltenüberschriften enthält, aber das ist nicht unbedingt immer der Fall. Wenn Sie <col>/<colgroup>-Elemente verwenden, sollte der Tabellenkopf direkt darunter kommen.
• Das <tbody>-Element muss den Hauptteil des Tabelleninhalts umschließen, der nicht Kopf oder Fuß der Tabelle ist.
• Das <tfoot>-Element muss den Teil der Tabelle umschließen, der der Fuß ist — dies könnte beispielsweise eine letzte Zeile mit summierten Einträgen in den vorherigen Zeilen sein.

Lassen Sie uns diese neuen Elemente in Aktion sehen.

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 zu setzen, die "SUM"-Zeile in ein <tfoot>-Element und den Rest des Inhalts in ein <tbody>-Element.

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

4. Lassen Sie uns einige einfache zusätzliche Stile zur Tabelle hinzufügen, um Ihnen eine Vorstellung davon zu geben, wie nützlich diese Elemente für die Anwendung von CSS sind. Im Kopf Ihres HTML-Dokuments sehen Sie ein leeres <style>-Element. Fügen Sie in diesem Element die folgenden CSS-Zeilen hinzu:

   css

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

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

Ihre fertige Tabelle sollte in etwa wie folgt aussehen:

Das scope-Attribut kann dem <th>-Element hinzugefügt werden, um Screenreadern genau mitzuteilen, für welche Zellen die Überschrift eine Überschrift ist — ist sie eine Überschrift für die Zeile, in der sie sich befindet, oder die Spalte, zum Beispiel? Wenn wir zu unserem Ausgabeaufzeichnungsbeispiel von früher zurückblicken, könnten Sie die Spaltenüberschriften als Spaltenüberschriften wie folgt eindeutig 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 folgt haben (wenn wir Zeilenüberschriften sowie Spaltenüberschriften hinzufügen würden):

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

Screenreader werden Markup dieser Art erkennen und ihren Benutzern ermöglichen, die gesamte Spalte oder Zeile auf einmal vorzulesen, zum Beispiel.

scope hat zwei weitere mögliche Werte — colgroup und rowgroup. Diese werden für Überschriften verwendet, die mehrere Spalten oder Zeilen überspannen. Wenn Sie sich die Tabelle "Verkaufte Artikel im August 2016" am Anfang dieses Artikelsektions noch einmal ansehen, werden Sie sehen, dass die "Kleidung"-Zelle über die "Hosen", "Röcke" und "Kleider"-Zellen sitzt. Alle diese Zellen sollten als Überschriften (<th>) ausgezeichnet werden, aber "Kleidung" ist eine Überschrift, die darüber 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>

Dasselbe gilt für Überschriften für mehrfach gruppierte Zeilen. Werfen Sie einen weiteren Blick auf die Tabelle "Verkaufte Artikel im August 2016", diesmal auf die Zeilen mit den Überschriften "Amsterdam" und "Utrecht" (<th>). Sie werden feststellen, dass die Überschrift "Die Niederlande", ebenfalls als <th>-Element ausgezeichnet, beide Zeilen überspannt und die Überschrift für die beiden Unterüberschriften ist. Daher sollte scope="rowgroup" auf dieser Überschriftzelle angegeben werden, um Screenreadern zu helfen, die richtigen Assoziationen zu erzeugen:

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

Das headers-Attribut nimmt eine Liste von nicht sortierten, durch Leerzeichen getrennten Strings an, die jeweils der eindeutigen id der <th>-Elemente entsprechen, die Überschriften entweder für eine Datenzelle (<td>-Element) oder eine andere Überschriftzelle (<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 Zeile, der sie angehört, ähnlich wie in einer Tabellenkalkulation. Damit es gut funktioniert, benötigt die Tabelle wirklich sowohl Spalten- als auch Zeilenüberschriften.

Zurück zu unserem Beispiel "Verkaufte Artikel im 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 über sich hat, ein headers-Attribut hinzu. Der Wert ist die id der Überschrift, die die Unterüberschriften definiert, die darüber sitzt, was in unserem Beispiel "kleidung" für die Spaltenüberschriften und "belgien" für die Reihenüberschrift ist.
3. Fügen Sie jedem <td>-Element ein headers-Attribut hinzu und die ids der zugehörigen <th>-Elemente in Form einer durch Leerzeichen getrennten Liste. 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 Reihe und die Spalte. Die Reihenfolge der angegebenen ids spielt keine Rolle, aber Sie sollten konsequent 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 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. Erstellen Sie schließlich eine weitere Kopie der Startdateien und machen Sie die Tabelle durch das Erstellen präziser und expliziter Assoziationen unter Verwendung der Attribute id und headers zugänglicher.

Es gibt noch ein paar 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 Ihr Wissen mit unserer HTML-Tabellen-Herausforderung testen. Viel Spaß!

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