HTML-Tabelle Barrierefreiheit

Lassen Sie uns kurz darauf zurückkommen, 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, unterschiedliche Werte abzurufen. Zum Beispiel genügt ein kurzer Blick auf die folgende Tabelle, um herauszufinden, wie viele Ringe im August 2016 in Gent verkauft wurden. Um ihre Informationen zu verstehen, stellen wir visuelle Verbindungen zwischen den Daten in dieser Tabelle und ihren Spalten- oder Zeilenüberschriften her.

Aber was, wenn Sie diese visuellen Verbindungen nicht herstellen können? Wie können Sie dann eine Tabelle wie die obenstehende lesen? Sehbehinderte Menschen verwenden häufig einen Bildschirmleser, der ihnen Informationen auf Webseiten vorliest. Dies stellt bei der Wiedergabe von einfachem Text kein Problem dar, aber das Interpretieren einer Tabelle kann für eine blinde Person eine echte Herausforderung sein. Dennoch können wir mit der richtigen Markierung visuelle Verbindungen durch programmatische ersetzen.

Bildschirmleser erkennen alle Überschriften und nutzen sie, um programmatische Verknüpfungen zwischen diesen Überschriften und den Zellen, auf die sie sich beziehen, zu erstellen. Die Kombination aus Spalten- und Zeilenüberschriften identifiziert und interpretiert die Daten in jeder Zelle, sodass Benutzer von Bildschirmlesern 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 setzen 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 obigen kurzen Beispiel entnehmen können, soll die Bildunterschrift eine Beschreibung der Tabelleninhalte enthalten. Dies ist nützlich für alle Leser, die sich schnell einen Überblick darüber verschaffen möchten, ob die Tabelle für sie von Nutzen ist, wenn sie die Seite durchsehen, insbesondere aber für blinde Benutzer. Anstatt dass ein Bildschirmleser den Inhalt vieler Zellen vorlesen muss, nur um herauszufinden, worum es in der Tabelle geht, kann sich der Benutzer auf eine Bildunterschrift verlassen und dann entscheiden, ob er die Tabelle genauer lesen möchte.

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

An diesem Punkt werden wir Sie dazu bringen, das Hinzufügen einer Bildunterschrift zu einer HTML-Tabelle auszuprobieren, unter Verwendung des Stundenplans eines Sprachlehrers als Beispiel.

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

<table>
  <caption>
    Florence's weekly lesson timetable
  </caption>
  <colgroup>
    <col span="2" />
    <col style="background-color:#97DB9A;" />
    <col style="width:42px;" />
    <col style="background-color:#97DB9A;" />
    <col style="background-color:#DCC48E; border:4px solid #C1437A;" />
    <col span="2" style="width:42px;" />
  </colgroup>
  <tr>

    <!-- Rest of code omitted for brevity -->

</table>

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

Diese Elemente machen die Tabelle nicht unbedingt zugänglicher für Benutzer von Bildschirmlesern. Sie führen allein zu keiner visuellen Verbesserung, sind jedoch sehr nützlich zum Anwenden von Stil- und Layoutverbesserungen über CSS, was die Zugänglichkeit verbessern kann. Um Ihnen einige interessante Beispiele zu geben: Im Fall einer langen Tabelle könnten Sie den Tabellenkopf und den -fuß auf jeder gedruckten Seite wiederholen lassen, und Sie könnten den Tabellenkörper auf einer einzigen Seite anzeigen und den Inhalt verfügbar haben, indem Sie auf- und abwärts scrollen.

Um sie zu verwenden, sollten sie in der folgenden Reihenfolge eingefügt 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, dies ist jedoch 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 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 in den vorherigen Zeilen zusammengefassten Elementen sein.

