Infos zur Barrierefreiheit für:

Tabellen barrierefrei kennzeichnen

Tabellen dürfen bekanntlich nicht für gestalterische Zwecke (Ausrichtung oder gesamter Aufbau des Layouts), sondern nur für die Darstellung von tabellarischen Inhalt genutzt werden. Zu einer barrierefreien Tabelle gehört aber noch mehr, als die Bereitstellung der allernötigsten Tabellenelemente. Auch wenn die korrekte Kennzeichnung dadurch zu den schwierigsten Punkten der Barrierefreiheit gehören kann, heißt das aber nicht, dass komplett auf die Nutzung von Tabellen verzichtet werden soll! Inhalte sind für den Leser bei gut strukturierten Tabellen viel leichter zu erfassen, als wenn sich diese Infos in einem ewig langen Textbandwurm verbergen würden.

Einführung

Mal angenommen, ein sehender Besucher muss aus einer Tabelle ablesen wieviele Einwohner ein bestimmter Ort im Jahr 1998 hatte. Er wird sich die Tabellenüberschriften ansehen, optisch den Kreuzungspunkt in den Spalten zwischen dem Ortsnamen und dem Jahr ausmachen, und Ihnen in kürzester Zeit die Anzahl der Einwohner melden.

Ein blinder Nutzer kann Ihnen diese Information ebenfalls liefern. Da er sich aber nicht auf die Fähigkeit seiner Augen zum Herauspicken dieser Information verlassen kann, muss er sich die gesamte Tabelle bis zum gesuchten Ergebnis vorlesen lassen. Dabei liest das Vorleseprogramm jede Zeile einzeln von links nach rechts vor. Bei einer sehr einfachen Tabelle wird der Nutzer vielleicht noch von selbst in der Lage sein, sich daran zu erinnern welche Tabellenüberschriften es gegeben hat. Wenn die Tabelle jedoch komplex ist und nicht barrierefrei formatiert wurde, wird er sehr bald erfolglos aufgeben, da die Inhalte zu unstrukturiert vorgelesen werden.

Vorleseprogramme ermöglichen es dem Nutzer jedoch auch direkt in einen Zelleninhalt der Tabelle zu navigieren und sich dann dazu die zugeordnete(n) Überschrift(en) vorlesen lässt. Meist wird er sich aber nur bei einer barrierefreien Tabelle wirklich alle Informationen vorlesen lassen können, die explizit zu diesem Zelleninhalt gehören.

Ich kenne das Argument, dass es sich doch nicht auszahlt, Tabellen so komplex barrierefrei zu strukturieren, wenn das doch sowieso „nur Blinde“ betrifft. Mal abgesehen davon, dass diese Aussage diskriminierend ist, ist sie auch wirtschaftlich falsch. Wenn zum Beispiel eine Behörde oft geforderte Informationen in einer barrierefreien Tabelle im Internet zur Verfügung stellt, spart sie sich effektiv eine Menge an Kosten. Blinde Bürger müssen nicht erst ins Rathaus pilgern um diese Informationen zu erfragen, sondern können sich von zuhause aus informieren. Der Aufwand entsteht hier also nur einmal, während sonst für jeden fragenden Bürger extra Zeit (und somit Lohnkosten) eines Behördenmitarbeiters anfallen.

Grundlegender Aufbau einer Tabelle

HTML ermöglicht uns die grundsätzliche Aufteilung einer Tabelle in einen Kopfbereich, einen Inhaltsbereich und falls nötig auch einen abschließenden Fußbereich:

<thead>
Kopfbereich mit den Hauptüberschriften
<tbody>
Inhaltsbereich mit den gesamten tabellarischen Daten
<tfoot>
Fußbereich bei sehr langen Tabellen, der oft erneut die Hauptüberschriften oder spezielle Zusatzinfos enthält.

Die beispielhafte Basis-Struktur würde demnach so aussehen:

<table>
  <thead>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
    </tr>
  </tfoot>
  <tbody>
    Inhalt der ganzen langen Tabelle
  </tbody>
</table>

Wichtig: Das <tfoot>-Element muss unmittelbar nach </thead> folgen.

Tabellenüberschriften und Zusammenfassungen (caption und summary)

Wenn ein sehender Leser im Text auf eine Tabelle trifft, kann er in wenigen Augenblicken erfassen, worum es in der Tabelle geht. Für einen blinden Nutzer ist das nicht möglich. Vor allem bei langen und komplexen Tabellen wird er daher dankbar sein, wenn er die Möglichkeit hat zu erfahren worum es in der folgenden Tabelle überhaupt geht bevor er sich alle Informationen vorlesen lässt.

Zu diesem Zweck gibt es das <caption>-Element, das direkt nach dem öffnenden <table>-Element positioniert wird. Sie können dieses Element nutzen, um der Tabelle eine Überschrift zuzuweisen. Eine alternative Möglichkeit ist, dass Sie direkt vorm Start der Tabelle eine richtige Überschrift platzieren (je nach Bedarf: <h1> bis <h6>). Der Vorteil davon ist, dass erfahrenere Nutzer von Vorleseprogrammen diese Überschriften direkt ansteuern können. Wenn der Nutzer erfährt, dass der Inhalt der folgenden Tabelle für ihn uninteressant ist, kann er direkt zur nächsten Überschrift weiterspringen und die Tabelle auslassen. Natürlich kann er sie somit auch direkt anspringen, wenn ihn beim umliegenden Text eigentlich nur die Tabelle interessiert. Welche dieser Lösungen Sie nutzen möchten, liegt ganz bei Ihnen.

