Wie ist das jetzt wirklich: Dürfen barrierefreie Webseiten Layout-Tabellen enthalten oder nicht? Ist allein schon das Vorkommen eines <table>-Tags verboten? Muss man Tabellen durch <li> ersetzen?

Tabellen vs. Barrierefreiheit

Hier die entsprechenden Richtlinien des W3C (deutsche Erklärung unten):

5.2 Tables for layout

Checkpoints in this section:

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]
Authors should use style sheets for layout and positioning. However, when it is necessary to use a table for layout, the table must linearize in a readable order. When a table is linearized, the contents of the cells become a series of paragraphs (e.g., down the page) one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists, etc.) so the page makes sense after linearization.

Also, when using tables to create a layout, do not use structural markup to create visual formatting. For example, the TH (table header) element, is usually displayed visually as centered, and bold. If a cell is not actually a header for a row or column of data, use style sheets or formatting attributes of the element.

 

Im einzelnen:

"Do not use tables for layout unless the table makes sense when linearized"

Wenn Tabellen für Layoutzwecke verwendet werden, muss der Inhalt auch in linearisierter Form Sinn machen. Linearisiert bedeutet: Wenn im Quelltext alle Anweisungen bezüglich Tabellen (zb <table>, <tr>, <td>) entfernt werden, muss der Inhalt trotzdem in der richtigen Reihenfolge erhalten bleiben.

Speziell geht es dabei um solche Fälle:

 

Bild1 Bild2 Bild3
Text1
Text2
Text3

Für sehende Menschen sind hier 3 Bilder, jedes davon hat eine Bildunterschrift. Der linearisierte Inhalt (wie er im Quellcode steht) ist aber Bild1 - Bild2 - Bild3 /nächste Reihe/ Text1 - Text2 - Text3. Die Reihenfolge ist falsch, weil der Text nicht beim zugehörigen Bild steht.

Richtig hingegen wäre:

 

Bild1
Text1
 Bild2
Text2
 Bild3
Text3

 

Genauso richtig und erlaubt wäre auch dieses typische Tabellenlayout:

Logo Slogan
Menü Inhalt Bild

Die linearisierte Reihenfolge: Logo - Slogan - Menü - Inhalt - Bild entspricht auch der tatsächlichen Lesefolge.

Nun würde sicher jemand sagen: Aber bei Verwendung von <div>-Containern statt Tabellen könnte der Kopfbereich "Logo" und "Slogan" in der linearisierten Reihenfolge nach hinten verschoben werden. Ja - aber genau das würde den WAI Richtlinien widersprechen: Sichtbarer Inhalt und linearisierter Inhalt wären verschieden.

 

.. do not use structural markup to create visual formatting..

Wenn Tabellen tatsächlich Daten in Tabellenform enthalten (also nicht für Layoutzwecke verwendet werden) gilt ein sehr umfangreiches Regelwerk, wie MarkUp verwendet werden muss. Speziell geht es dabei um die Tags <th>, <tbody> usw bzw einiger Attribute.
Diese Tags dürfen nicht für Layout-Tabellen verwendet werden. Layout-Tabellen dürfen nur mit den Tags <table>, <tr> und <td> aufgebaut sein.
Weiteres dazu bei webdesign-in.de

 

Authors should use style sheets for layout and positioning.

Man muss dazu aber aber auch sehen, dass die Richtlinien nicht für den gegenwärtigen Zeitpunkt, sondern "zeitlos" definiert wurden. "However, when it is necessary to use a table for layout.." lässt durchaus die Entscheidung, was notwendig ist, beim Autor. Es ist zweifelsohne besser, die optische Gestaltung einer Website vollständig in CSS auszulagern, allerdings lässt die derzeitige Situation das nicht ohne Einschränkung zu: Es wird gerne vergessen, dass es keinen Browser gibt, der CSS vollständig unterstützt; auch Firefox hat erhebliche Fehler.

Außerdem entspricht es ebenso nicht den Richtlinien, einen modernen Browser vorauszusetzen. Es gibt durchaus Menschen, die etwa mit einem alten Macintosh + Netscape 4 ins Web gehen. Der Anteil dieser ist wesentlich höher als derer, die etwa eine Braille-Zeile verwenden.

Es wird sicher eine Zukunft im Web geben, in der ein CSS-Design genauso stabil ist wie ein Tabellen-Design, davon sind wir derzeit aber noch weit entfernt.