Was in einer Tabelle steckt

veröffentlicht in 2011

zuletzt bearbeitet in

Layout-Tabellen sind wie Briefe in Excel

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 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. Tabellen sind vor allem 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 table-, tr- und td-Elemente 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 eine korrekte Lesereihenfolge überprüft werden.

Pflicht der Webentwickler

Im HTML-Standard 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:

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

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

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

Im HTML-Standard wird über den Einsatz von role="presentation" hinaus auf weitere heuristische Verfahren verwiesen, die Browsern erlauben sollen, Layout-Tabellen von Datentabellen zu unterscheiden. Demnach sind sichtbare Rahmen, der Einsatz von caption-, thead- oder th-Elementen 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 Web Content Accessibility Guidelines (WCAG) 2.2

Die Web Content Accessibility Guidelines (WCAG) 2.2 bleiben in Erfolgskriterium 1.3.1 zum Einsatz von Tabellen zu Layoutzwecken eher vage. Vor allem in 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:

Wenn in Layout-Tabellen nur die einfachen HTML-Elemente 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 Lesereihenfolge 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 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! CSS bietet für das Layout eine Vielzahl von Alternativen zum table-Element, wie etwa CSS Grid Layout, CSS Flexible Box Layout ("Flexbox"), CSS Multi-Column Layout, CSS-Positionierung oder das CSS Table Model.