Ratgeber

Tabellen im Shop barrierefrei: Größentabellen, Vergleiche, Versandkosten

Veröffentlicht am 29. Oktober 2026

Barrierefreie Tabellen im Shop sind echte HTML-Tabellen, deren Kopfzellen als th ausgezeichnet sind, mit scope sagen, ob sie für eine Spalte oder eine Zeile gelten, und einen Titel als caption tragen. Dann liest ein Screenreader zu jedem Wert in Größentabelle, Produktvergleich, technischen Daten oder Versandkosten vor, zu welcher Zeile und Spalte er gehört; auf dem Smartphone darf die Tabelle dafür in einem eigenen Bereich seitlich scrollen.

Dieser Artikel zeigt für vier typische Shop-Tabellen den passenden Aufbau mit Code, eine Entscheidungstabelle, wann Sie überhaupt eine Tabelle brauchen, den Weg im Editor von Shopify und WordPress, soweit die Herstellerdoku ihn beschreibt, einen Screenreader-Test in fünf Minuten und eine Checkliste. Welche Rolle die WCAG insgesamt für Ihren Shop spielen, erklärt unser Überblick WCAG 2.2 für Onlineshops.

Welche WCAG-Kriterien für Tabellen gelten

Drei Erfolgskriterien der WCAG 2.2 treffen Tabellen direkt:

Der Normtext von 1.3.1 lautet: „Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.“ Das Understanding-Dokument nennt als Fall ausdrücklich Tabellen, bei denen „the relationship of each cell to its row and/or column header are necessary for understanding“. Genau das ist eine Größentabelle: Die Angabe 68 bis 72 bedeutet nichts, solange man nicht weiß, dass sie zu Größe S und zum Taillenumfang gehört.

Als Techniken für 1.3.1 nennt das W3C unter anderem H51 „Using table markup to present tabular information“, H39 für caption, H63 für scope und H43 für id und headers. Als Fehler führt es unter anderem F91 „for not correctly marking up table headers“ und F46 für Kopfzellen und Titel in Layout-Tabellen (Understanding 1.3.1).

Wo Größentabellen im Modeshop sonst noch hängen, etwa im Pop-up oder neben dem Größenberater, steht in Barrierefreiheit im Modeshop. Hier geht es um die Tabelle selbst, für alle Branchen.

Tabelle oder nicht? Die Entscheidung vorab

Das W3C formuliert die Grundregel im Tables Tutorial: „Data tables are used to organize data with a logical relationship in grids.“ Und: „As a general rule, tables aren’t meant to be used for layout purposes.“ Für Gestaltung empfiehlt es CSS.

Wenn Sie eine Tabelle nur für das Aussehen benutzen, geben Sie ihr keine Kopfzellen und keinen Titel. Genau das wertet F46 als Fehler: Eine Layout-Tabelle mit th, caption oder nicht leerem summary verstößt gegen 1.3.1. Unsere Empfehlung: Bauen Sie Layout-Tabellen ganz aus, statt sie zu reparieren. Ein Screenreader wie NVDA hat sogar eine eigene Einstellung „Include layout tables“, mit der er solche Tabellen wie echte Tabellen ansagt (NVDA-Benutzerhandbuch, Abschnitt „Browse Mode“); bei Nutzern mit dieser Einstellung wird Ihre Gestaltung also zu einer verwirrenden Tabelle.

Die vier Shop-Tabellen richtig auszeichnen

Die Bausteine sind immer dieselben, laut W3C Tables Tutorial: „Header cells must be marked up with <th>, and data cells with <td> to make tables accessible.“ Das Attribut scope legt fest, ob eine Kopfzelle für ihre Spalte (col) oder ihre Zeile (row) gilt (Tables with two headers). Der Titel steht in caption, das „is placed directly as a child of the <table> element“ und „functions like a heading for a table“ (Caption & Summary).

Brauchen Sie scope auch bei einer einfachen Tabelle mit nur einer Kopfzeile? Das W3C hält die Auszeichnung ohne scope nur bei einer sehr kleinen Tabelle für vertretbar, deren Spalten sich inhaltlich klar unterscheiden, und weist darauf hin, dass manche Screenreader selbst dann falsch vorlesen, weil „the direction of the <th> elements is ambiguous“; für größere Tabellen sei scope „also needed“ (Tables with one header). Unsere Empfehlung: Setzen Sie scope immer. Es kostet nichts.

