50er Jahre Anzeige, Hausfrau beim Abwasch mit Prilpaket, mit Slogan: wenig Stil hilft viel
Inserat für "Pril", aus "Frau und Mutter", 47. Jahrgang, zweites Juniheft 1958, Seite 32, bearbeitet. (Originaltext: "Pril so sparsam - wenig Pril hilft viel", "Pril ohne Soda schont die Hände")

Accessibility Know-how

Für die BerufskollegInnen, die sich einen schnellen Überblick verschaffen wollen...

Die Inhalte sind nicht neu, aber weitgehend aktuell.

HTML / CSS Tipps

Tabellen

13. Juli 2007

aktualisiert: 18.7. 2007

Layouttabellen

  1. Professionelle WebdesignerInnen kommen mittlerweile ohne Tabellen fürs Layout aus, Sie halten Tabellenlayouts für veraltet und unprofessionell.
  2. Die Vorteile von CSS Layouts sind größere semantische Korrektheit, weniger und übersichtlicherer Quellcode und flexiblere Ausgabemöglichkeiten.
  3. Tabellen werden bei HTML Newslettern noch angeraten, weil die gängigen E-Mail Programme sehr unterschiedliche CSS Unterstützung haben.
  4. Layouttabellen sind zugänglich mit Screen-Readern und anderen assistiven Technologien, wenn sie linear, d.h Zeile für Zeile, Zelle für Zelle lesbar sind.
  5. Das kann man z.b. überprüfen mit dem Webformator, mit der Webdeveloper Toolbar im Firefox oder im Opera unter Seitendarstellung / Tabellen deaktivieren.
  6. Layouttabellen sind in den WCAG 2.0 nicht verboten, werden aber für neue Webseiten nicht empfohlen.
  7. Probleme bereiten Layouttabellen Screen-Reader Usern, wenn sie sehr verschachtelt sind,
  8. …wenn es innerhalb der Tabellen keinen ansteuerbaren Markup gibt (wie Absätze, Überschriften, Listen),
  9. …wenn es zusätzlich komplexe Datentabellen gibt.
  10. Layouttabellen dürfen keine Strukturelemente für Datentabellen enthalten (wie th, caption, headers, scope, summary)
  11. Die Barrierefreiheit von Content Management Systemen misst sich u.a. auch am standardkonformen Output ohne Tabellen.

Datentabellen

  1. Datentabellen benötigen zumindestens table headers (th).
  2. Wenn Datentabellen umfangreich und komplexer sind, brauchen sie auch thead, tfoot, tbody, col, colgroup und die Attribute für Tabellenzellen scope oder headers.
  3. Wenn nicht aus dem Kontext bereits ganz klar ist, was sie beinhalten, auch caption und summary.
  4. Screen-Reader haben einen Tabellenlesemodus, der diese Strukturinformationen ausliest.
  5. Durch scope oder headers mit id wird eine exakte Zuordnung von Spalten- und Zeilenüberschriften zu einzelnen Inhaltszellen gegeben (das ist wichtig, um den Überblick zu bewahren, weil eine Braille-Zeile nur eine geringe Anzahl von Zeichen auf einmal darstellt).
  6. Beispiele für Datentabellen gibt es auf der W3C Seite.

Allgemeines

  1. Tabellen sollen keine fixen Größenwerte im HTML Code beinhalten.
  2. Fixe Größenangaben – besonders im HTML Code – sind schlecht für User mit Sehbehinderung, die sich ihre Bildschirmanzeige umstellen, z.b. auf Kontrastmodus mit schwarzem Hintergrund und größerer Schrift.
  3. Ausprobieren kann man das unter Windows u.a. unter Systemsteuerung / Eingabehilfen / Anzeige.

Kommentarfunktion ist deaktiviert