Neben der Überschrift ist es bei langen Tabellen auch hilfreich, wenn Sie blinde Nutzer durch eine kurze Zusammenfassung am Anfang der Tabelle unterstützen. Diese Zusammenfassung wird mit dem <summary>-Attribut direkt im <table>-Element platziert. Sie könnten so zum Beispiel bei einer großen Wahlergebnis-Tabelle in der Zusammenfassung erwähnen, dass hier die Ergebnisse der sämtlicher teilnehmender Parteien dargestellt werden und dass die Partei XYZ die Wahl mit 56% der Stimmen gewonnen hat.

Ein beispielhafter Tabellenanfang würde mit Überschrift und Zusammenfassung dann so aussehen:

<table summary="Ergebnisse aller teilnehmenden Parteien. Partei XYZ hat die Wahl mit 56% der Stimmen gewonnen.">
<caption>
Landtagswahl-Ergebnisse</caption>
<thead>
Ab hier startet der Kopfbereich der Tabelle

Zuweisungen mit den Elementen <colgroup> und <col>

Wenn Sie allen Zellen in einer Tabellen-Spalte die gleichen Informationen zuweisen wollen, haben Sie möglicherweise bisher jedem einzelnen <td>-Element dieser Spalte zum Beispiel eine CSS-Klasse zugewiesen. Bei einer sehr langen Tabelle konnte das bedeuten, dass Sie diese Klasse 50 Mal oder noch öfter in den Quellcode geschrieben und ihn dadurch sehr vergrößert haben. Dabei gibt es in den meisten Fällen eine viel bessere Lösung, die jedoch leider einem Großteil der Entwickler nicht geläufig ist beziehungsweise nicht verwendet wird: <colgroup> und <col>.

Das <colgroup>-Element

Das <colgroup>-Element bezeichnet alle Inhalte einer Tabellenspalte. Mit dem Attribut span können Sie das Element auf mehrere Spalten nebeneinander ausweiten. So würde <colgroup span="10" class="standard"> bedeuten, dass sich die zugewiesene CSS-Regel auf zehn Spalten bezieht. In der Theorie könnten Sie so auch einer Spaltengruppe den Attributwert lang="en" xml:lang="en" zuweisen, wenn alle Zelleninhalte innerhalb dieser Spalten englische Wörter beinhalten. Leider war es mir aber noch nicht möglich zu testen, ob ein Vorlesegerät diese Information übernimmt und dann auch wirklich all diese Wörter Englisch ausspricht. Sobald ich dazu mehr weiß, werde ich es hier vermerken.

Das <col>-Element

Das <col>-Element wird als Unterelement eines <colgroup>-Elements notiert. Sie können damit innerhalb der Spaltengruppe nochmal explizit einzelne Spalten mit Anweisungen versehen. Ein Beispiel könnte so aussehen:

<table>
  <caption>Irgendeine Beschreibung der Tabelle</caption> 

  <colgroup width="10%" class="standard">
    <col span="3">
    <col class="wichtig">
    <ol span="6">
  </colgroup>

  <thead>
    Ab hier startet der Kopfbereich der Tabelle

Sie geben hier durch das <colgroup>-Element den 10 Spalten grundsätzlich die CSS-Klasse standard. Dass diese Gruppe 10 Spalten umfasst definiert sich durch die Gesamtsumme der angegebenen <col>-Elemente, wobei die ersten drei Spalten keine Zusatzanweisung haben, die vierte Spalte dann eine eigene Klasse wichtig erhält und die nachfolgenden vier Spalten wieder keine eigene Zusatzanweisung haben. Achten Sie bei der Benutzung von <col> darauf, dass Sie immer alle Spalten der Spaltengruppe definieren, auch wenn diese keine eigenen Zusatzanweisungen mehr erhalten.

Schnelleres Laden der gesamten Tabelle

Wenn Sie der gesamten Tabelle eine Breite zuweisen und dann auch entsprechend die Anzahl aller Spalten innerhalb einer Spaltengruppe definieren, können Sie das bekannteste Problem der Browser mit Tabellen beheben. Die Tabelle wird nun nicht wie üblich erst geladen, wenn der Browser sie komplett eingelesen hat, sondern wird sofort ausgegeben. Dadurch können Sie teilweise einiges an Ladezeit einsparen.

Abschließender Hinweis

Die größten Probleme entstehen bei Tabellen durch zu hohe Komplexität. Versuchen Sie daher besonders komplexe Tabellen lieber in mehrere Einzeltabellen aufzuteilen. Die Leser werden es Ihnen danken, da es schwierig ist den Inhalt von verschachtelten Tabellen richtig zu erfassen. So erleichtern Sie sich auch die Strukturierung und haben keine Schwierigkeiten, wenn Sie der Tabelle später weitere Inhalte hinzufügen müssen.

zum Seitenanfang