Größentabelle: Kopfzeile und Kopfspalte

Die erste Zeile nennt die Maße, die erste Spalte die Größen. Beides sind Kopfzellen.

Die Werte sind erfunden und dienen nur der Veranschaulichung. Schreiben Sie die Einheit in die Spaltenüberschrift, dann hört der Screenreader-Nutzer sie bei jedem Wert mit. Bieten Sie Größen in zwei Systemen an (etwa EU und US), wird daraus eine zweite Kopfspalte mit scope="row", keine verbundene Zelle.

Produktvergleich: Modelle als Spalten, Merkmale als Zeilen

Ein Vergleich von drei Akkuschraubern hat die Modellnamen in der Kopfzeile (scope="col") und die Merkmale wie „Akkuspannung in V“, „Gewicht in kg“, „Koffer enthalten“ in der Kopfspalte (scope="row"). Zwei Fehler sind in Vergleichstabellen typisch:

• Häkchen und Kreuze als Symbol ohne Text. Ein grünes Häkchen als Bild oder Icon braucht einen Textwert wie „ja“ oder „nein“, sichtbar oder als Alternativtext. Sonst ist die Zelle für den Screenreader leer (1.1.1 Nicht-Text-Inhalt). Unterscheiden sich Häkchen und Kreuz nur durch Grün und Rot, kommt 1.4.1 Benutzung von Farbe hinzu.
• Leere Zellen. Schreiben Sie „keine Angabe“ oder „nicht verfügbar“, damit niemand rätselt, ob die Zelle vergessen wurde. Das ist unsere Empfehlung; eine leere Zelle selbst verbietet kein Kriterium.

Steht der Button „In den Warenkorb“ in der letzten Zeile, braucht er einen eindeutigen Namen. Drei Buttons mit dem gleichen Text „Kaufen“ sind beim Durchtabben nicht unterscheidbar; unsere Empfehlung ist ein Name, der das Modell nennt.

Technische Daten: die zweispaltige Tabelle

Datenblätter auf der Produktseite sind meist Paare aus Merkmal und Wert. Die linke Zelle ist eine Kopfzelle der Zeile:

Auch hier sind die Werte ein Beispiel. Tabellen in PDF-Dateien folgen eigenen Regeln, die PDF/UA im Onlineshop erklärt.

Versandkostentabelle: zwei Kopfbereiche und verbundene Überschriften

Eine einfache Versandkostentabelle hat Länder als Zeilen und Versandarten als Spalten, also wieder scope="col" und scope="row". Komplizierter wird es, wenn eine Überschrift mehrere Spalten überspannt, etwa „Standard“ und „Express“ mit jeweils „Preis“ und „Lieferzeit“ darunter.

Für diesen Fall beschreibt das W3C im Tutorial zu unregelmäßigen Kopfzellen: Die überspannende Kopfzelle bekommt colspan="2" und scope="colgroup", und die Spalten werden vorher mit col und colgroup gruppiert.

Preise und Lieferzeiten sind Beispielwerte. Unsere Erwartung: Ein Screenreader nennt dann zur Zelle „9,90 €“ die Überschriften Deutschland, Express und Preis.

Wann headers und id nötig sind

Lässt sich eine Datenzelle nicht mehr eindeutig über Zeile und Spalte zuordnen, etwa weil sich die Spaltenköpfe innerhalb der Tabelle ändern oder weil zu einer Zelle drei und mehr Kopfzellen gehören, verknüpfen Sie sie ausdrücklich: Jede Kopfzelle bekommt eine eindeutige id, und jede Datenzelle zählt in headers die ids ihrer Kopfzellen auf, getrennt durch Leerzeichen (Tables with multi-level headers). Das W3C schreibt aber selbst: „In many cases, it is worth considering to restructure the information in such tables“, und weist darauf hin, dass einfache Tabellen von Editoren besser unterstützt werden.

Unsere Einschätzung für Shops: Wenn Sie bei headers und id ankommen, teilen Sie die Tabelle auf. Eine Versandkostentabelle je Zone oder eine Größentabelle je Produktgruppe ist für alle Kunden leichter zu lesen und bleibt im Editor pflegbar. Eine Tabelle mit headers muss nach jeder Änderung wieder von Hand stimmen, und ein falscher Verweis ist nach F90 („incorrectly associating table headers and content“) ein Fehler unter 1.3.1.

