Teil 1: Einfache Datentabellen

Wir erklären, wie man tabellarische Daten so aufbereitet, dass sie nicht nur hübsch aussehen, sondern auch mit den assistiven Programmen von Menschen mit Behinderung optimal nutzbar sind.

Tags: , , , ,

Autor: tc

Nicht-visuelle Zugangsformen benötigen ganz spezielle Elemente und Attribute in Datentabellen, um die logischen Verknüpfungen zwischen Datenzellen und den dazugehörigen Überschriftenzellen herstellen zu können.

Dies beginnt bereits mit einfachen Datentabellen, also Tabellen, die maximal über eine Zeile oder eine Spalte von Überschriftenzellen verfügen. In der HTML4.01-Empfehlung ist für diese Zellen das Element TH (=table header) vorgesehen, für die Datenzellen das Element TD (=table data). Das einfachste mögliche Beispiel für eine Datentabelle finden Sie im folgenden Codelisting:

  1. <table>
  2. <tr>
  3. <th>…</th>
  4. <th>…</th>
  5. </tr>
  6. <tr>
  7. <td>…</td>
  8. <td>…</td>
  9. </tr>
  10. </table>

Allerdings fehlen hier sämtliche Attribute und weitere HTML-Elemente, die aus einer Tabelle erst eine echte Datentabelle machen. Bei sehr einfachen Tabellen kann man sich die Mühe einer weiteren Auszeichnung sparen, da die Zuordnung der Zellen zu ihren Überschriften (wie im vorstehenden Beispiel) implizit vorhanden ist.

Die HTML-Spezifikation sieht vor, dass User Agents (und das schließt natürlich Hilfsmittel wie Screenreader mit ein) sich in einem solchen Fall selbst auf die Suche nach zugehörigen Zellen machen sollen (in der Regel also nach rechts bzw. nach unten). Es gehört nicht viel Phantasie dazu sich vorzustellen, dass dieser Versuch in der Praxis oftmals auf ein Ratespiel mit nicht immer korrekten Ergebnissen hinausläuft.

Spätestens wenn Ihre Datentabelle also 3-4 oder mehr Zeilen oder Spalten besitzt, wird eine weitergehende programmatische Verknüpfung unabdingbar. Diese wollen wir hier kurz vorstellen; fangen wir zunächst mit der aufwändigsten Methode an:

Zuordnung mit headers und id

Zunächst einmal müssen bei dieser Methode sämtliche Überschriftenzellen mit einer eindeutigen und einmaligen id versehen werden (<th id="foo"> … </th>). Zulässige Werte für diese id sind wie in HTML üblich sämtliche Buchstaben von A-Z bzw. a-z (ausgenommen Umlaute und ß) zu Beginn der id, dann erst Zahlen von 0-9, Bindestriche, Unterstriche, Punkte und Doppelpunkte (- _ . :). Diese ids werden dann von den Datenzellen über ihr headers-Attribut referenziert, der Wert dieses Attributs entspricht der id der zugeordneten Überschriftenzelle:

  1. <table>
  2. <tr>
  3. <th id="foo">…</th>
  4. <th id="bar">…</th>
  5. </tr>
  6. <tr>
  7. <td headers="foo">…</td>
  8. <td headers="bar">…</td>
  9. </tr>
  10. </table>

Tipp: Generell sollten Sie sich zur besseren Übersicht und damit zur Arbeitserleichterung einen eigenen Namensraum ausdenken, der diese Tabellen-ids von anderen ids einer Seite unterscheidbar macht. Dies kann z.B. mit einem Präfix oder Suffix, (a2-tabelle, table:b3 o.ä.) geschehen

Vorteile dieser Methode:

  • Der größte Vorteil dieser Methode liegt in der eindeutigen Zuordnung. Mit headers und id lassen sich Daten und Überschriften unzweifelhaft zuordnen, selbst wenn diese nicht auf der selben horizontalen oder vertikalen Ebene liegen.
  • Die Zuordnung über headers und id wird auch von assistiven Programmen älterer Bauart relativ sauber unterstützt.

Nachteile dieser Methode:

  • Bei sehr großen Tabellen mit vielen Daten wird der Gebrauch von headers und id zwangsläufig zu einer signifikanten Vermehrung des Quelltextes führen. Die Dateigröße nimmt erheblich zu, damit vergrößert sich die Ladezeit und die Performance ihrer Seiten verringert sich.
  • Diese Methode ist sicher die anfälligste für menschliche Fehler während der Erstellung einer solchen Tabelle. Fehlende oder falsch zugeordnete id und headers werden nur bei groben Schnitzern von Validatoren gefunden, sodass hierbei eine sehr präzise Arbeitsweise und eine detaillierte manuelle Nachkontrolle vonnöten sind. Die automatische Zuordnung von headers und id bedeutet erheblichen Aufwand in der serverseitigen Programmierung eines CMS oder Autorenwerkzeugs. Allerdings gibt es durchaus Editoren (wie z.B. XStandard), die diese Attribute automatisch vergeben, was eine große Arbeitserleichterung bei der Erstellung oder Pflege von Datentabellen bedeutet.

