HTML-Tabellen korrekt und barrierefrei aufbauen

Wenn sie es eilig haben, vergessen Webentwickler manchmal, das Thema Barrierefreiheit zu berücksichtigen. Doch die Zahl der Menschen, die keine Standardbrowser verwenden, sondern zum Beispiel Bildschirmlesegeräte für Sehbehinderte, nimmt zu. HTML-Tabellen bieten unterschiedliche Möglichkeiten, mit solchen Benutzern zu interagieren – das summary-Attribut des <table>-Elements ist nur ein Beispiel hierfür.

Bildschirmlesegeräte bieten die Möglichkeit, Kopfzeilen von Datenzellen auf einer Seite besonders hervorzuheben. Aber diese Kopfzeilen können manchmal recht lang sein. Für solche Situationen ist es ratsam, das abbr-Attribut des <td>-Elements verwenden, um dem Benutzer eine gekürzte Version der Kopfzeile zu bieten.

Das scope-Attribut gibt an, ob eine Header-Zelle Informationen zu einer Spalte oder Zeile bietet. Es kann die Werte col oder row annehmen: col bedeutet, dass die Header-Informationen für die zugehörige Spalte gelten, row weist die Informationen der entsprechenden Zeile zu. Dies ist nützlich, wenn es in einer Tabelle Header sowohl für Spalten als auch für Zeilen gibt. Das scope-Attribut ermöglicht Bildschirmlesegeräten die korrekte Zuordnung von Headern und Zellen.

Eine weitere Technik, um Zellen bestimmten Headern zuzuordnen, ist die Verwendung des header-Attributs. Dabei weist man zuerst jedem Header eine eindeutige ID zu. Als Nächstes wird dann jede Zelle um ein header-Attribut ergänzt. Dieses Attribut enthält eine durch Leerzeichen getrennte Liste der IDs aller Header-Zellen, die sich auf diese Zelle beziehen.

Der Beispielcode wird um diese Attribute erweitert, um auch Nicht-Standardbrowser zu unterstützen. Außerdem gibt es jetzt einen Rahmen für die Tabelle, und es wurden Werte für cellspacing und cellpadding angegeben.

Viele Optionen

Die Verwendung von HTML-Tabellen für das Seitenlayout ist zwar verpönt (obwohl immer noch von Entwicklern eingesetzt), aber zur Präsentation von Daten in Tabellenform sind sie durchaus zulässig. Einen umfassenden Überblick über die Optionen zur Tabellenformatierung erhält man in der Onlineversion des HTML-Standards.