Semantische Tabellen Technikwürze 4

Montag, der 16. Januar 2006. Herzlich willkommen zum Technikwitze-Podcast Nummer vier.

[Rockmusik]

In der heutigen Sendung geht es um Tabellen, der richtige Einsatz in HTML.

Tabellen sind mittels der vorgegebenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden. So steht es zumindest in der BITV, in der Anordnung Nummer fünf der Barrierefreien-Informationstechnikverordnung. Da steht des Weiteren drin:

In Tabellen, die tabellarische Daten darstellen, sind die Zeilen- und Spaltenüberschriften mittels der vorgegebenen Elemente der verwendeten Markup-Sprache zu kennzeichnen. Soweit Tabellen, die tabellarische Daten darstellen, zwei oder mehr Ebene von Zeilen- und Spaltenüberschriften aufweisen, sind mittels der vorgegebenen Elemente der verwendeten Markup-Sprache Datenzellen und Überschriftenzellen aneinander zuzuordnen. Für Tabellen sind unter Verwendung der hierfür vorgegebenen Elemente der genutzten Markup-Sprache Zusammenfassungen bereitzustellen. Für Überschriftenzellen sind unter Verwendung der hierfür vorgegebenen Elemente der genutzten Markup-Sprache Abkürzungen bereitzustellen. Damit die assistive Software das Verständnis tabellarischer Daten erleichtert oder beziehungsweise vielmehr überhaupt begreifen kann, gibt es in HTML401 verschiedene Tabellentags, also eine Reihe von Zusatzattributen.

Die Caption ist die Überschrift der Tabelle. Also eine Überschrift, ähm, gliedert sich nicht darin, dass ihr extra eine neue Spalte aufmacht und dort in TD eure Überschrift reinmacht, sondern dafür ist Caption da. Caption kommt also direkt über Table. Table, Caption und die anderen. Dann gibt es die Headers. Die sind für den Tabellentag TD und stellen die Referenz dar von einer Datenzelle zu einer Kopfzeile. Scope für TH stellt Züge zu einer Kopfzeile zu Datenzellen her. Die Summary wird direkt in Tag Table gesetzt und definiert den Text, der diese Tabelle beschreibt. Das hat nämlich folgenden Hintergrund: Ähm, bevor ein Screenreader zum Beispiel die gesamte Tabelle liest, würde der, äh, Betrachter oder vielmehr der User eigentlich vorher entscheiden, ob er das überhaupt vorgelesen haben möchte. Und dazu gibt es ein Summary-Tag. In dem steht grob zusammengefasst, was in dieser Tabelle ist. Des Weiteren gibt es noch die Tags Tbody, Tfoot und Thead. Die definieren jeweils den Datenbereich, den Fuß und den Kopfbereich einer Tabelle.

Der grundlegende Aufbau einer Tabelle würde also wie folgt aussehen: Table, Summary mit der Zusammenfassung der Inhalte in der Tabelle. Als Nächstes die Caption mit der Überschrift. Die könnt ihr in CSS übrigens dort positionieren, wie ihr wollt. Da drüber, links, rechts oder unter der Tabelle, zum Beispiel als Bildunterzeile. Dann kommt der Thead, der Tfoot und der Tbody, bevor die Tabelle wieder schließt. Ein Screenreader würde zunächst die Summary notierte Zusammenfassung der Tabelle vorlesen. Da die einzelnen Blöcke der Tabelle über die bereitgestellten Tags definiert sind, kann eine assistive Software den Aufbau der Tabelle begreifen. Wichtig: Möchte man mit den Elementen Thead, Tbody, Tfoot arbeiten, müssen immer alle drei verwendet werden. Obwohl es unlogisch erscheint, lautet die korrekte Reihenfolge Thead, Tfoot und Tbody. Das heißt, der Fuß direkt nach dem Kopf. Kopf und Fuß dürfen pro Tabelle nur einmal vorkommen. Der Körper kann beliebig oft eingesetzt werden. Die Gliederung einer Tabelle in Thead, Tfoot und Tbody hat den Vorteil, dass eine Tabelle, die nur sehr, sehr lang ist, also über mehrere Seiten geht, ähm, ausgedruckt von einem vernünftigen Browser auf jeder einzelnen Seite jeweils den Kopf und den Fuß automatisch mit ausgibt.

