Anleitung für komplexe, barrierefreie Tabellen

Tabellen bitte nur auf diese Weise formatieren, auf gar keinen Fall:

• Zellen verbinden
• leere Zellen einfügen
• tricksen!

1. Die Überschrift der Tabelle ist als <caption> der Tabelle zugeordnet.
2. Die Kopfzellen <th> sagen aus, welche Informationen in der dazugehörigen Spalte/Zeile enthalten sind
   deshalb gehören die Zeitangaben bei zweigeteilten Kursen nicht in Klammern in den Veranstaltungsbereich, sondern in die Spalte "Zeit", vgl. Veranstaltung "Barrierefreiheit im Web".
3. leere Zellen
   Beispiel "Basisschulungen": die Zelle "Raum" wird nicht mit der vorgehenden verbunden, da die Zuordnung zu den Kopfzellen beibehalten werden muss. Zum Zweck der Barrierefreiheit bleibt sie nach außen hin leer und wird mit einen "title"-Attribut im Quelltext ergänzt, der aussagt, dass die Räume bei den jeweiligen Veranstaltungen stehen. Um die Zuordnung zu erleichtern, wurden die einzelnen Zeiten in Teil I und Teil II unterteilt, diese Unterteilung wird auch in der Veranstaltungszelle aufgegriffen.
   Die einzelnen Raumzellen bleiben ebenfalls leer, da die Zeitangabe für alle Basisschulungen gilt. Um die Barrierefreiheit zu gewährleisten, werden die Zeitzellen ebenfalls mit einem "title"-Attribut ergänzt, in dem die Zeiten zu Gunsten der besseren Zuordnung für Blinde, nochmals aufgeführt werden.
   Beispiel "Parallele Veranstaltungen": Bei der Raum- und Zeitzelle ist im "title" Attribut der Hinweis, dass die Angaben bei den jeweiligen Veranstaltungen stehen.
4. Hervorhebungen
   Das Fetten in Tabellen erzeugt automatisch einen Absatz, wodurch es optisch zu einer Verschiebung und größeren Abständen kommt. Um dies zu vermeiden, sollten man <p> </p> durch <span> </span> ersetzen, das in dem oberen Beispiele zusätzlich die Klasse *grau ethält.
5. Vertikale Zentrierung des Inhaltes
   Beispiel "Parallele Fiona-Schulungen": Damit der Inhalt einer Zelle vertikal zentriert dargestellt wird, muss im Quelltext style="vertical-align: middle;" ergänzt werden. Dies sollte nur dann gemacht werden, wenn die Nachbarzellen mehrzeilig sind.

Tabelle mit verbundenen Zellen

Das Verbinden von Zellen ist nur dann barrierefrei, wenn eine klare Zuordnung gegeben ist. Diese ist im oberen Beispiel gegeben, da die Zellen der linken Spalte (die Zeitspalte) als <th> definiert sind. Dadurch bezieht sich die Zeitangabe der vier verbundenen Basisschulungszellen auf alle Basisschulungen.
Damit der Inhalt der verbundenen Zellen vertikal zentriert dargestellt wird, muss im Quelltext style="vertical-align: middle;" ergänzt werden.
Das Verbinden von Zellen darf auf keinen Fall ohne klare Zuordnung erfolgen und sollte nur in Ausnahmefällen benutzt werden, z.B. bei langen und besonders komplizierten Tabellen!