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

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 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

Alle Behauptungen, dass Tabellen zu Layoutzwecken eingesetzt werden können und dies die Barrierefreiheit nicht besonders beeinträchtigt, sind skeptisch zu betrachten. Es gibt einige Punkte, die für die barrierefreie Nutzung zu beachten sind. Insbesondere sind Tabellen strukturierende Inhalte, die in dem Fall, dass sie als Layouthilfen genutzt werden, von ihrem strukturierenden Charakter befreit werden müssen. Außerdem müssen Layout-Tabellen auf ihre Linearisierbarkeit überprüft werden.

Die Screenreader sollen es richten

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. Vielmehr wird in der Extern, englischsprachig: HTML-Spezifikation" auf heuristische Verfahren verwiesen, die beispielsweise Screenreadern es erlauben soll, Layout-Tabellen von Datentabellen zu unterscheiden.

Wenn Tabellen zu Layoutzwecken eingesetzt werden, dann dürfen nur die einfachen Elemente

verwendet werden. In Layout-Tabellen dürfen keine strukturierenden Tabellenelemente oder -Attribute zur logischen Verknüpfung von Zellen eingesetzt werden. Solche Auszeichnungen deuten darauf hin, dass es sich um eine Datentabelle handelt und führen dazu, dass Extern, englischsprachig: Tabellen von Screenreadern falsch aufbereitet werden. In Layout-Tabellen zu vermeiden sind deswegen:

Diese und andere Tabelleneigenschaften werden von Screenreadern herangezogen, um zwischen Datentabellen und Layout-Tabellen zu unterscheiden. Obwohl diese Verfahren seit vielen Jahren vorhanden sind, so funktionieren sie nicht immer zuverlässig und es kann immer wieder vorkommen, dass eine Tabelle falsch kategorisiert wird.

Semantik einer Tabelle explizit entfernen

Mit role="none" 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 ü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="none">
  <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="none" 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="none":

<table role="none">
  <tr>
    <td>
      <table role="none">
        <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.

Linearisierbarkeit

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.

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.

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

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