Ratgeber

Barrierefreiheit im Modeshop: Größentabelle, Farbauswahl und Produktbilder

Veröffentlicht am 25. Oktober 2026

Barrierefreiheit im Modeshop heißt vor allem: Größentabelle, Farb- und Größenauswahl, Produktbilder mit Zoom, Größenberater und Retoure müssen ohne Maus, mit Screenreader und ohne Farbsehen funktionieren. Typische Barrieren entstehen an diesen Bausteinen der Produktseite, und sie lassen sich mit überschaubaren Mitteln beheben: eine echte Tabelle statt eines Bildes, Farbnamen statt reiner Farbpunkte, Pfeiltasten neben jeder Wischgeste.

Ob das BFSG für Ihr Angebot gilt und worin sich die Branchen unterscheiden, steht im Überblick BFSG nach Branche: was für Ihren Shop konkret gilt. Dieser Artikel geht für Modeshops in die Tiefe: was an jedem typischen Baustein schiefgeht, welches WCAG-Kriterium dahintersteht und wie Sie es selbst prüfen.

Was das BFSG für Modeshops verlangt

Ein Onlineshop für Verbraucher ist eine Dienstleistung im elektronischen Geschäftsverkehr nach § 1 Abs. 3 Nr. 5 BFSG. Was Sie verkaufen, spielt dafür keine Rolle, wie die Bundesfachstelle in ihrer FAQ zum elektronischen Geschäftsverkehr (Frage 5) bestätigt; Kleidung, Schuhe und Accessoires fallen genauso darunter wie jede andere Ware. Von den Anforderungen ausgenommen sind nach § 3 Abs. 3 BFSG Kleinstunternehmen, die Dienstleistungen erbringen; daneben gibt es nur die eng begrenzten Ausnahmen der § 16 und § 17 BFSG für grundlegende Veränderungen und unverhältnismäßige Belastungen, die Sie beurteilen und dokumentieren müssen.

Technisch verlangt § 12 Nr. 3 BFSGV, dass Webseiten und die zugehörigen Online-Anwendungen wahrnehmbar, bedienbar, verständlich und robust gestaltet sind. § 19 BFSGV ergänzt für Shops Informationen zur Barrierefreiheit der verkauften Produkte, soweit der verantwortliche Wirtschaftsakteur sie bereitstellt, sowie barrierefreie Zahlungs- und Anmeldefunktionen. Nach unserer Lesart betrifft Sie dieser Teil vor allem dann, wenn Sie etwa Smartwatches oder andere Technik im Sortiment haben.

Nach Einschätzung der Bundesfachstelle Barrierefreiheit legen § 12 Nr. 3 BFSGV und Anlage 1 Nr. 2 BFSG nahe, dass „tatsächlich die gesamte Website bzw. App“ die Anforderungen erfüllen muss, nicht nur der Weg zur Kasse (FAQ elektronischer Geschäftsverkehr, Fragen 3 und 6). Größentabelle, Größenberater und Retourenportal gehören damit dazu. Gemessen wird in der Praxis an den WCAG; die Kriterien unten verlinken auf die Erklärungen des W3C zu WCAG 2.2.

Die Bausteine einer Modeseite auf einen Blick

Die Zuordnung der Kriterien zu den Bausteinen ist unsere Empfehlung auf Grundlage der verlinkten Understanding-Dokumente des W3C.

Größentabelle: echte Tabelle statt Bild

Die Größentabelle ist im Modeshop eine zentrale Kaufinformation, und manche Shops zeigen sie als Bild. Ein Bild mit Dutzenden Maßen kann kein Alt-Text sinnvoll wiedergeben. Das Understanding-Dokument zu 1.1.1 Nicht-Text-Inhalt empfiehlt in seinem Beispiel für Diagramme: „Where possible and practical, the actual data is provided in a table.“ Wie Sie ein vorhandenes Tabellenbild beschriften, bis die Tabelle ersetzt ist, zeigt Produktbilder mit Alternativtexten: Vorlage für Shops.

So bauen Sie die Tabelle

