Layout-Tabellen sind wie Briefe in Excel veröffentlicht in 2011/2014

Standardkonformität setzt u.a. die Trennung von Inhalt und Layout voraus. Die Präsentationsebene einer standardkonformen Webseite wird deswegen mit CSS gestaltet; Tabellen oder Intern: Frames eignen sich für eine barrierefreie Webgestaltung nicht, weil sie die visuelle Anordnung am Bildschirm vorgeben. Tabellen sind außerdem strukturierende Elemente, 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 Ausbildung 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 das Tabellenlayout "etablierte", zeigt eine – zugegebenermaßen schon im Jahr 2005 durchgeführte – Extern, englischsprachig: Untersuchung von Google. Ergebnis: bei den am häufigsten verwendeten Elementen rangieren die Tabellenelemente TABLE, TR und TD bereits an 9. bzw. 10. und 11. Stelle. Berücksichtigt 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 Intern: 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 Extern, englischsprachig: Zusammenhänge der Inhalte aufzubereiten. Die Regel lautet: Wenn Sie auch eine Tabellenkalkulation wie Excel zur Aufbereitung der Informationen verwenden können, dann können Datentabellen eingesetzt werden. Pressemeldungen, Artikel, Kontaktformulare u.v.m. werden aber nicht mit Tabellenkalkulationen erstellt und sollten deswegen auch im Web nicht als Tabellen umgesetzt werden.

Layout-Tabellen und Barrierefreiheit

Das W3C tut sich mit einem "Verbot" von Layout-Tabellen aus Gründen der Barrierefreiheit schwer – auch wenn ihr Einsatz kaum noch begründet werden kann. Alle Behauptungen, dass Tabellen zu Layoutzwecken eingesetzt werden können und dies die Barrierefreiheit nicht besonders beeinträchtigt, sind skeptisch zu betrachten.

Wenn ein Tabellenlayout verwendet wird, dann kann es gemäß der HTML-Spezifikation aufgebaut und damit Intern: valide sein. Sind aber die Tabellen- oder Zelleninhalte nicht Intern: linearisierbar, dann ist die Seite nicht mehr standardkonform nach den Webstandards des W3C. Die Linearisierbarkeit gehört dabei zu den größeren Herausforderungen der standardkonformen Webentwicklung.

Screenreader lesen Tabellen Zelle für Zelle, von links nach rechts und Reihe für Reihe aus. Wird ein Tabellenlayout eingesetzt, dann Extern, englischsprachig: muss die Reihenfolge der Inhalte logisch sein, damit sie bei der Arbeit mit linearen Ausgabemedien sinnvoll aufeinander folgen. Layout-Tabellen führen aber ohne Ausnahme zu einer Einschränkung der Barrierefreiheit.

Obwohl es möglich ist, Tabellenlayouts valide und linearisierbar aufzubereiten, stehen auch Fragen der Intern: Semantik im Raum:

Erlaubt sind Layout-Tabellen schon, aber …

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

… setzen Sie keine strukturierenden Elemente ein

Wenn dennoch Layout-Tabellen eingesetzt werden müssen, dann dürfen nur die einfachen Elemente

verwendet werden. Für Überschriften, Absätze und Listen innerhalb von Layout-Tabellen sind selbstverständlich die dafür vorgesehenen HTML-Elemente einzusetzen.

In Layout-Tabellen dürfen aber keine strukturierenden Tabellenelemente oder -Attribute zur logischen Verknüpfung von Zellen eingesetzt werden. Solche, für Datentabellen reservierten Auszeichnungen führen dazu, dass Extern, englischsprachig: Tabellen von Screenreadern falsch aufbereitet werden. In Layout-Tabellen zu vermeiden sind deswegen:

Auch THEAD-, TFOOT- und TBODY-Elemente sind mit Vorsicht zu genießen. Diese Tabellenelemente dienen dem Druck, um Kopf- und Fußzeilen auf jeder ausgedruckten Seite wiederholen zu können. Dafür müssen die Elemente aber genau in der Reihenfolge THEAD, TFOOT und TBODY im Quelltext vorkommen. Das bedeutet, dass sich die vorgesehene Fußzeile zwischen Kopf und Inhalt der Tabelle befindet, was in der linearisierten Ausgabe meist nicht sinnvoll ist.

… weisen Sie dem Browser an, die Tabelle als Layout-Element zu behandeln

Mit Extern, englischsprachig: WAI-ARIA hat das W3C einen Webstandard entwickelt, der es Webentwicklern ermöglicht, HTML-Elemente eine Rolle zuzuordnen. Das ist bei fortgeschritteneren UI Komponenten sinnvoll, aber auch als Reparaturtechnik kann WAI-ARIA eingesetzt werden, um semantisch inkorrektes HTML umzudefinieren. Hinsichtlich Layout-Tabellen ist die Rolle presentation hilfreich.

Mit dem Attribut role="presentation" für das TABLE-Element kann dem Browser mitgeteilt werden, dass die Tabelle nur zu Layout-Zwecken dient und nicht an den Intern: Accessibility-Tree des Betriebssystems als Tabelle ü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>
      Ein Text <abbr title="zum Beispiel">z.B.</abbr> über ARIA
  </td>
</tr>
</table>

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

Ein Text <abbr title="zum Beispiel">z.B.</abbr> über ARIA.

Screenreader erhalten somit keine Informationen über die Tabelle.

Sollten verschachtelte Tabellen eingesetzt werden, so wird role="presentation" nur auf die äußere Tabelle angewandt. Damit bei Layout-Tabellen ein tabellenloses Layout an die Barrierefreiheits-Schnittstelle übertragen werden kann, benötigen beide Tabellen role="presentation":

<table role="presentation">
  <tr>
    <td>
      <table role="presentation">
        <tr>
          <td>
            Ein Text <abbr title="zum Beispiel">z.B.</abbr> über ARIA
          </td>
        </tr>
      </table>
  </td>
</tr>
</table>

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