Tabelle als Bild: warum und wie Sie es ablösen

Viele Shops laden Größen- oder Versandtabellen als Grafik hoch, weil es schneller geht. 1.4.5 Bilder von Text verlangt jedoch: Wenn die Technik die Darstellung erreichen kann, wird „text is used to convey information rather than images of text“; Ausnahmen gelten nur, wenn sich das Bild an die Bedürfnisse des Nutzers anpassen lässt oder die Darstellung wesentlich ist. Für eine Tabelle mit Zahlen trifft nach unserer Lesart keine Ausnahme zu. Dazu kommen praktische Nachteile: Die Grafik wird beim Vergrößern unscharf, sie bricht auf dem Smartphone nicht um, und kein Alt-Text kann dreißig Werte sinnvoll wiedergeben.

So lösen Sie sie ab:

1. Werte aus der Vorlage übernehmen, aus der die Grafik entstanden ist, zum Beispiel aus der Tabellenkalkulation.
2. Tabelle im Editor neu anlegen (Wege unten) und die Kopfzellen auszeichnen.
3. Grafik entfernen. Behalten Sie sie nicht zusätzlich, sonst pflegen Sie zwei Stände.
4. Übergangsweise, bis die Tabelle steht, braucht die Grafik eine Textalternative. Bei vielen Werten hilft eine kurze Beschreibung im Alt-Text und die Werte als Text direkt darunter.

Auf dem Smartphone: Reflow ohne Informationsverlust

1.4.10 Reflow nimmt Inhalte aus, die eine zweidimensionale Anordnung brauchen: „Except for parts of the content which require two-dimensional layout for usage or meaning.“ Das Understanding-Dokument sagt dazu: „Tabular data has a Reflow exception.“ Drei Punkte aus demselben Dokument sind für Shops wichtig:

• Die Tabelle scrollt in ihrem eigenen Bereich. Das W3C zeigt als bestandene Lösung eine Tabelle, die „rendered within a scrollable container“ ist, und als Fehler den Fall „a table is not rendered within its own scrollable container“. Scrollt die ganze Produktseite seitlich, weil die Tabelle zu breit ist, ist das nur dann in Ordnung, wenn alles andere auf der Seite trotzdem umbricht und ohne seitliches Scrollen lesbar bleibt. Sicherer und für Kunden angenehmer ist ein eigener Scrollbereich für die Tabelle.
• Alles um die Tabelle herum muss umbrechen. Überschrift, Erklärtext, Filter und Navigation neben der Tabelle sind nicht ausgenommen.
• Die einzelnen Zellen müssen weiter umbrechen, außer ihr Inhalt braucht selbst eine zweidimensionale Anordnung.

So setzen Sie das um, unsere Empfehlung:

1. Container um die Tabelle mit overflow-x: auto im CSS, damit nur die Tabelle seitlich scrollt.
2. Container per Tastatur erreichbar machen, mit tabindex="0", damit sich der Bereich auch mit den Pfeiltasten verschieben lässt (2.1.1 Tastatur). Ein fokussierbarer Bereich braucht dann einen Namen, etwa mit role="region" und aria-labelledby, das auf die caption zeigt. Wie solche ARIA-Attribute richtig sitzen, erklärt ARIA und Barrierefreiheit im Onlineshop.
3. Erste Spalte fixieren (etwa mit position: sticky) ist eine Komfortlösung: Die Größe bleibt sichtbar, während die Maße scrollen.
4. Tabellen, die auf Karten umgebaut werden, also Zeilen, die auf dem Handy als untereinanderstehende Blöcke erscheinen, sind möglich, aber riskant. Das Understanding-Dokument nennt diesen Umbau nur als mögliche künftige Technik, ohne ihn zu beschreiben. Unsere Einschätzung: Prüfen Sie nach jedem Umbau per CSS mit dem Screenreader, ob die Tabelle noch als Tabelle angesagt wird und jede Zahl ihre Überschrift behält. Bei einer zweispaltigen Tabelle mit technischen Daten ist der Umbau meist unnötig; sie passt in der Regel auch schmal.
5. Nichts ausblenden. Spalten, die auf dem Handy einfach verschwinden, sind Informationsverlust. Wenn Sie kürzen, dann mit einer vollständigen Fassung, die erreichbar bleibt.

