Categories: Software

HTML-Tabellen korrekt und barrierefrei aufbauen

Wenn sie es eilig haben, vergessen Webentwickler manchmal, das Thema Barrierefreiheit zu berücksichtigen. Doch die Zahl der Menschen, die keine Standardbrowser verwenden, sondern zum Beispiel Bildschirmlesegeräte für Sehbehinderte, nimmt zu. HTML-Tabellen bieten unterschiedliche Möglichkeiten, mit solchen Benutzern zu interagieren – das summary-Attribut des <table>-Elements ist nur ein Beispiel hierfür.

Bildschirmlesegeräte bieten die Möglichkeit, Kopfzeilen von Datenzellen auf einer Seite besonders hervorzuheben. Aber diese Kopfzeilen können manchmal recht lang sein. Für solche Situationen ist es ratsam, das abbr-Attribut des <td>-Elements verwenden, um dem Benutzer eine gekürzte Version der Kopfzeile zu bieten.

Das scope-Attribut gibt an, ob eine Header-Zelle Informationen zu einer Spalte oder Zeile bietet. Es kann die Werte col oder row annehmen: col bedeutet, dass die Header-Informationen für die zugehörige Spalte gelten, row weist die Informationen der entsprechenden Zeile zu. Dies ist nützlich, wenn es in einer Tabelle Header sowohl für Spalten als auch für Zeilen gibt. Das scope-Attribut ermöglicht Bildschirmlesegeräten die korrekte Zuordnung von Headern und Zellen.

Eine weitere Technik, um Zellen bestimmten Headern zuzuordnen, ist die Verwendung des header-Attributs. Dabei weist man zuerst jedem Header eine eindeutige ID zu. Als Nächstes wird dann jede Zelle um ein header-Attribut ergänzt. Dieses Attribut enthält eine durch Leerzeichen getrennte Liste der IDs aller Header-Zellen, die sich auf diese Zelle beziehen.

Der Beispielcode wird um diese Attribute erweitert, um auch Nicht-Standardbrowser zu unterstützen. Außerdem gibt es jetzt einen Rahmen für die Tabelle, und es wurden Werte für cellspacing und cellpadding angegeben.

Viele Optionen

Die Verwendung von HTML-Tabellen für das Seitenlayout ist zwar verpönt (obwohl immer noch von Entwicklern eingesetzt), aber zur Präsentation von Daten in Tabellenform sind sie durchaus zulässig. Einen umfassenden Überblick über die Optionen zur Tabellenformatierung erhält man in der Onlineversion des HTML-Standards.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

Data Analytics: Dienstleister wachsen zweistellig

Marktforscher Lündendonk erwartet für das Jahr 2025 ein durchschnittliches Umsatzwachstum von 14,9 Prozent.

1 Woche ago

Open-Source-Malware auf Rekordniveau

Alarmierender Anstieg von Open-Source-Malware / Seit 2019 haben Sonatype-Analysen mehr als 778.500 bösartige Pakete aufgedeckt

1 Woche ago

Bayerische KI-Agentur bietet KI-KOMPASS

Das KI-Werkzeug "BAIOSPHERE KI-KOMPASS" soll Unternehmen den Einstieg in KI erleichtern.

1 Woche ago

Cloudflare: Weltweiter Internettraffic wächst 2024 um 17,2 Prozent

Das Wachstum konzentriert sich wie im Vorjahr auf das zweite Halbjahr. Google dominiert bei den…

1 Woche ago

Adobe stopft kritische Löcher in Reader und Acrobat

Sie ermöglichen eine Remotecodeausführung. Angreifbar sind Acrobat DC, 2024 und 2020 sowie Reader DC und…

1 Woche ago

Dezember-Patchday: Microsoft schließt Zero-Day-Lücke

Die öffentlich bekannte und bereits ausgenutzte Schwachstelle erlaubt eine Rechteausweitung. Betroffen sind alle unterstützten Versionen…

1 Woche ago