Gitter oder kein Gitter

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Sarah Higley beschäftigt sich mit Barrierefreiheit und stellt fest, dass „Tabellen und Gitter bei Barrierefreiheitsproblemen überrepräsentiert sind.“

Es ist schon hundertmal gesagt worden: Verwende kein <table> für Layouts. Aber was man sät, das erntet man auch. Was ist der Rang-1-Punkt in einer Liste von „einigen der Wege, wie Tabellen und Gitter schiefgehen können“?

Eine Gitterstruktur verwenden, wenn eine Tabelle benötigt wird, oder umgekehrt

Der Tag ist gekommen. CSS Grid hat sich so tief in die Praxis eingeschlichen, dass Entwickler es standardmäßig anstelle einer klassischen <table> verwenden. Und wir haben noch nicht einmal fliegende Autos!

Sarah zeigt klare Beispiele für beide Techniken und wie dieselben Informationen visuell und semantisch unterschiedlich dargestellt werden können. Zum Beispiel kann eine Liste kommender Konzerte als <table> angezeigt werden, und das mag in Ordnung sein, wenn man sich den Zweck der Tabelle zum Sortieren oder Vergleichen vorstellen kann. Sie kann aber auch als Gitterstruktur dargestellt werden, was andere Vorteile hat, wie z.B. Überschriften, die leichter zu überfliegen sind.

Direkter Link →