Selbst testen: Stellen Sie das Browserfenster auf 1280 CSS-Pixel Breite und zoomen Sie auf 400 Prozent; das entspricht laut Understanding-Dokument 320 CSS-Pixeln. Lässt sich alles außer der Tabelle ohne seitliches Scrollen lesen, ist das in Ordnung; am besten scrollt nur die Tabelle.

Im Editor von Shopify und WordPress

Was die Herstellerdokumentation beschreibt, reicht für eine Tabelle, aber nicht vollständig für eine barrierefreie.

Shopify. Laut Shopify-Hilfe zum Rich-Text-Editor fügen Sie Tabellen in Blogbeiträgen, Seiten, Produkt- und Kollektionsbeschreibungen über die Schaltfläche „Insert table“ (im englischen Admin) ein; dieselbe Schaltfläche bietet danach „Insert row above“, „Insert row below“, „Insert column before“, „Insert column after“, „Delete row“, „Delete column“ und „Delete table“. Eine Einstellung für Kopfzellen oder einen Tabellentitel nennt der Artikel nicht. Den HTML-Code erreichen Sie dort über das Code-Symbol „Edit code“. Unser Weg: Tabelle anlegen und Werte eintragen, dann in die Code-Ansicht wechseln und die Kopfzellen von td auf th mit scope ändern und eine caption ergänzen. Kontrollieren Sie danach im Shop, ob der Code erhalten geblieben ist.

WordPress und WooCommerce. Der Tabellen-Block des Blockeditors bietet laut WordPress-Dokumentation in der Werkzeugleiste „Add or remove caption“ und „Edit table“, in den Block-Einstellungen „Header section“ und „Footer section“. „Header section“ fügt der Tabelle einen Kopfbereich hinzu. Eine Einstellung für eine Kopfspalte (die Größen S, M, L oder die Merkmalsnamen) nennt die Doku nicht. Die Doku erinnert selbst daran, dass Tabellen für tabellarische Daten gedacht sind und nicht für Gestaltung, und verweist für Spalten auf den Spalten-Block. Unser Weg: „Header section“ einschalten, „Add or remove caption“ für den Titel nutzen, und für eine Kopfspalte den HTML-Code des Blocks bearbeiten (einen eigenen Weg dafür beschreibt die Tabellen-Doku nicht) oder die Tabelle in eine zweispaltige Form bringen, die ohne Kopfspalte verständlich bleibt. Ob Ihre WooCommerce-Produktbeschreibung den Blockeditor oder einen anderen Editor nutzt, hängt von Ihrer Einrichtung ab; die WooCommerce-Doku zum Anlegen von Produkten nennt dazu keine Tabellenfunktion.

Größentabellen-Apps und Plugins. Viele Shops nutzen eine Erweiterung für Größentabellen. Prüfen Sie deren Ausgabe genauso wie eine selbst gebaute Tabelle mit den Schritten unten; die Verantwortung bleibt bei Ihnen.

Screenreader-Test der Tabelle in fünf Minuten

Sie brauchen dafür NVDA (kostenlos, Windows) oder VoiceOver (Mac). Wie Sie beide starten, steht in unserem Screenreader-Test mit NVDA und VoiceOver.

Mit NVDA:

1. Seite mit der Tabelle öffnen, NVDA starten.
2. Taste T drücken: Sie springt laut NVDA-Benutzerhandbuch zur nächsten Tabelle. Unsere Erwartung: NVDA sagt die Tabelle und den Titel aus der caption an. Kein Titel? Dann fehlt meist die caption.
3. Mit Strg + Alt + Pfeiltasten von Zelle zu Zelle gehen (laut Handbuch: nächste und vorherige Spalte oder Zeile; Strg + Alt + Pos1 und Ende springen zur ersten und letzten Spalte).
4. Zur nächsten Spalte wechseln: Unsere Erwartung: NVDA sagt die Spaltenüberschrift mit an, etwa „Taillenumfang in cm, 73 bis 77“.
5. Zur nächsten Zeile wechseln: Jetzt kommt die Zeilenüberschrift mit, etwa „M“.
6. Hören Sie nur Zahlen ohne Überschrift, sind die Kopfzellen meist nicht als th ausgezeichnet; bei Tabellen mit Kopfzeile und Kopfspalte kann auch scope fehlen. Wird gar keine Tabelle gefunden, ist es ein Bild oder ein Nachbau aus div-Elementen.

