Layout-Tabellen sind wie Briefe in Excel veröffentlicht in 2011zuletzt bearbeitet in 2021

Standardkonformität setzt unter anderem die Trennung von Inhalt und Layout voraus. Die Präsentationsebene einer standardkonformen Webseite wird deswegen mit Cascading Style Sheets (CSS) gestaltet; Tabellen oder Framesets können im barrierefreien Webdesign zu Problemen der Zugänglichkeit führen, weil sie sich von der visuellen Anordnung am Bildschirm und nicht von den Inhalten ableiten. Vor allem Tabellen sind strukturierende Elemente mit entsprechender Semantik, die nur zur Aufbereitung tabellarischer Daten genutzt werden sollten.

Tabellen in der Webentwicklung

Layout-Tabellen waren in den 1990er-Jahren für die Webgestaltung erforderlich, als eine browserübergreifende einheitliche Darstellung mit CSS noch nicht möglich war. Spätestens 2001, mit der Veröffentlichung von Netscape 6, kam die Wende zur Standardkonformität und somit zur Trennung von Inhalt und Layout mittels HTML und CSS. Leider haben sich Layout-Tabellen teilweise bis heute in Frameworks und Literatur festgesetzt. Der Grund ist jedoch längst Vergangenheit und hieß Netscape 4, der CSS kaum unterstützte und für die heutige Webentwicklung keine Rolle mehr spielt.

Wie sehr sich Layout-Tabellen etabliert hatten, zeigte eine im Jahr 2005 durchgeführte und inzwischen nicht mehr verfügbare Untersuchung von Google mit dem Titel "State of the Web". Ergebnis: bei den am häufigsten verwendeten Elementen rangierten die Tabellenelemente TABLE, TR und TD bereits an 9. beziehungsweise 10. und 11. Stelle. Berücksichtigte man, dass die meisten Seiten Links enthalten und zudem einige Elemente verwendet werden müssen (BODY, HTML, HEAD), dann spricht die prominente Position der Tabellenelemente Bände.

Tabellen sollten nicht grundsätzlich vermieden werden; für tabellarische Daten sollen und müssen sie sogar verwendet werden. Ist die zweidimensionale Anordnung von Informationen essenziell für die Verständlichkeit der Inhalte, dann sind Tabellen die richtigen HTML-Elemente, um die Zusammenhänge der Inhalte aufzubereiten. Die Faustregel lautet: Wenn Sie eine Tabellenkalkulation wie Excel zur Aufbereitung der Informationen verwenden würden, dann können Datentabellen eingesetzt werden. Pressemeldungen, Artikel, Kontaktformulare und andere Textformen werden aber nicht mit Tabellenkalkulationen erstellt und sollten deswegen auch im Web nicht als Tabellen umgesetzt werden.

Layout-Tabellen und Barrierefreiheit

Alle Behauptungen, dass Tabellen zu Layoutzwecken eingesetzt werden können und dies die Barrierefreiheit nicht besonders beeinträchtigt, sind skeptisch zu betrachten. Layout-Tabellen sind nicht automatisch eine Barriere, aber es kommt darauf an, wie sie aufgebaut sind.

Insbesondere sind Tabellen strukturierende Inhalte. Wenn sie als Layouthilfen genutzt werden, müssen sie von ihrem strukturierenden Charakter befreit werden. Außerdem müssen Layout-Tabellen auf ihre Linearisierbarkeit überprüft werden.

Pflicht der Webentwickler

In der HTML-Spezifikation wird eindeutig formuliert, dass Layout-Tabellen nicht HTML-konform sind:

Tables must not be used as layout aids.

https://html.spec.whatwg.org/multipage/tables.html#the-table-element

Wenn Tabellen zu Layout-Zwecken eingesetzt werden, könnten Browser und Screenreader versuchen, die Tabellenstruktur auszuwerten. Wenn die Tabelle keine Struktur darstellt, ist eine strukturelle Aufbereitung schwer zu verstehen.

Mit role="presentation" für das TABLE-Element kann dem Browser mitgeteilt werden, dass die Tabelle nur zu Layout-Zwecken dient und nicht an den Accessibility-Tree des Betriebssystems übermittelt werden soll. Diese "Anweisung" gilt für das Element, auf das sie angewandt wird, sowie alle zu diesem Element gehörenden Kindelemente. Mit