1. Echte Tabelle im Shop anlegen, nicht als Bild und nicht als PDF zum Herunterladen. Je nach Shopsystem geht das im Editor der Produktbeschreibung, auf einer eigenen Inhaltsseite oder in einem Inhaltsblock, den Sie allen Produkten einer Kategorie zuweisen.
2. Überschriften als Überschriftenzellen auszeichnen. Die erste Zeile (Größe, Brustumfang, Taillenumfang) und die erste Spalte (S, M, L) sind Kopfzellen. Das W3C beschreibt dafür in seinem Tutorial zu Tabellen mit zwei Kopfbereichen, Kopfzellen als th auszuzeichnen und mit dem Attribut scope festzulegen, ob sie für die Spalte oder die Zeile gelten. Dann liest ein Screenreader zu jedem Wert vor, zu welcher Größe und welchem Maß er gehört (1.3.1).
3. Einheit in die Spaltenüberschrift, etwa „Brustumfang in cm“, statt nur Zahlen in die Zellen.
4. Keine verbundenen oder leeren Zellen für Gestaltung. Eine Tabelle pro Produktgruppe ist besser als eine große Tabelle mit zusammengefassten Bereichen.
5. Tabellentitel ergänzen, zum Beispiel „Größentabelle Damenjacken, Körpermaße in cm“. Das W3C beschreibt dafür das Element caption im Tutorial zu Tabellentiteln.
6. Messanleitung als Text. Steht neben der Tabelle eine Zeichnung, wo Sie messen, schreiben Sie die Anleitung zusätzlich als Text: „Brustumfang: waagerecht an der stärksten Stelle unter den Achseln messen.“

Beispiel (erfundene Werte zur Veranschaulichung): So sieht eine gut lesbare Größentabelle aus.

Auf dem Smartphone

Eine breite Größentabelle darf auf dem Handy seitlich scrollen. WCAG 1.4.10 Reflow verlangt zwar, dass Inhalte bei 320 CSS-Pixeln Breite ohne Scrollen in zwei Richtungen nutzbar sind, nimmt aber Inhalte aus, die eine zweidimensionale Anordnung brauchen; das Understanding-Dokument nennt Datentabellen ausdrücklich: „Tabular data has a Reflow exception.“ Nach unserer Lesart gilt die Ausnahme nur für die Tabelle selbst, nicht für die ganze Produktseite. Achten Sie darauf, dass sich der scrollbare Bereich auch per Tastatur verschieben lässt.

Im Pop-up

Öffnet sich die Größentabelle in einem Fenster über der Seite, prüfen Sie vier Dinge: Der Link „Größentabelle“ ist per Tab erreichbar und mit Enter zu öffnen; der Fokus springt in das Fenster; Escape und eine beschriftete Schaltfläche „Schließen“ beenden es; danach steht der Fokus wieder auf dem Link. Das folgt aus 2.1.1 Tastatur und 2.4.3 Fokusreihenfolge. Dass Screenreader dynamische Änderungen und Interaktionen in modalen Fenstern nicht vollständig wiedergeben, nennt zum Beispiel C&A in seiner Barrierefreiheitserklärung vom 24.04.2026 als bekannte Einschränkung.

Größenberater und Fit-Finder von Drittanbietern

Ein Größenberater empfiehlt aus Körpergröße, Gewicht oder Lieblingsmarke eine Größe. Kommt dieses Widget von einem Drittanbieter, bleiben trotzdem Sie verantwortlich: § 1 Abs. 4 Nr. 4 BFSG nimmt nur Inhalte Dritter aus, die Sie weder finanziert noch entwickelt haben und die nicht Ihrer Kontrolle unterliegen. Nach unserer Lesart trifft das auf ein Widget, das Sie bezahlen und in Ihre Produktseite einbauen, nicht zu.

Fragen Sie den Anbieter schriftlich:

• Gibt es einen Konformitätsbericht (auch ACR oder VPAT genannt) für das Widget, und gegen welche WCAG-Fassung und Stufe wurde geprüft?
• Lässt sich das Widget vollständig per Tastatur öffnen, ausfüllen und schließen?
• Sind alle Eingabefelder beschriftet, und werden Fehler und das Ergebnis vom Screenreader vorgelesen?
• Funktioniert das Widget bei 200 Prozent Zoom und auf einem schmalen Handybildschirm?
• Lassen sich Farben und Schrift an Ihre Kontrastvorgaben anpassen?

