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.

Abkürzungen und Zusatzinfos

Definitiv zum Thema "Barrierefreiheit" gehört hingegen das Extern: abbr-Attribut (nicht zu verwechseln mit dem ABBR-Element!):

Dieses Attribut sollte verwendet werden, um eine abgekürzte Form des Zellinhalts zur Verfügung zu stellen und könnte von Benutzerprogrammen dargestellt werden, wenn es anstelle des Zellinhalts sinnvoll ist. Abgekürzte Namen sollten kurz sein, weil Benutzerprogramme sie wiederholt darstellen könnten. Zum Beispiel könnten Sprachsynthesizer den abgekürzten Kopf wiedergeben, der zu einer bestimmten Zelle gehört, bevor dieser Zellinhalt selbst wiedergegeben wird.

Genau dies machen Screenreader auch, und in der folgenden Tabelle sehen Sie auch den Grund, warum Sie dieses Attribut bei Bedarf einsetzen sollten. In der Kopfzeile (Anm.: für sehende Nutzer ist dies die zweite Zeile, die erste Zeile ist ein <caption>-Tag) befinden sich fast ausschließlich Abkürzungen der Vereinsnamen, da die ausgeschriebenen Namen die Tabelle sprengen würden. Für Nutzer, die sich optisch orientieren ist dies auch kein Problem, denn bei der Tabelle handelt es sich um eine Kreuztabelle, die alle Spielpaarungen der Bundesligasaison auflistet; die Vereinsnamen können also bei Bedarf in der zweiten Spalte von links nachgelesen werden:

Bildschirmfoto einer Kreuztabelle. Dargestellt werden Ergebnisse der Bundesliegasaison 1977/78. Die Plätze der oberen, mittleren und unteren Bereiche werden visuell durch eine grüne Linie bzw. grünen Text im oberen Inhaltsbereich und eine rote Linie bzw. roten Text im unteren Inahltsbereich voneinander unterschieden.

In alternativen Ausgabeformen wie zum Beispiel einem Screenreader fehlt naturgemäß diese Möglichkeit der schnellen Orientierung. Wenn diese Tabelle nicht entsprechend aufbereitet wäre, dann würde eine Sprachausgabe in der Kopfzeile folgendes vorlesen:

"Pl Verein Köl Bmg Her Vfb Düs Msv Fra Fck S04 Hsv Bvb Fcb Bsg Boc Svw 1860 Saa Stp Tore Diff Pkt"

Problematisch werden diese Abkürzungen besonders dann, wenn der Nutzer sich innerhalb der Datenzellen orientiert und Zusatzinformationen benötigt, zu welcher Paarung das jeweilige Spielergebnis gehört. In einer Sprachausgabe würden hier zusätzlich die Inhalte der Überschriftenzellen vorgelesen, da diese mit scope oder mit headers & id zugeordnet sind (im Falle der Kreuztabelle sind dies immer zwei Überschriftenzellen, die sich auf eine Zelle beziehen).

In diesem Fall ist also der Einsatz des abbr-Attributs angezeigt, mit dem sich die Abkürzungen auflösen lassen. Sprachausgaben lesen dann statt der unverständlichen Abkürzung den im Wert des Attributs angegebenen Text vor. Wie dieses Attribut eingesetzt wird sehen Sie im folgenden Codelisting:

<thead>
  <tr>
    <th scope="col" abbr="Platz">Pl.</th>
    <th scope="col">Verein</th>
    <th scope="col" abbr="Erster Fußball-Club Köln">Köl</th>
    <th scope="col" abbr="Borussia Mönchengladbach">BMg</th>
    <th scope="col" abbr="Hertha BSC Berlin">Her</th>
    <th scope="col" abbr="VfB Stuttgart">VfB</th>
    <th scope="col" abbr="Fortuna Düsseldorf">Düs</th>
    <th scope="col" abbr="MSV Duisburg">MSV</th>
    <th scope="col" abbr="Eintracht Frankfurt">Fra</th>
    <th scope="col" abbr="1. FC Kaiserslautern">FCK</th>
    <th scope="col" abbr="Schalke 04">S04</th>
    <th scope="col" abbr="Hamburger SV">HSV</th>
    <th scope="col" abbr="Borussia Dortmund">BVB</th>
    <th scope="col" abbr="FC Bayern München">FCB</th>
    <th scope="col" abbr="Eintracht Braunschweig">Bsg</th>
    <th scope="col" abbr="VfL Bochum">Boc</th>
    <th scope="col" abbr="SV Werder Bremen">SVW</th>
    <th scope="col" abbr="TSV 1860 München">1860</th>
    <th scope="col" abbr="1. FC Saarbrücken">Saa</th>
    <th scope="col" abbr="FC St. Pauli">StP</th>
    <th scope="col">Tore</th>
    <th scope="col" abbr="Tordifferenz">Diff.</th>
    <th scope="col" abbr="Punkte">Pkt.</th>
  </tr>
</thead>

Auch der umgekehrte Fall ist möglich. Im folgenden Codelisting sehen Sie die Vereinsnamen in ausgeschriebener Form. Ohne die Hinterlegung der Kurzform im abbr-Attribut würden Sprachausgaben immer den gesamten Text der zugeordneten Überschriftenzellen zusammen mit den Ergebnissen der jeweiligen Paarungen vorlesen – was auf Dauer sicher sehr ermüdend wäre. Da im konkreten Anwendungsfall die Kurzform genügt ("FC BVB 4:1" ist auch für Nicht-Fachleute ausreichend), werden die branchenüblichen Kurzformen der Vereinsnamen im abbr-Attribut hinterlegt und entsprechend vorgelesen:

<thead>
  <tr>
    <th scope="col" abbr="FC">1. FC Köln</th>
    <th scope="col" abbr="Gladbach">Borussia Mönchengladbach</th>
    <th scope="col" abbr="Hertha">Hertha BSC Berlin</th>
    <th scope="col" abbr="Stuttgart">VfB Stuttgart</th>
    <th scope="col" abbr="Düsseldorf">Fortuna Düsseldorf</th>
    <th scope="col" abbr="MSV">MSV Duisburg</th>
    <th scope="col" abbr="Eintracht">Eintracht Frankfurt</th>
    <th scope="col" abbr="Lautern">1. FC Kaiserslautern</th>
    <th scope="col" abbr="Schalke">Schalke 04</th>
    <th scope="col" abbr="HSV">Hamburger SV</th>
    <th scope="col" abbr="BVB">Borussia Dortmund</th>
    <th scope="col" abbr="Bayern">FC Bayern München</th>
    <th scope="col" abbr="Brauschweig">Eintracht Braunschweig</th>
    <th scope="col" abbr="Bochum">VfL Bochum</th>
    <th scope="col" abbr="Werder">SV Werder Bremen</th>
    <th scope="col" abbr="60er">TSV 1860 München</th>
    <th scope="col" abbr="Saarbrücken">1. FC Saarbrücken</th>
    <th scope="col" abbr="Pauli">FC St. Pauli</th>
  </tr>
</thead>