Lassen Sie uns diese neuen Elemente in die Tat 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 "SUMME"-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 "SUMME"-Zelle über die ersten vier Spalten zu spannen, sodass die eigentliche 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 zur Anwendung von CSS sind. Innerhalb des Kopfbereichs Ihres HTML-Dokuments sehen Sie ein leeres <style>-Element. Fügen Sie in dieses Element die folgenden Zeilen CSS-Code ein:

   cssCopy to Clipboard

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

   Hinweis: Wir erwarten nicht, dass Sie das CSS jetzt vollständig verstehen. Sie werden mehr darüber lernen, wenn Sie unsere CSS-Module durchgehen (beginnend mit CSS Styling-Grundlagen, das einen Artikel speziell über das Styling von Tabellen enthält).

5. Speichern und aktualisieren Sie und werfen Sie einen Blick auf das Ergebnis. Wenn die <tbody>- und <tfoot>-Elemente nicht vorhanden wären, müssten Sie viel kompliziertere Selektoren/Regeln schreiben, um das gleiche Styling anzuwenden.

<table>
  <caption>
    How I chose to spend my money
  </caption>
  <thead>
    <tr>
      <th>Purchase</th>
      <th>Location</th>
      <th>Date</th>
      <th>Evaluation</th>
      <th>Cost (€)</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4">SUM</td>
      <td>118</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Haircut</td>
      <td>Hairdresser</td>
      <td>12/09</td>
      <td>Great idea</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Lasagna</td>
      <td>Restaurant</td>
      <td>12/09</td>
      <td>Regrets</td>
      <td>18</td>
    </tr>
    <tr>
      <td>Shoes</td>
      <td>Shoeshop</td>
      <td>13/09</td>
      <td>Big regrets</td>
      <td>65</td>
    </tr>
    <tr>
      <td>Toothpaste</td>
      <td>Supermarket</td>
      <td>13/09</td>
      <td>Good</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

Das scope-Attribut kann zum <th>-Element hinzugefügt werden, um Bildschirmleser genau wissen zu lassen, für welche Zellen die Kopfzeile eine Kopfzeile ist — ist es eine Kopfzeile für die Zeile, in der es sich befindet, oder die Spalte? Wenn Sie sich unser früheres Ausgabenzählerbeispiel ansehen, könnten Sie die Spaltenüberschriften unmissverständlich als Spaltenüberschriften definieren, wie folgt:

