Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Benimmregeln für Datentabellen Teil 2: Komplexe Datentabellen geschrieben von Tomas Caspers (2008)

Die Inhalte dieser Seite sind ursprünglich in einer vierteiligen Serie von der Extern: Aktion Mensch veröffentlicht worden. Auf www.barrierefreies-webdesign.de werden die ersten drei Teile auf mehreren Seiten verteilt präsentiert.

Ausrichtung mit scope

In Teil 1 dieser Serie hatten wir bereits das Extern: scope-Attribut als einfache Alternative zu headers/id vorgestellt. Auch in komplexen Datentabellen hat dieses Attribut durchaus seine Berechtigung, wie wir im vorhergehenden Beispiel gesehen haben. Neben dem dort vorgestellten Wert rowgroup gibt es noch row (für einzelne Zeilen), col (für einzelne Spalten) und colgroup (für Gruppen von Spalten).

Eine Besonderheit des scope-Attributs ist, dass es nicht nur für Überschriftenzellen (TH), sondern auch für ganz normale Datenzellen (TD) vergeben werden kann. Wenn eine Datenzelle mit einem scope-Attribut ausgestattet ist, dann wird sie damit automatisch zur Überschriftenzelle für alle anderen Datenzellen, die innerhalb des angegebenen Bereichs (Zeile, Zeilengruppe, Spalte oder Spaltengruppe) liegen. Im folgenden Beispiel stehen die Platzierungen (1., 2., …) in <th scope="row"> und die Namen der Vereine in einer Datenzelle, die jedoch mit <td scope="row"> ausgezeichnet ist. Diese Methode hat den Vorteil, dass es zwar eine eindeutige Hierarchie gibt, aber ein Screenreader trotzdem den Platz und den Verein vorliest, wenn der Benutzer wissen möchte, wer am Ende der Saison vorne lag.

Bundesliga-Tabelle mit dem scope="row"-Attribut für TD und TH

<table>
  <!-- … -->
  <tbody title="Deutscher Meister" class="meister">
    <tr>
      <th scope="row">1.</th>
      <td scope="row">1. FC Köln</td>
      <td></td>
      <!-- … -->
    </tr>
  </tbody>
  <!-- … -->
</table>