Ob NVDA Überschriften ansagt, hängt auch von seiner Einstellung „Row/column headers“ in den Dokumentformatierungen ab (NVDA-Benutzerhandbuch). Hören Sie keine Überschriften, prüfen Sie zuerst diese Einstellung und vergleichen Sie mit einer sicher richtigen Tabelle, etwa den Beispielen im W3C Tables Tutorial.

Mit VoiceOver auf dem Mac: Apple beschreibt die Navigation in Tabellen auf Webseiten: In Tabellen mit Gruppierung springt VO-Start zur ersten und VO-Ende zur letzten Zelle; in Tabellen ohne Gruppierung kommen Sie mit VO-Command-Y zur nächsten Spalte (VO-Command-Umschalt-Y zur vorherigen). Die VO-Taste ist standardmäßig Control und Option zusammen oder die Feststelltaste.

Ohne Screenreader, als Schnelltest: Versuchen Sie, einen einzelnen Wert der Tabelle mit der Maus zu markieren. Geht das nicht, ist es wahrscheinlich ein Bild; prüfen Sie es mit „Untersuchen“. Rechtsklick auf eine Kopfzelle, „Untersuchen“: Im Code muss th stehen, nicht td.

Checkliste: jede Tabelle im Shop prüfen und beheben

Gehen Sie Größentabellen, Vergleichstabellen, technische Daten, Versandkosten, Nährwerte und Rabattstaffeln durch.

Prüfen, ob es eine Tabelle sein muss

• Jede Tabelle enthält Daten, die von Zeile und Spalte abhängen; Gestaltungstabellen sind durch Spalten-Bausteine oder Listen ersetzt.
• Keine Layout-Tabelle enthält th, caption oder ein nicht leeres summary.
• Keine Tabelle ist als Bild oder nur als PDF eingebunden.

Aufbau

• Jede Tabelle hat eine caption, die sagt, was sie zeigt, mit Einheit oder Stand, wo nötig.
• Spaltenüberschriften sind th mit scope="col".
• Zeilenüberschriften (Größe, Merkmal, Land) sind th mit scope="row".
• Überspannende Überschriften haben scope="colgroup" oder scope="rowgroup", oder die Tabelle ist aufgeteilt.
• Wo headers und id verwendet werden, zeigt jeder Verweis auf eine vorhandene Kopfzelle derselben Tabelle.
• Keine verbundenen oder leeren Zellen nur zur Gestaltung; leere Datenzellen haben einen Text wie „keine Angabe“. Die leere Eckzelle oben links ist in Ordnung.
• Symbole wie Häkchen haben einen Textwert.
• Einheiten stehen in den Überschriften.

Mobil und Zoom

• Bei 400 Prozent Zoom auf 1280 CSS-Pixel Breite lässt sich alles außer der Tabelle ohne seitliches Scrollen lesen; am besten scrollt nur die Tabelle in ihrem eigenen Bereich.
• Der scrollbare Bereich lässt sich per Tastatur erreichen und verschieben und hat einen Namen.
• Auf dem Handy fehlt keine Spalte.
• Nach einem Umbau zu Karten sagt der Screenreader noch jede Überschrift an.

Test

• NVDA findet die Tabelle mit T und sagt den Titel an.
• Beim Wechsel von Zelle zu Zelle werden Zeilen- und Spaltenüberschrift angesagt.
• Nach jedem Theme-Update, App-Update oder Editor-Speichern ist das th-Markup noch da.
• Befund je Tabelle notiert: Seite, Tabelle, Fehler, Kriterium, erledigt am.

Ihr nächster Schritt

Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Als automatische Prüfung findet er nur einen Teil der Barrieren; ob jede Zahl in Ihrer Größentabelle mit ihrer Überschrift angesagt wird und ob die Tabelle auf dem Handy vollständig bleibt, prüfen Sie selbst mit der Checkliste oben.

Stand: 29.10.2026. Quellen gelesen am 29.10.2026.