<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 Kopfzeile wie diese definiert haben (wenn wir sowohl Zeilen- als auch Spaltenköpfe 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 ein so strukturiertes Markup und ermöglichen ihren Benutzern beispielsweise, 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 sitzen. Wenn Sie sich die Tabelle "Verkaufte Artikel im August 2016" am Anfang dieses Artikelsektion ansehen, werden Sie sehen, dass die Zelle "Kleidung" über den Zellen "Hosen", "Röcke" und "Kleider" liegt. Alle diese Zellen sollten als Kopfzeilen (<th>) markiert werden, aber "Kleidung" ist eine Kopfzeile, die darüber liegt 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:

<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 Kopfzeilen für mehrere gruppierte Zeilen. Betrachten Sie die Tabelle "Verkaufte Artikel im August 2016" erneut, diesmal mit Fokus auf die Zeilen mit den Überschriften "Amsterdam" und "Utrecht" (<th>). Sie werden feststellen, dass die Kopfzeile "Niederlande", ebenfalls als <th>-Element markiert, beide Zeilen überspannt und die Kopfzeile für die beiden Unterüberschriften ist. Daher sollte scope="rowgroup" auf dieser Kopfzeile spezifiziert werden, um Bildschirmlesern die richtigen Verknüpfungen 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 ist die Verwendung der Attribute id und headers, um Verknüpfungen zwischen Datenzellen und Kopfzeilen zu erstellen.

Ein <th>-Element kann entweder eine Kopfzeile für eine Datenzelle (<td>) oder, in komplexeren Tabellen, für eine andere Kopfzeile (<th>) bereitstellen. Dadurch können Sie geschichtete oder gruppierte Überschriften erstellen, bei denen eine Kopfzeile mehrere andere beschreibt.

Das headers-Attribut wird verwendet, um eine Verknüpfung von einer Zelle, <td> oder <th>, zu einer oder mehreren Kopfzeilen herzustellen. Es nimmt eine durch Leerzeichen getrennte Liste von Strings; die Reihenfolge der Strings spielt keine Rolle. Jeder String muss mit der eindeutigen id eines zugeordneten <th>-Elements übereinstimmen.

Diese Methode gibt Ihrer HTML-Tabelle eine explizitere Definition der Position jeder Zelle, basierend auf den Kopfzeilen für die Spalte und die Zeile, zu der sie gehört, ähnlich wie bei einer Tabelle in einem Tabellendokument. Damit dies gut funktioniert, sollte Ihre Tabelle sowohl Spalten- als auch Zeilenköpfe einschließen.

Sehen wir uns einen Teil des Beispiels "Verkaufte Artikel im August 2016" an, um zu sehen, wie die id- und headers-Attribute verwendet werden:

1. Fügen Sie jedem <th>-Element in der Tabelle eine eindeutige id hinzu.
2. Für die Kopfzeilen: Fügen Sie jedem <th>-Element, das als Unterüberschrift fungiert, ein headers-Attribut hinzu, also eine Kopfzelle mit einer weiteren Kopfzeile darüber. Der Wert ist die id der höheren Überschrift. In unserem Beispiel ist das "clothes" für die Spaltenüberschriften und "belgium" für die Zeilenüberschrift.
3. Für die Datenzellen: Fügen Sie jedem <td>-Element ein headers-Attribut hinzu und fügen Sie die ids der zugeordneten <th>-Elemente als durch Leerzeichen getrennte Liste hinzu. Sie können so vorgehen, wie Sie es in einem Tabellendokument tun würden: Finden Sie die Datenzelle, dann lokalisieren Sie die Zeilen- und Spaltenköpfe, die sie beschreiben. Die Reihenfolge der angegebenen ids spielt keine Rolle, aber sie konsistent zu halten, hilft, den Code organisiert zu halten und die Lesbarkeit zu verbessern.

<thead>
  <tr>
    <th></th>
    <th></th>
    <th id="clothes" colspan="3">Clothes</th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <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="2">Belgium</th>
    <th id="antwerp" headers="belgium">Antwerp</th>
    <td headers="belgium antwerp clothes trousers">56</td>
    <td headers="belgium antwerp clothes skirts">22</td>
    <td headers="belgium antwerp clothes dresses">43</td>
  </tr>
  <tr>
    <th id="ghent" headers="belgium">Ghent</th>
    <td headers="belgium ghent clothes trousers">41</td>
    <td headers="belgium ghent clothes skirts">17</td>
    <td headers="belgium ghent clothes dresses">35</td>
  </tr>
</tbody>

In diesem Beispiel:

• Das <th> für "Belgien" verwendet rowspan="2", um sowohl "Antwerpen" als auch "Gent" zu umfassen.
• Die Kopfzellen der Städte ("Antwerpen" und "Gent") verwenden das headers-Attribut, um auf "belgien" zu verweisen, um zu zeigen, dass sie zur Belgien-Gruppe gehören.
• Jedes <td> beinhaltet ein headers-Attribut für Land (belgium), Stadt (antwerpen oder gent), Gruppe (clothes) und den spezifischen Kleidungsartikel (trousers, skirts oder dresses).

Für diese letzte Übung werden wir Sie versuchen lassen, Scope und Headers in der Beispiel-Tabelle, die oben eingeführt wurde, zu verwenden.

1. Erstellen Sie zunächst lokale Kopien von items-sold.html und minimal-table.css in einem neuen Verzeichnis.
2. Versuchen Sie, die entsprechenden scope-Attribute hinzuzufügen, um diese Tabelle zugänglicher zu machen.
3. Machen Sie eine weitere Kopie der Starterdateien in einem anderen lokalen Verzeichnis.
4. Machen Sie die Tabelle dieses Mal zugänglicher, indem Sie präzise und explizite Assoziationen mit id- und headers-Attributen erstellen.

<table>
  <caption>
    Items Sold August 2016
  </caption>
  <thead>
    <tr>
      <td colspan="2" rowspan="2"></td>
      <th colspan="3" scope="colgroup">Clothes</th>
      <th colspan="2" scope="colgroup">Accessories</th>
    </tr>
    <tr>
      <th scope="col">Trousers</th>
      <th scope="col">Skirts</th>
      <th scope="col">Dresses</th>
      <th scope="col">Bracelets</th>
      <th scope="col">Rings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Belgium</th>
      <th scope="row">Antwerp</th>
      <td>56</td>
      <td>22</td>
      <td>43</td>
      <td>72</td>
      <td>23</td>
    </tr>
    <tr>
      <th scope="row">Gent</th>
      <td>46</td>
      <td>18</td>
      <td>50</td>
      <td>61</td>
      <td>15</td>
    </tr>
    <tr>
      <th scope="row">Brussels</th>
      <td>51</td>
      <td>27</td>
      <td>38</td>
      <td>69</td>
      <td>28</td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">The Netherlands</th>
      <th scope="row">Amsterdam</th>
      <td>89</td>
      <td>34</td>
      <td>69</td>
      <td>85</td>
      <td>38</td>
    </tr>
    <tr>
      <th scope="row">Utrecht</th>
      <td>80</td>
      <td>12</td>
      <td>43</td>
      <td>36</td>
      <td>19</td>
    </tr>
  </tbody>
</table>

<table>
  <caption>
    Items Sold August 2016
  </caption>
  <thead>
    <tr>
      <td colspan="2" rowspan="2"></td>
      <th colspan="3" id="clothes">Clothes</th>
      <th colspan="2" id="accessories">Accessories</th>
    </tr>
    <tr>
      <th id="trousers" headers="clothes">Trousers</th>
      <th id="skirts" headers="clothes">Skirts</th>
      <th id="dresses" headers="clothes">Dresses</th>
      <th id="bracelets" headers="accessories">Bracelets</th>
      <th id="rings" headers="accessories">Rings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" id="belgium">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>
      <td headers="antwerp belgium accessories bracelets">72</td>
      <td headers="antwerp belgium accessories rings">23</td>
    </tr>
    <tr>
      <th id="gent" headers="belgium">Gent</th>
      <td headers="gent belgium clothes trousers">46</td>
      <td headers="gent belgium clothes skirts">18</td>
      <td headers="gent belgium clothes dresses">50</td>
      <td headers="gent belgium accessories bracelets">61</td>
      <td headers="gent belgium accessories rings">15</td>
    </tr>
    <tr>
      <th id="brussels" headers="belgium">Brussels</th>
      <td headers="brussels belgium clothes trousers">51</td>
      <td headers="brussels belgium clothes skirts">27</td>
      <td headers="brussels belgium clothes dresses">38</td>
      <td headers="brussels belgium accessories bracelets">69</td>
      <td headers="brussels belgium accessories rings">28</td>
    </tr>
    <tr>
      <th rowspan="2" id="netherlands">The Netherlands</th>
      <th id="amsterdam" headers="netherlands">Amsterdam</th>
      <td headers="amsterdam netherlands clothes trousers">89</td>
      <td headers="amsterdam netherlands clothes skirts">34</td>
      <td headers="amsterdam netherlands clothes dresses">69</td>
      <td headers="amsterdam netherlands accessories bracelets">85</td>
      <td headers="amsterdam netherlands accessories rings">38</td>
    </tr>
    <tr>
      <th id="utrecht" headers="netherlands">Utrecht</th>
      <td headers="utrecht netherlands clothes trousers">80</td>
      <td headers="utrecht netherlands clothes skirts">12</td>
      <td headers="utrecht netherlands clothes dresses">43</td>
      <td headers="utrecht netherlands accessories bracelets">36</td>
      <td headers="utrecht netherlands accessories rings">19</td>
    </tr>
  </tbody>
</table>

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

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