Testen Sie selbst in fünf Minuten: Öffnen Sie eine Produktseite, legen Sie die Maus weg und versuchen Sie, nur mit Tab, Enter, Leertaste und Escape eine Größenempfehlung zu bekommen. Bleiben Sie irgendwo hängen oder sehen Sie nicht, wo der Fokus steht, ist das ein Befund für den Anbieter.

Planen Sie eine Alternative ein. Solange der Anbieter nachbessert, sollte die Größentabelle direkt auf der Produktseite erreichbar bleiben. Kann ein Kunde ohne den Berater seine Größe finden, ist der Schaden einer Barriere im Widget kleiner. Nennen Sie das Widget in Ihrer Barrierefreiheitserklärung als bekannte Einschränkung, bis es behoben ist.

Farbauswahl und Swatches

Farbpunkte, sogenannte Swatches, sind auf Modeseiten eine typische Barriere. WCAG 1.4.1 Benutzung von Farbe verlangt: „Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.“ Ein Kunde mit Farbsehschwäche kann zum Beispiel Dunkelgrün und Braun als Punkt womöglich nicht unterscheiden, und ein Screenreader sagt bei einem Punkt ohne Namen nur „Schaltfläche“.

Ein Beispiel aus der Praxis: Bergzeit nennt in seiner Erklärung zur Barrierefreiheit (letzte Aktualisierung 05.03.2026) als bekannten Mangel, dass die Farbauswahl-Elemente in der Produktübersicht nicht für alle assistiven Technologien optimal beschriftet sind.

So machen Sie die Farbauswahl barrierefrei:

1. Jeder Swatch hat einen Namen, den ein Screenreader vorliest, zum Beispiel „Farbe Dunkelgrün“. Nach 4.1.2 Name, Rolle, Wert braucht jedes Bedienelement einen Namen, der sich technisch auslesen lässt.
2. Die gewählte Farbe steht als Text auf der Seite, etwa „Farbe: Dunkelgrün“ über den Swatches. Dann sehen auch Kunden ohne Farbsehen, was sie gewählt haben.
3. Die Auswahl ist nicht nur an der Farbe erkennbar. Ein Rahmen, ein Haken oder eine Unterstreichung zeigt den gewählten Swatch. Dieser Hinweis braucht nach 1.4.11 Nicht-Text-Kontrast mindestens 3:1 zu den angrenzenden Farben. Ein heller Swatch auf weißem Grund braucht zusätzlich einen Rand. Wie Sie Kontraste messen, zeigt Farbkontrast nach WCAG prüfen: 4,5:1 erklärt.
4. Der Zustand ist für Screenreader gesetzt. Nach 4.1.2 muss auch der Zustand „ausgewählt“ technisch auslesbar sein und eine Änderung mitgeteilt werden.
5. Derselbe Farbname überall: in der Auswahl, im Alt-Text des Variantenbilds, im Warenkorb und auf der Rechnung. Ein „Petrol“ in der Auswahl und ein „Blau“ im Warenkorb verunsichert jeden.
6. Bei gemusterten Stoffen beschreibt der Name das Muster: „Marineblau mit weißen Streifen“ statt „Muster 3“.

Größenauswahl: ausverkauft, nur noch wenige, vergessen

• Ausverkaufte Größen sind manchmal nur hellgrau oder durchgestrichen. Ergänzen Sie einen Text wie „ausverkauft“ oder „nicht verfügbar“, der auch vorgelesen wird (1.4.1, 1.3.1). Gibt es eine Funktion „Benachrichtigen, wenn verfügbar“, muss sie per Tastatur erreichbar sein.
• „Nur noch 2 Stück“ gehört als Text in die Seite, nicht nur als orangefarbener Punkt.
• Größe vergessen: Klickt ein Kunde auf „In den Warenkorb“, ohne eine Größe zu wählen, muss eine Meldung im Text sagen, was fehlt, etwa „Bitte wählen Sie eine Größe“. Ein roter Rahmen um die Größenknöpfe allein reicht nach 3.3.1 Fehlererkennung nicht.
• Knopfgröße: Stehen Größenknöpfe eng nebeneinander, gilt 2.5.8: Es verlangt mindestens 24 mal 24 CSS-Pixel oder genug Abstand zum nächsten Knopf.
• Größe in den Warenkorb übernehmen: Bestätigt der Shop „Artikel in Größe M wurde in den Warenkorb gelegt“, muss ein Screenreader die Meldung ansagen, ohne dass der Fokus springt (4.1.3). Wie es danach im Warenkorb weitergeht, zeigt Barrierefreier Checkout: Warenkorb und Kaufstrecke prüfen.