Sonderfall: Mehrdimensionale Tabellen

In mehrdimensionalen Tabellen oder in Tabellen, in denen Überschriftenzellen an beliebigen Stellen auftauchen können bieten headers und id die einzige Möglichkeit einer sinnvollen Verknüpfung. Andere Methoden wie das scope-Attribut scheiden hier aus, da sich die Datenzellen nicht zwangsläufig auf eine über ihre horizontale oder vertikale Position eindeutig zugeordnete Überschriftenzelle beziehen. Allerdings sei in diesen Fällen die Frage gestattet, ob es wirklich eine derart komplexe Tabelle sein muss, oder ob man diese zur Vermeidung unnötiger Komplexität nicht besser in zwei oder mehr separate Tabellen aufgliedern sollte. Mehr zu diesem Thema finden sie in der zweiten Folge unserer Serie: »Komplexe Datentabellen«.

Zuordnung mit scope

Im HTML-Standard ist noch eine weitere Methode der Zuordnung vorgesehen und dort als Arbeitserleichterung beschrieben: die Zuordnung über das scope-Attribut einer Überschriftenzelle (scope = Blickwinkel, Bereich). Während id und headers sozusagen von innen nach aussen wirken (TD wissen zu welcher TH sie gehören), haben wir hier den umgedrehten Fall. Mit der Angabe von <th scope="row"> vereinnahmt eine Überschriftenzelle sämtliche Datenzellen einer Tabellenreihe als zu ihr gehörig; mit <th scope="col"> erreicht man das gleiche für einzelne Spalten einer Tabelle.

Funktionell ist dieses Attribut somit gleichwertig zu headers und id. Zusätzlich lassen sich hiermit ganze Gruppen von Spalten oder Zeilen mit scope="colgroup" bzw. scope="rowgroup" zuordnen – diese Möglichkeiten kommen jedoch eher in komplexen Datentabellen zum Einsatz, die wir im nächsten Teil behandeln.

Vorteile dieser Methode:

  • Der größte Vorteil dieser Methode liegt im schlankeren Code, da Datenzellen automatisch innerhalb des zugewiesenen Bereichs liegen und somit keine eigenen Attribute benötigen.
  • In den weitaus meisten Anwendungsfällen sind Datenzellen immer einer Zeilen- oder Spaltenüberschrift zuweisbar, mit der sie in einer horizontalen oder vertikalen Achse liegen. Die einfache Zuordnung per scope ist somit die naheliegendere Alternative zur umständlichen Verknüpfung von Zellen mit headers und id.
  • Die praktische Erfahrung hat gezeigt, dass Accessibility-Techniken einfach zu implementieren sein müssen, damit sie benutzt werden. Techniken, die Aufwand für einen nicht unmittelbar erkennbaren Nutzen produzieren laufen Gefahr, ignoriert zu werden. Die Verlierer sind dann Menschen, die auf eine barrierefreie Nutzung angewiesen sind.

Nachteile dieser Methode:

  • Ältere assistive Werkzeuge, insbesondere Screenreader, unterstützen diese Methode nur sehr lückenhaft. Weitergehende Attribute und Elemente, die beim Einsatz von scope in komplexen Tabellen zwingend nötig sind (rowgroup, colgroup), werden in der Regel gar nicht oder nur fehlerhaft unterstützt.
  • Das scope-Attribut ist bei bestimmten Tabellen nur anwendbar, wenn man die Daten umsortiert, um geeignete Achsen zu erhalten. Wenn man vorhandene (unzugängliche) Datentabellen nachträglich mit der benötigten Logik ausstatten muss ohne direkten Einfluss auf die Sortierung der Daten zu haben, ist die Auszeichnung mit id und headers oftmals die einzige Alternative.

Sonderfall: Datenzellen als Überschriften

Zellen, die gleichzeitig sowohl als Datenzellen als auch als Überschriftenzellen fungieren, sollten nicht als TH, sondern als TD ausgezeichnet werden. Durch die Vergabe von headers/id- oder scope- bzw. axis-Attributen werden diese Datenzellen jedoch selbst zu Überschriftenzellen und rangieren damit in der Rangordnung zwischen TH und TD. In der HTML-Spezifikation findet sich für diese Technik folgendes Beispiel:

Screenshot des Beispielcodes aus der HTML-Spezifikation

Obwohl die erste Spalte Datenzellen TD enthält (die den TH der ersten und zweiten Zeile zugeordnet sind), fungieren diese TD selbst als Überschriften für ihre jeweiligen Zeilen, da sie mit dem Attribut scope="row" ausgezeichnet sind. Dadurch können die Inhalte der ersten Spalte in der Sprachausgabe bei Bedarf mit vorgelesen werden, wenn der Nutzer sich in den folgenden Zellen einer Zeile orientieren will.

In der nächsten Folge geht es um den Aufbau von komplexen Datentabellen.