Layout-Tabellen sind wie Briefe in Excel
veröffentlicht in 2011zuletzt bearbeitet in
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.
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
Fatal error: Uncaught Error: Call to undefined function mysql_query() in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php:183
Stack trace:
#0 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php(159): setScLinkToDb()
#1 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/knowhow/layout-tabellen/index.php(57): sclink()
#2 {main}
thrown in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php on line 183
