Seite kopieren

Barrierefreiheit

Zuletzt geändert am 17. Oktober 2026

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28.06.2025 auch für den elektronischen Geschäftsverkehr. Praktischer Maßstab für Onlineshops ist WCAG 2.1 AA. Kleinstunternehmen sind ausgenommen, für einen Referenzshop ist die Konformität trotzdem der richtige Anspruch.

Prüfung

Automatisiert mit axe-core gegen die Regelsätze wcag2a, wcag2aa, wcag21a und wcag21aa auf Startseite, Kategorie, Produktseite, Warenkorb, Kasse mit gefülltem Warenkorb, Kundenkonto und Bestellbestätigung.

Ergebnis: keine Verstöße. Übrig bleibt nur ein Befund in der WordPress-Adminleiste, die ausschließlich angemeldete Redakteure sehen.

Behobene Kontrastfehler

Alle Kontrastprobleme gingen auf drei Werte der Farbpalette zurück. Eine Korrektur am Design-Token hat jeweils alle Vorkommen erledigt:

Token	vorher	Kontrast	jetzt	Kontrast
Akzent (weiße Schrift darauf)	#D9502E	4,09:1	#CC4726	4,67:1
gedämpfter Text auf Weiß	#8A7D73	3,99:1	#74675D	5,47:1
Erfolg auf hellgrüner Fläche	#2F7A4F	4,23:1	#2A6E47	4,97:1

Drei weitere Fälle kamen nicht von der Farbe, sondern von Transparenz oder fremden Werten:

• Storefront legt opacity: 0.65 auf durchgestrichene Preise (2,69:1). Der alte Preis ist nach § 11 PAngV eine Pflichtangabe und muss lesbar sein.
• Der Warenkorb-Block bringt eine eigene, zu blasse Farbe mit.
• Text mit 80 % Weiß auf der Akzentfläche (3,52:1).

Transparenz prüfen

opacity auf einem Element senkt auch den Kontrast aller Kinder. Ein Hinweis, der innerhalb eines ausgegrauten Bereichs steht, ist damit schnell unter 4,5:1.

Behobene Strukturfehler

• Verschachtelte Landmarks: Eine Filterspalte als <aside> mit Storefronts <aside id="secondary"> darin ergibt zwei namenlose complementary-Bereiche ineinander. Jetzt ein <div> mit benannten <section>-Bereichen („Kategorie", „Verfügbarkeit").
• Inhalte außerhalb von Landmarks: obere Leiste und Archiv-Kopf sind jetzt benannte Bereiche.
• Sprunglink ins Leere: Storefronts „Zur Navigation springen" zeigt fest auf #site-navigation. Ersetzt man die Navigation, existiert das Ziel nicht mehr. axe meldet das nicht, es prüft nur, ob der Link da ist, nicht ob das Ziel existiert.
• Ungültiges autocomplete: Der Checkout-Block setzt am E-Mail-Feld section-contact contact email. Nach section-* sind nur shipping oder billing erlaubt, die ganze Angabe ist damit unwirksam (WCAG 1.3.5). Korrigiert per MutationObserver, der das ganze Dokument beobachtet, weil der Block erst nach DOMContentLoaded rendert.

Von Hand geprüft

• Galerie-Lightbox als <dialog>: Fokus springt hinein, Escape schließt, Pfeiltasten blättern, der Fokus kehrt zum Bild zurück. Fokusfalle und Rückgabe kommen vom Browser.
• Produktfilter: alle Checkboxen beschriftet und per Tastatur erreichbar, ohne JavaScript übernimmt ein Absenden-Knopf im <noscript>.
• Mengenwähler: beide Knöpfe mit aria-label, das Feld beschriftet.
• Fokusring: nur bei Mausbedienung unterdrückt (:focus:not(:focus-visible)), bei Tastaturbedienung immer sichtbar.
• EU-Gewährleistungshinweis: Germanized öffnet ihn als Tooltip schon beim Überfahren, der Auslöser ist ein Link auf die Grafik. Jetzt öffnet ein Knopf einen Dialog mit Überschrift und „Schließen“, der Fokus springt hinein und zurück, Escape schließt. Auf 390 px bleibt die Grafik lesbar und lässt sich seitlich scrollen. Einzelheiten unter Rechtliches.

Hinweise und Tooltips

Hinweise, die nur beim Überfahren mit der Maus erscheinen, sind per Tastatur nicht erreichbar. Nach WCAG 1.4.13 muss ein Tooltip per Maus, Fokus und Antippen öffnen, stehen bleiben, solange Zeiger oder Fokus darauf sind, mit der Maus erreichbar sein und sich mit Escape schließen lassen. Informationen, die man zum Verstehen braucht, gehören sichtbar auf die Seite statt in einen Tooltip.

Offen

• Kein Test mit echten Screenreadern (NVDA, VoiceOver). Automatische Prüfungen decken erfahrungsgemäß nur einen Teil der Kriterien ab.
• Zoom und Umbruch (1.4.4, 1.4.10) bei 200 % und 400 % sind nicht systematisch getestet.