Infos zur Barrierefreiheit für:

Strukturierung von Tabelleninhalten

Wie im Hauptartikel zu den Tabellen bereits erwähnt wurde, ist es für blinde Nutzer wichtig, dass eine Tabelle mit den ensprechenden HTML-Attributen strukturiert wird. Es gibt hierfür gleich zwei Möglichkeiten, die grundsätzlich das gleich erreichen. Sie unterscheiden sich erst bei der Strukturierung von sehr komplexen Tabellen. In diesem Fall reicht die einfachere Variante mit scope nicht mehr aus, sondern es müssen id und headers vergeben werden.

Strukturierung mit scope

Das scope-Attribut wird in Verbindung mit dem Wert col genutzt, um einem Vorleseprogramm mitzuteilen, dass der Überschrift alle Tabellenzellen zugeordnet sind, die in der Spalte unter ihr erscheinen. In Verbindung mit dem Wert row werden der Überschrift am Anfang einer Reihe alle Zellen dieser Reihe zugeteilt. Ein Beispiel hierfür sähe so aus: 

<table>
  <caption>Aktuelle Flugdaten des Salzburger Flughafens.</caption>
  <thead>
    <tr>
      <th scope="col">Flugnummer</th>
      <th scope="col">Zielflughafen</th>
      <th scope="col">Abflug</th>
      <th scope="col">Ankunft</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">LH 1234</th>
      <td>Berlin - Schönefeld</td>
      <td>11:00</td>
      <td>13:15</td>
    </tr>
    <tr>
      <th scope="row">BA 5678</th>
      <td>Hamburg</td>
      <td>11:22</td>
      <td>13:45</td>
    </tr>
  </tbody>
</table>

Beispiel 1:

Aktuelle Flugdaten des Salzburger Flughafens.
Flugnummer Zielflughafen Abflug Ankunft
LH 1234 Berlin - Schönefeld 11:00 13:15
BA 5678 Hamburg 11:22 13:45

Beim Vorlesen wäre nun eindeutig bestimmbar, dass der Abflug um 11:22 zur Flugnummer BA 5678 gehört.

Strukturierung mit id und headers

Diese Form der Strukturierung folgt einem etwas anderen Weg. Sie ist daher zwar komplizierter, ermöglicht dafür aber auch Zuordnungen in aufwendigen Tabellen. Überschriften wird das Attribut id zugewiesen um sie eindeutig identifizierbar zu machen. Für die Verwendung des id-Attributs gibt es einige Regeln:

Überschriften- und Standardzellen einer Tabelle können auch das Attribut headers zugewiesen bekommen. Sie werden dadurch der Überschrift zugeteilt, die das entsprechende id-Attribut aufweist. Für das headers-Attribut gelten grundsätzlich die gleichen Regeln wie für id, aber es darf natürlich öfters auf einer Seite vorkommen, da eine Überschrift normalerweise für mehrere Zellen gilt.

Das Besondere am headers-Attribut ist, dass es nicht auf einen Wert begrenzt ist. So kann man einer Zelle den korrespondierenden Wert einer Hauptüberschrift zuweisen und – durch ein Leerzeichen getrennt – danach den Wert einer weiteren Überschrift angeben. Das obige Beispiel mit den Flugdaten würde daher mit id und headers folgendermaßen aussehen: 

<table>
  <caption>Aktuelle Flugdaten des Salzburger Flughafens.</caption>
  <thead>
    <tr>
      <th id="nummer">Flugnummer</th>
      <th id="ziel">Zielflughafen</th>
      <th id="ab">Abflug</th>
      <th id="an">Ankunft</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="lh1234" headers="nummer">LH 1234</th>
      <td headers="lh1234 ziel">Berlin - Schönefeld</td>
      <td headers="lh1234 ab">11:00</td>
      <td headers="lh1234 an">13:15</td>
    </tr>
    <tr>
      <th id="ba5678" headers="nummer">BA 5678</th>
      <td headers="ba5678 ziel">Hamburg</td>
      <td headers="ba5678 ab">11:22</td>
      <td headers="ba5678 an">13:45</td>
    </tr>
  </tbody>
</table>

Beispiel 2:

Aktuelle Flugdaten des Salzburger Flughafens.
Flugnummer Zielflughafen Abflug Ankunft
LH 1234 Berlin - Schönefeld 11:00 13:15
BA 5678 Hamburg 11:22 13:45

Diese Weg erscheint im Vergleich zur scope-Variante unnötig kompliziert. Bei einer derart einfachen Tabelle wäre es auch besser scope zu nutzen, aber dieses Beispiel hilft Ihnen durch den direkten Vergleich die Unterschiede beider Techniken zu verstehen.

Das volle Potential zeigt die Strukturierung mit id und headers erst, wenn noch weitere Überschriften in der Tabelle vorkommen, die beim Vorlesen ohne diese Auszeichnung nicht mehr unmittelbar mit einer Zelle in Verbindung gebracht werden. Das Problem ist, dass bei der händischen Auszeichnung von aufwendig strukturierten Tabellen leicht Fehler gemacht werden, die auch nur schwer zu orten sind. Die bessere Technik ist daher immer die Vermeidung solcher komplexen Tabellen und wenn möglich die Aufsplittung in mehrere einfache Tabellen.

Spaltenüberschriften mit dem abbr-Attribut zur Strukturierung kürzen

Oft bestehen Hauptüberschriften in Tabellen aus mehreren Wörtern. Damit dem Nutzer eines Vorleseprogramms nicht für jede Tabellenreihe diese komplette Wörterkette als Überschrift vorgelesen wird, gibt es das abbr-Attribut. So kann die Überschrift „Zielflughafen in Deutschland“ dann beim Vorlesen der einzelnen Tabellenreihen mit „Zielflughafen“ abgekürzt werden. Im Idealfall lesen Vorleseprogramme beim ersten Mal die volle Überschrift und bei allen Folgereihen dann die Abkürzung vor. Eine beispielhafte Überschrift würde so aussehen:

<th abbr="Zielflughafen ">Zielflughafen in Deutschland</th>

zum Seitenanfang