<table role="presentation"> <tr> <td> <p>Ein Text <abbr title="zum Beispiel">z.B.</abbr> über <span lang="en">Accessible Rich Internet Applications</span> (ARIA).</p> </td> </tr> </table>

leitet der Browser nur noch das Folgende an die Barrierefreiheits-Schnittstelle weiter:

<p>Ein Text <abbr title="zum Beispiel">z.B.</abbr> über <span lang="en">Accessible Rich Internet Applications</span> (ARIA).</p>

Screenreader erhalten damit keine überflüssigen Informationen über die Layout-Tabelle.

Sollten verschachtelte Tabellen eingesetzt werden, so muss role="presentation" auf alle einzelnen Tabellen angewandt werden. Das role="presentation" bezieht sich nur auf das Element selbst. Damit bei Layout-Tabellen ein tabellenloses Layout an die Barrierefreiheits-Schnittstelle übertragen werden kann, benötigen auch verschachtelte Tabellen role="presentation":

<table role="presentation"> <tr> <td> <table role="presentation"> <tr> <td> <p>Ein Text <abbr title="zum Beispiel">z.B.</abbr> über <span lang="en">Accessible Rich Internet Applications</span> (ARIA).</p> </td> </tr> </table> </td> </tr> </table>

Die Überprüfung dessen, was in der Barrierefreiheits-Schnittstelle tatsächlich ankommt, muss mit besonderen Werkzeugen zur Überwachung des Accessibility-Trees erfolgen.

In der HTML-Spezifikation wird über den Einsatz von role="presentation" hinaus auf weitere heuristische Verfahren verwiesen, die beispielsweise Screenreadern erlauben sollen, Layout-Tabellen von Datentabellen zu unterscheiden. Demnach sind sichtbare Rahmen, der Einsatz von CAPTION, THEAD oder TH und der Einsatz von headers- oder scope-Attributen geeignete Indikatoren für Datentabellen. Obwohl die heuristischen Verfahren meistens funktionieren, können sich Webentwickler nicht darauf verlassen, dass das Fehlen solcher Elemente und Attribute Browser eine Tabelle als Layout-Tabelle erkennen lassen – dafür gibt es zu viele Variationen im Code.

Kriterien in den Barrierefreiheitsrichtlinien

Die Web Content Accessibility Guidelines (WCAG) 2.1 bleiben in Erfolgskriterium 1.3.1 zum Einsatz von Tabellen zu Layoutzwecken eher vage. Vor allem in Extern, englischsprachig: Fehlertechnik F46 werden einige Kriterien geliefert, die Erfolgskriterium 1.3.1 nicht genügen. Folgende Elemente und Attribute dürfen nicht in Layout-Tabellen genutzt werden:

TH-Elemente (Kopfzellen), denn sie werden von Screenreadern zusammen mit den zugeordneten Tabellenzellen ausgewertet,
CAPTION-Elemente, denn sie werden als Tabellenüberschriften verwendet,
(nicht konforme) summary-Attribute für TABLE-Elemente, denn das Layout muss nicht beschrieben werden, und
headers-Attribute und scope-Attribute, denn sie verknüpfen Tabellenzellen und Kopfzellen miteinander und werden von Screenreadern ausgewertet.

Wenn in Layout-Tabellen nur die einfachen HTML-Elemente

TABLE für die Tabelle,
TR für die einzelnen Tabellenreihen und
TD für die in den Tabellenreihen enthaltenen Tabellenzellen

verwendet werden und die Tabellen keine Rahmen haben, stehen die Chancen gut, dass Screenreader die Strukturen der Tabelle ignorieren können.

Bei Layout-Tabellen muss neben der HTML-Auszeichnung insbesondere auch die bedeutungsvolle Reihenfolge der Inhalte berücksichtigt werden. Screenreader lesen Tabellen Zelle für Zelle, von links nach rechts und Reihe für Reihe aus. Wird ein Tabellenlayout eingesetzt, dann muss auch mit einem role="presentation" für die Tabelle Extern, englischsprachig: die Reihenfolge der Inhalte bedeutungsvoll sein.

Appell

Geben Sie sich einen Ruck! Verzichten Sie auf die antiquierte Technik der Layout-Tabelle und setzen Sie Webstandards ein!