<-- Matomo -->
Service für LMU-Webauftritte
print

Sprachumschaltung

Navigationspfad


Inhaltsbereich

Anleitung für komplexe, barrierefreie Tabellen

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

Verastaltungen zum Thema Web
ZeitVeranstaltungRaum

8:00 - 9:30 Uhr

Teil I: 8:00 - 8:30 Uhr

Teil II: 8:45 - 9:30 Uhr

Barrierefreiheit im Web

Teil I: Gesetzliche Vorgaben
Pause
Teil II: Praktische Beispiele

110
9:30 - 13:30 Uhr Basisschulungen  
  Fiona Standardkurs 110
  Fiona Intensivkurs 111
  Fiona Profikurs 112
  Parallele Fiona-Schulungen  
09:30 - 10:30 Uhr LMU Stellenangebote 133
10:00 - 13:00 Uhr Vertiefende Schulung 140
12:30 - 14:00 Uhr LMU Portal 006
14:00 - 18:00 Uhr "Train the Trainer" 020
  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

Verastaltungen zum Thema Web
ZeitVeranstaltungRaum

8:00 - 9:30

Teil I: 8:00 - 8:30

Teil II: 8:45 - 9:30

Barrierefreiheit im Web

Teil I: Gesetzliche Vorgaben
Pause
Teil II: Praktische Beispiele

110
9:30 - 13:30 Basisschulungen  
Fiona Standardkurs 110
Fiona Intensivkurs 111
Fiona Profikurs 112
  Parallele Fiona-Schulungen  
09:30 - 10:30 LMU Stellenangebote 133
10:00 - 13:00 Vertiefende Schulung 140
12:30 - 14:00 LMU Portal 006
14:00 - 18:00 "Train the Trainer" 020

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!


Servicebereich