Der Tabellenbereich, welcher die Spaltenüberschriften enthält, wird als Kopfbereich bezeichnet und durch die Tags Thead ausgezeichnet. Jede Kopfzelle enthält die eindeutige ID sowie die Kurzbeschreibung des Inhaltes über ABBR.

Die ID wird benötigt, damit eine assistive Software im späteren Datenbereich eine Beziehung zu den jeweiligen Kopfzellen herstellen kann. Dabei ist wichtig, dass eine ID einmalig definiert wird und nicht mehrmals in einem HTML-Dokument. Sollten also mehrere Tabellen auf einer Seite eingesetzt werden, müssen deren ID-Auszeichnung in den Kopfzellen unique sein, einmalig. Bei Einsatz eines Content-Management-Systems, CMS, muss dieses sich darum kümmern und die entsprechenden IDs automatisch vergeben. Inwieweit das die aktuellen Systeme alle beherrschen, ist offen. Also das müsst ihr wirklich mal überprüfen und schauen, ob euer CMS das macht. Wenn ihr die Tabellen selbst zusammenstrickt in eurem HTML-Werkzeug, dann könnt ihr das eh viel, viel besser als so ein Content-Management-System. Im Datenbereich stehen, wie gesagt, die bekannten Daten. Der eigentliche Tabellenbereich mit den darzustellenden Daten wird durch die Tags Tbody ausgezeichnet. Die in ihm enthaltenen Tabellenzellen TD besitzen ein Headers-Attribut. Der eigentliche Tabellenbereich mit den darzustellenden Daten wird durch die Tags Tbody ausgezeichnet. Die in ihm enthaltenen Datenzellen TD besitzen ein Headers-Attribut, worüber eine Beziehung zur jeweiligen Kopfzelle hergestellt wird. Dazu muss Headers die gewünschte ID der Kopfzelle enthalten. Also ein Beispiel wäre das TD

Headers Land, sofern die ID Land oben in einem Kopfbereich definiert wurde. Bei der Verwendung von Kreuztabellen, in denen zwei Kopfzellen zu einer Datenzelle gehören, kann im Headers-Attribut eine durch Leerzeichen separierte Liste von IDs notiert werden.

Das tatsächliche Aussehen der Tabelle ergibt sich aus den in ihr enthaltenen Inhalten. Für einen Webbrowser heißt das jedoch, dass er zunächst die komplette Tabelle einlesen und analysieren muss, bevor sie darstellen kann. Je nach Umfang und Komplexität der Tabelle sowie der Arbeitsgeschwindigkeit des Client-Rechners kann dies dazu führen, dass während des Seitenaufbaus leere Bildschirminhalte zu sehen sind. Über das Tag Colgroup kann man dem Browser gleich zu Beginn der Tabelle mitteilen, wie viele Spalten dieser hat. Dadurch kann der Aufbau der Tabelle beschleunigt werden. Im Hinblick auf Barrierefreiheit bietet Colgroup den Vorteil, dass eine Referenz von allen Datenzellen einer Spaltengruppe auf eine Kopfzeile hergestellt werden kann. [Jingle] Linktipps.

Mehr Informationen dazu findet ihr im Internet auf www.max.de. Geht dort bitte in den Bereich Essays, barrierefreie Webseiten und unter Case Studies findet ihr barrierefreie Tabellen. [Jingle] Feedback.

Auch dieses Mal hätten wir gern wieder eure Kommentare zu diesem Thema. Schreibt uns eine E-Mail an echo@technikwitze.de oder hinterlasst uns auf www.technikwitze.de euren Kommentar in der Kommentarfunktion. Bis zum nächsten Mal.