Produktbilder, Zoom und 360-Grad-Ansicht

Wie Sie Alt-Texte für Hauptbild, Rückansicht, Detail, Farbvariante und Modelbild formulieren, steht ausführlich in Produktbilder mit Alternativtexten. Für Modeshops kommt hinzu: Material, Schnitt und Passform sind die Informationen, die ein Kunde ohne Bild sonst nicht bekommt. Schreiben Sie sie zusätzlich als Text in die Beschreibung, etwa „Model ist 1,78 m groß und trägt Größe S“ und „Stoff: 100 Prozent Baumwolle, leicht transparent“.

Zoom-Lupe beim Darüberfahren. Manche Shops zeigen beim Bewegen der Maus über das Bild eine vergrößerte Ansicht, die die Beschreibung daneben verdeckt. Erscheint Inhalt beim Darüberfahren oder beim Fokus, verlangt 1.4.13 Inhalt bei Hover oder Fokus, dass er sich ohne Bewegen der Maus schließen lässt, wenn er anderen Inhalt verdeckt, und dass er sichtbar bleibt, solange man mit dem Zeiger darauf ist. Nach unserer Lesart ist die einfachste Lösung, die Vergrößerung per Klick oder Taste zu öffnen, in einem Fenster mit Schaltfläche „Schließen“. Dann funktioniert sie auch per Tastatur (2.1.1).

Wischen und Spreizen. Lässt sich die Bildergalerie nur durch Wischen weiterschalten oder das Bild nur mit zwei Fingern vergrößern, braucht es nach 2.5.1 Zeigergesten eine Alternative mit einem einzigen Tippen. Das W3C nennt als Beispiel für ein Karussell Schaltflächen an den Rändern, mit denen man zwischen den Bildern wechselt. Für das Vergrößern reichen Schaltflächen „Vergrößern“ und „Verkleinern“.

360-Grad-Ansicht. Ein Produkt, das man nur durch Ziehen dreht, fällt unter 2.5.7 Ziehbewegungen: Was per Ziehen geht, muss auch mit einem einzelnen Zeiger ohne Ziehen gehen, etwa mit Pfeilschaltflächen „nach links drehen“ und „nach rechts drehen“, die auch per Tastatur funktionieren. Dreht sich das Modell automatisch und länger als fünf Sekunden, verlangt 2.2.2 Pausieren, Beenden, Ausblenden eine Möglichkeit zum Anhalten.

Videos. Hat ein Laufsteg- oder Produktvideo keinen Ton, gilt es als reines Video. Für reine Videos ohne Ton verlangt 1.2.1 eine Alternative, die die gleiche Information vermittelt, zum Beispiel einen kurzen Text: „Model läuft drei Schritte und dreht sich; das Kleid fällt locker bis zum Knie.“ Videos mit gesprochenem Text brauchen Untertitel (1.2.2). Starten Videos von selbst und laufen länger als fünf Sekunden, brauchen sie eine Pause-Schaltfläche (2.2.2).

Filter nach Größe und Farbe

Größe und Farbe sind im Modeshop zentrale Filter. Drei Punkte prüfen Sie zuerst:

• Farbfilter haben Namen. Ein Farbkreis allein genügt nicht; neben oder in jedem Filter steht der Farbname als Text (1.4.1).
• Filter sind echte Kontrollkästchen oder Schaltflächen mit Zustand, damit ein Screenreader „Größe M, ausgewählt“ ansagt (4.1.2).
• Die Trefferzahl wird angesagt, wenn sich die Liste nach einem Filter ändert (4.1.3).

Achten Sie außerdem auf Rabatte in der Produktliste: Ein Sale-Preis, der sich nur durch rote Farbe vom normalen Preis unterscheidet, verstößt gegen 1.4.1. Ein durchgestrichener alter Preis mit einem Text wie „statt“ vor dem alten Preis oder ein Etikett „reduziert“ löst das.

Retouren und Widerrufsbutton

