Barrierefreie Websites und ergonomische Softwaregestaltung

Grafische Darstellung in mehreren Einzelteilen: Ein gesunder Volleyballspieler und ein Behinderter spielen gemeinsam mit der Erdkugel als Ball, der beim Betrachten aller Seiten des Angebots von einem zum anderen wandert. Unter dem fliegenden Ball befindet sich der Schriftzug WWW als Hinweis, daß die Erdkugel hier mit dem Internet assoziiert wird.

Volleyballspieler, aufrecht (Teil 1 von 3). Behinderter Volleyballspieler, im Rollstuhl (Teil 2 von 3). Die Erdkugel als *Volleyball*: Eine für alle. (Teil 3 von 3).

3.3.7 Tabellen

Tabellen dienen ausschließlich zur Darstellung tabellarischer Daten. Benutzen Sie Tabellen nicht für die Text- und Bildgestaltung, also zu Layout-Zwecken, denn dadurch geht in vielen Fällen die Struktur des Dokumentes für elektronische Hilfsmittel wie zum Beispiel Screenreader verloren — vom aufgeblähten Quelltext einmal ganz abgesehen.

Geben Sie Tabellen eine Tabellenbeschriftung und hinterlegen Sie eine Zusammenfassung der enthaltenen Daten. Kennzeichnen Sie in Tabellen die Zeilen- und Spaltenüberschriften. Liegen zwei oder mehr Ebenen von Zeilen- und Spaltenüberschriften vor, sind ergänzende Zuordnungen von Datenzellen und Überschriftenzellen anzugeben (mittels der Attribute scope und headers).

  • Tabelle: <table>...</table>
  • Tabellenzeile: <tr>...</tr>
    (anzugeben zwischen dem öffnenenden und schließenden Tabellen-Element)
  • Tabellenzelle: <td></td>
    (anzugeben zwischen dem öffnenenden und schließenden Tabellenzeilen-Element)
  • Überschriftenzelle: <th>...</th>
    (anzugeben zwischen dem öffnenenden und schließenden Tabellenzeilen-Element)
  • Tabellenbeschriftung: <caption>...</caption>
    (anzugeben nach dem öffnenenden Tabellen-Element, vor der ersten Tabellenzeile)
  • Tabellenzusammenfassung: summary="..."
    (anzugeben als Attribut im Tabellen-Element)

Beispiel

Das nachfolgende Beispiel erzeugt eine Tabelle mit drei Spalten und drei Zeilen (inklusive der Überschriften-Zeile).

Beispielquelltext:

<table summary="Tabellenzusammenfassung. Tabelle zur Verdeutlichung eines Tabellenaufbaus mit drei Spalten. Jede Spalte enthält eine Überschrift. Jeder Überschrift folgen zwei Zeilen mit entsprechenden Daten.">
<caption>Tabellenbeschriftung</caption>
<tr>
<th id="Spalte_1" scope="col">Spaltenüberschrift 1 </th>
<th id="Spalte_2" scope="col">Spaltenüberschrift 2 </th>
<th id="Spalte_3" scope="col">Spaltenüberschrift 3 </th>
</tr>
<tr>
<td headers="Spalte_1">Datenzelle 1 in Spalte 1</td>
<td headers="Spalte_2">Datenzelle 1 in Spalte 2</td>
<td headers="Spalte_3">Datenzelle 1 in Spalte 3</td>
</tr>
<tr>
<td headers="Spalte_1">Datenzelle 2 in Spalte 1</td>
<td headers="Spalte_2">Datenzelle 2 in Spalte 2</td>
<td headers="Spalte_3">Datenzelle 2 in Spalte 3</td>
</tr>
</table>

Screenshot des Beispiels:

Screenshot einer Beispiel-Webseite mit einer Tabelle.

Überprüfung

  • Überprüfung per WAT[46] -Toolbar:

    Über "Tabellen" können Sie sich alle auf der Seite vorkommenden Tabellen samt verschiedenen Details der Codierung anzeigen lassen:

    Ausschnitt aus einem Bildschirmfoto einer Hilfeseite von C2Web mit *Tabellen*-Menü der WAT-Toolbar; Eine Bildbeschreibung finden Sie im vorangegangenen Abschnitt. Dieser Ausschnitt aus einem Bildschirmfoto der C2Web-Hilfeseite zu Tastaturkürzeln zeigt das WAT[46] -Menü mit hervorgehobenem Eintrag "Komplexe Datentabelle" — und ist als Link auf einen größeren Ausschnitt derselben Seite gestaltet, auf der auch die Auswirkungen dieses Befehls zu sehen sind.
    (Bitte klicken Sie auf das Bild.)

  • Überprüfung per Web Developer:

    Über "Informationen » Tabellen-Informationen einblenden" können Sie alle in Tabellen hinterlegten Informationen anzeigen lassen.

    Web Developer: Tabellen anzeigen  

0.6.x Glossar zu dieser Seite

46 WAT
Web Accessibility Toolbar : Ein Software-Werkzeug ( Plugin für den Microsoft Internet Explorer) zum Überprüfen einer Webseite auf Zugänglichkeit. Nachfolger der bekannten AIS -Toolbar.

C2Web - Projektteam | Verwaltungs-Berufsgenossenschaft
Telefon: (07141) 919 372 | E-Mail: christian.richter@vbg.de