Läuft die Rücksendung über ein Retourenportal oder ein Formular im Kundenkonto, gehört dieser Weg nach unserer Lesart zur Website, die nach Einschätzung der Bundesfachstelle als Ganzes die Anforderungen erfüllen muss. Prüfen Sie im Portal dieselben Punkte wie im Checkout: beschriftete Felder für Bestellnummer und E-Mail (3.3.2), verständliche Fehlermeldungen (3.3.1), Auswahl der Artikel und des Rücksendegrunds per Tastatur, und ein Retourenetikett, das sich auch ohne Maus herunterladen lässt.

Seit dem 19. Juni 2026 müssen Shops bei Verträgen mit Widerrufsrecht zusätzlich eine elektronische Widerrufsfunktion anbieten, wie das Europäische Verbraucherzentrum Deutschland zusammenfasst. Nach § 356a BGB ist sie gut lesbar mit „Vertrag widerrufen“ oder einer gleichbedeutenden eindeutigen Formulierung zu beschriften, während der Widerrufsfrist ständig verfügbar, „hervorgehoben platziert und für den Verbraucher leicht zugänglich“. Danach folgt eine Bestätigungsfunktion, etwa „Widerruf bestätigen“. Nach unserer Lesart ist dieser Button Teil Ihrer Website und muss deshalb auch per Tastatur und Screenreader bedienbar sein; eine Schaltfläche, die nur als Bild oder nur per Maus funktioniert, wäre für einen Teil Ihrer Kunden nicht „leicht zugänglich“.

Checkliste: eine Produktseite in 15 Minuten prüfen

Nehmen Sie Ihren meistverkauften Artikel mit mehreren Farben und Größen und gehen Sie die Liste durch.

1. Tastatur: Maus weglegen. Erreichen Sie mit Tab Farbauswahl, Größenauswahl, Größentabelle, Größenberater, Bildergalerie und „In den Warenkorb“? Sehen Sie immer, wo der Fokus steht?
2. Farbe: Steht die gewählte Farbe als Text auf der Seite? Erkennen Sie die Auswahl auch, wenn Sie den Bildschirm in den Graustufenmodus Ihres Betriebssystems schalten?
3. Ausverkauft: Ist eine ausverkaufte Größe durch Text gekennzeichnet, nicht nur durch Grau?
4. Fehler: Was passiert, wenn Sie ohne Größe auf „In den Warenkorb“ klicken? Erscheint eine Meldung im Text?
5. Größentabelle: Ist sie eine echte Tabelle? Prüfen Sie es, indem Sie versuchen, einen einzelnen Wert mit der Maus zu markieren. Geht das nicht, ist es ein Bild.
6. Zoom und Galerie: Lassen sich Bilder ohne Wischen und ohne Mausbewegung wechseln und vergrößern? Gibt es bei der 360-Grad-Ansicht Schaltflächen?
7. Vergrößerung: Zoomen Sie den Browser auf 200 Prozent. Ist noch alles bedienbar, und überdeckt nichts die Auswahl (1.4.4)?
8. Screenreader, kurz: Schalten Sie VoiceOver (Mac, iPhone) oder NVDA (Windows) ein und wählen Sie eine Farbe. Hören Sie den Farbnamen und „ausgewählt“?
9. Retoure: Kommen Sie auf Ihrer Website per Tastatur bis zum Button „Vertrag widerrufen“ und im Kundenkonto zum Retourenformular?

Notieren Sie jeden Befund mit Seite, Baustein und Kriterium. Was Sie nicht sofort beheben, gehört als bekannte Einschränkung in Ihre Barrierefreiheitserklärung; wie die aussieht, zeigt das Muster für die Barrierefreiheitserklärung im Onlineshop. Die Pflicht dazu folgt aus § 14 Abs. 1 Nr. 2 BFSG mit Anlage 3 BFSG.

Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.

Ihr nächster Schritt

Der kostenlose Scan prüft ohne Anmeldung Ihre Startseite, eine Produktseite und den Warenkorb automatisch gegen die WCAG-Regeln und zeigt, was zuerst behoben werden sollte. Fehlende Namen an Swatches oder Bilder ohne Alt-Text kann ein automatischer Scan erkennen; ob eine Zoom-Lupe per Tastatur bedienbar ist oder ein Größenberater den Fokus festhält, prüfen Sie mit der Checkliste oben von Hand, denn ein automatischer Scan findet nur einen Teil aller Barrieren.

Stand: 25.10.2026. Quellen gelesen am 25.10.2026.