♿️Barrierefreiheit 2026 im Online Shop, Audit, Fixes, Prioritäten.✅

Was Sie in 60 Minuten prüfen können. Typische Fehler bei Kontrast, Fokus, Formularen, Checkout. Quick Wins für Template und Content Team

Barrierefreiheit klingt für viele wie ein Projekt, das man irgendwann macht, wenn Zeit ist. Spoiler, diese Zeit kommt nie. Und genau deshalb brauchen Sie einen Plan, der in Ihr Tagesgeschäft passt. Heute bekommen Sie einen Audit Ablauf, der in 60 Minuten die größten Lücken im Shop sichtbar macht.

Wenn Sie denken, Barrierefreiheit betrifft nur ein paar Menschen, dann unterschätzen Sie Ihr eigenes Publikum. Menschen mit Sehschwäche, Farbsehschwäche, motorischen Einschränkungen, ADHS, Stress, gebrochenem Arm, schlechtem Display, grellem Sonnenlicht. Das sind keine Sonderfälle. Das ist Alltag. Und ja, Google mag es auch, wenn Ihr Shop klar strukturiert und sauber bedienbar ist.

Wenn Sie einen Einstieg in offizielle Grundlagen suchen, nehmen Sie sich 5 Minuten und schauen Sie bei der Bundesfachstelle Barrierefreiheit vorbei. Das ist eine gute Referenz, wenn Sie intern erklären müssen, warum Sie dafür Zeit brauchen.

Umsetzung, Kosten und Einrichtung stehen nicht hier, sondern auf unserer Seite Barrierefreiheit im WooCommerce-Shop. In diesem Beitrag geht es um das Wie: welche Kriterien es gibt, wie ein Audit abläuft und in welcher Reihenfolge Sie vorgehen.

Was Barrierefreiheit im Shop praktisch bedeutet

Barrierefreiheit heißt nicht, dass Ihr Design langweilig wird. Es heißt, dass Nutzer:innen Ihren Shop ohne Hürden bedienen können. Mit Tastatur. Mit Screenreader. Mit Zoom auf 200 Prozent. Ohne Maus. Ohne perfekte Augen. Ohne Geduld für kaputte Formulare.

Sie brauchen dafür keine 200 Seiten Theorie. Sie brauchen ein paar harte Regeln, die Sie konsequent durchziehen. Und Sie brauchen Prioritäten. Denn im Shop zählen am Ende diese drei Dinge: Finden, Verstehen, Kaufen.

Ihr 60 Minuten Audit, Schritt für Schritt

Stellen Sie sich einen Timer. Ja, wirklich. Sonst verzetteln Sie sich in Details. Nehmen Sie sich einen Desktop Browser und zusätzlich Ihr Smartphone. Und arbeite diese Reihenfolge ab. Sie ist so gebaut, dass Sie zuerst die Umsatzbremsen finden.

Minute 0 bis 5: Setup und Schnellcheck

• Öffne Startseite, Kategorie, Produktdetail, Warenkorb, Checkout.
• Schalten Sie Zoom auf 200 Prozent und scrollen Sie alles durch.
• Testen Sie einmal im Hochformat am Smartphone.

Was Sie suchen: abgeschnittene Elemente, überlappende Buttons, Text der in Karten verschwindet, Cookie Banner die den Inhalt blockieren, Sticky Elemente die alles verdecken.

Minute 5 bis 15: Tastatur Navigation und Fokus

Drücken Sie Tab. Immer wieder. Ohne Maus. Wenn Sie dabei innerlich aggressiv werden, ist das ein Signal. Nutzer:innen erleben das exakt so, nur ohne die Option auf Maus auszuweichen.

• Können Sie die Hauptnavigation erreichen und bedienen?
• Sehen Sie immer, wo der Fokus gerade ist?
• Gibt es einen Sprunglink zum Inhalt, zum Beispiel direkt zum Hauptbereich?
• Springt der Fokus logisch, von links nach rechts, von oben nach unten?

Typischer Fehler: Fokus ist unsichtbar, weil im Template outline entfernt wurde. Oder Fokus landet in einem Offcanvas, aber Sie kommen nicht mehr raus. Oder der Fokus springt in Elemente, die Sie nicht sehen, zum Beispiel in versteckte Filter. Das killt Vertrauen, und es killt Checkout Abschlussraten.

Minute 15 bis 25: Kontrast und Lesbarkeit

Kontrast ist die häufigste Baustelle. Und die nervigste, weil sie oft aus Brand Farben entsteht. Ihr Brand bleibt Ihr Brand. Sie müssen nur dafür sorgen, dass Text gegen Hintergrund lesbar ist.

• Checken Sie Buttons, Links, Preise, Rabatt Labels, Pflichtfeld Hinweise.
• Checken Sie Text auf Bildern, zum Beispiel Hero Banner mit Claims.
• Checken Sie graue Placeholder Texte in Formularen.

Typische Fehler: Hellgraue Schrift auf weißem Hintergrund, Links ohne Unterstreichung, Buttons mit dünnem Text auf knalligem Hintergrund, Preis alt und neu in Rot und Grau, aber zu wenig Unterschied. Und ja, “Sieht schick aus” ist kein Argument, wenn Menschen es nicht lesen können.

Wcag shop – E-Commerce News – Tipps & Tricks – ♿️Barrierefreiheit 2026 im Online Shop, Audit, Fixes, Prioritäten.✅

Minute 25 bis 40: Formulare, Fehlertexte, Labels

Formulare sind Ihr Geld. Wenn sie unklar sind, haben Sie Support Tickets und Kaufabbrüche. Sie testen jetzt Login, Registrierung, Newsletter, Kontakt und natürlich Checkout Felder.

• Hat jedes Feld ein sichtbares Label, nicht nur Placeholder?
• Wird bei Fehlern klar gesagt, was falsch ist?
• Springt der Fokus bei Fehlern zum betroffenen Feld?
• Wird eine Fehlermeldung auch ohne Farbe verstanden?

Typischer Fehler: Placeholder wird als Label missbraucht. Dann klicken Sie ins Feld, Text verschwindet, Nutzer:innen vergessen, was da rein soll. Nächster Klassiker: Fehlermeldung steht oben als roter Text, aber die Felder sind unten. Sie sehen es nicht. Sie werden wütend. Sie gehen.

Minute 40 bis 55: Warenkorb und Checkout, die Risiko Zone

Jetzt kommt der Teil, wo Barrierefreiheit direkt Umsatz ist. Warenkorb und Checkout sind oft voll mit Custom UI, Popups, Validierungen, Payment iFrames und dynamischen Updates.

• Können Sie Mengen ändern und löschen per Tastatur?
• Werden Preis Updates klar angekündigt oder “passieren sie einfach”?
• Ist die Reihenfolge im Checkout logisch und vorhersehbar?
• Können Sie Zahlungsarten auswählen, ohne dass Fokus verloren geht?

Typische Fehler: Radiobuttons sind optisch hübsch, aber technisch keine Radiobuttons. Oder die aktive Auswahl ist nur über Farbe erkennbar. Oder Fehlermeldungen erscheinen erst nach Klick auf “Weiter”, aber ohne Fokus Sprung. Oder Sie haben ein Popup für AGB, das sich mit Escape nicht schließen lässt.

Minute 55 bis 60: Ergebnis sichern und priorisieren

Machen Sie Screenshots. Notieren Sie pro Problem: Seite, Element, Verhalten, Risiko. Und dann priorisiere. Sie brauchen eine Reihenfolge, sonst passiert gar nichts.

Prioritäten, was Sie zuerst fixen sollten

Wenn Sie nur begrenzt Zeit haben, arbeiten Sie in dieser Reihenfolge. Das ist die Shop Logik, nicht die Perfektion Logik.

Priorität 1: Blocker, die Kauf verhindern

• Checkout nicht per Tastatur bedienbar.
• Fokus ist unsichtbar oder springt chaotisch.
• Formular Fehler werden nicht verständlich erklärt.
• Buttons und Links sind nicht eindeutig erkennbar.

Priorität 2: Stolperfallen, die Vertrauen zerstören

• Kontrastprobleme bei Preisen, CTA Buttons, Pflichtfeldern.
• Modals und Offcanvas ohne sauberes Fokus Management.
• Filter und Suche, die Screenreader oder Tastatur ausbremsen.

Priorität 3: Qualität und Reichweite

• Alt Texte und Medien Alternativen.
• Saubere Überschriften Hierarchie.
• Textverständlichkeit, Microcopy, Hilfetexte.

Wenn Sie intern argumentieren müssen, hilft ein neutraler Testansatz. Schauen Sie sich den BITV Test an. Sie bekommen dort Prüfschritte, die Sie gut in Tickets übersetzen können.

Typische Fehler, die ich in Shops ständig sehe

Kontrast Fehler, die oft übersehen werden

Die Klassiker sitzen nicht nur in Buttons. Sie sitzen im Kleingedruckten. In sekundären Links. In Badge Texten. In “Nur noch 2 Stück verfügbar”. Und in Cookie Bannern.

• Text auf Bildern ohne ausreichenden Kontrast.
• Hellgraue Placeholder und Hilfetexte.
• Linkfarben, die sich kaum vom Fließtext unterscheiden.
• Disabled Buttons, die nicht als disabled erkennbar sind.

Quick Win: Erhöhen Sie die Schriftstärke und Schriftgröße bei kritischen Info Texten. Und gib Links eine Unterstreichung im Content Bereich. Das ist kein Stilbruch. Das ist Orientierung.

Fokus Fehler, die Nutzer:innen aus dem Flow werfen

Fokus ist Ihr unsichtbarer Cursor. Wenn er fehlt, ist das wie Autofahren ohne Scheinwerfer. Es geht vielleicht, aber es fühlt sich falsch an.

• outline: none im Template ohne Ersatz.
• Fokus wird von Shadow DOM oder Custom Components verschluckt.
• Modal öffnet, aber Fokus bleibt im Hintergrund.
• Modal schließt, Fokus geht nicht zurück zum Auslöser.

Quick Win: Sorgen Sie für einen klar sichtbaren Fokuszustand für Links, Buttons, Inputs. Und sorge dafür, dass in Modals und Offcanvas der Fokus eingefangen wird und danach sauber zurückspringt.

Formular Fehler, die Abbrüche triggern

Formulare sind emotional. Niemand will kämpfen, um Ihnen Geld zu geben. Und niemand will Rätsel lösen, was “ungültig” bedeutet.

• Fehlermeldungen ohne konkrete Anleitung.
• Pflichtfelder nur mit Farbe markiert.
• Input Masken, die Tastatur Nutzer:innen ausbremsen.
• Autofill funktioniert nicht, weil name Attribute fehlen oder falsch sind.

Quick Win: Schreiben Sie Fehlermeldungen so, dass man sie sofort lösen kann. Beispiel: “Bitte gib deine Postleitzahl mit 5 Ziffern ein.” statt “Ungültig”. Und setze pro Feld ein klares Label, auch wenn es visuell klein ist.

Checkout Fehler, die Sie sofort stoppen sollten

Der Checkout ist voll mit dynamischen Updates. Versandkosten ändern sich. Zahlungsmethoden laden nach. Gutscheine ändern Summen. Das ist für Screenreader und Tastatur Nutzer:innen ohne klare Signale oft Chaos.

• Summen ändern sich, ohne dass es angekündigt wird.
• Accordion Schritte, die Fokus verschlucken.
• Payment Auswahl als Klickfläche ohne echte Inputs.
• AGB Checkbox ohne sauberes Label.

Quick Win: Halten Sie Interaktionen so standardnah wie möglich. Nutzen Sie echte Form Controls. Und wenn Sie UI stark customen, testen Sie härter. Sonst wirkt es modern, aber ist nicht bedienbar.

Quick Wins für Ihr Template Team

Das Template Team kann in wenigen Stunden spürbar viel verbessern, wenn es auf die richtigen Stellen zielt. Hier sind Quick Wins, die fast immer funktionieren.

1) Fokus Styling als Standard definieren

Setzen Sie einen sichtbaren Fokuszustand für alle interaktiven Elemente. Nicht nur für Buttons. Auch für Links, Icons, Checkboxen, Filter Tags. Und teste es im Checkout.

2) Interaktive Elemente wirklich interaktiv machen

Wenn ein div klickbar ist, ist das ein Warnsignal. Verwenden Sie button für Aktionen, a für Navigation, input für Auswahl. Das spart Ihnen später viele Sonderlösungen.

3) Skip Links und Landmarken einbauen

Ein Sprunglink zum Inhalt wirkt klein, ist aber ein Gamechanger. Ebenso klare Bereiche wie header, main, nav, footer. Damit finden sich Screenreader Nutzer:innen schneller zurecht.

4) Modals, Offcanvas, Dropdowns richtig bauen

Wenn Sie ein Modal öffnen, setzen Sie Fokus hinein. Schließen Sie es per Escape. Und gib Fokus zurück auf das Element, das es geöffnet hat. Das klingt banal. Es macht einen riesigen Unterschied.

Wenn Sie intern Standards brauchen, ist der BFIT Bund eine gute Anlaufstelle. Sie können daraus klare interne Guidelines ableiten.

Quick Wins für Ihr Content Team

Content ist nicht nur Text. Content ist Orientierung. Und Orientierung ist Barrierefreiheit. Das Content Team kann ohne Code schon viel verbessern.

1) Überschriften Hierarchie sauber halten

Nutzen Sie H2 für Hauptabschnitte, H3 für Unterabschnitte. Keine Sprünge nur wegen Optik. Überschriften sind Navigationsanker für viele Nutzer:innen.

2) Linktexte verständlich schreiben

“Hier klicken” ist ein schlechter Linktext. Schreiben Sie, was passiert. Beispiel: “Versandkosten und Lieferzeiten ansehen”. Das hilft allen, und es hilft Screenreadern doppelt.

3) Alt Texte mit Sinn schreiben

Alt Texte sind keine SEO Abstellkammer. Schreiben Sie kurz, was man sieht, und wozu es dient. Bei Produktbildern: Produkt, Variante, wichtige Details. Bei Deko Bildern: leer lassen, wenn es wirklich Deko ist.

4) Microcopy im Checkout glätten

Kurze Sätze. Klare Handlungsaufforderungen. Keine Fachwörter. Keine Drohtexte. Beispiel: “Wir brauchen deine Telefonnummer nur für Rückfragen zur Lieferung.” Das nimmt Stress raus.

Wenn Sie zu Ihren Templates schon Content Pflege machen, verlinken Sie intern gezielt auf passende Hilfe Inhalte. Zum Beispiel auf Ihren Guide zur UX Optimierung oder zum Checkout. Hier sind vier interne Links als Vorschläge, die Sie an Ihre Struktur anpassen können:

• UX und Conversion Optimierung im Online Shop
• Hyva Theme Tipps für bessere Performance und UX
• Shopware 6 Template Optimierung
• Checkout Optimierung mit klaren Schritten

So dokumentieren Sie Findings, damit sie wirklich gefixt werden

Ein gutes Ticket ist die halbe Miete. Wenn Sie Barrierefreiheit als “Irgendwas mit WCAG” reinwerfen, verschwindet es in einem Backlog Loch. Schreiben Sie Tickets so:

• Wo: Seite und Bereich, zum Beispiel Checkout Schritt Versand.
• Was: konkretes Verhalten, zum Beispiel Fokus ist nicht sichtbar.
• Impact: wer ist betroffen, und was passiert, zum Beispiel Checkout nicht bedienbar per Tastatur.
• Fix Idee: kurze Empfehlung, zum Beispiel Fokus Styling wieder aktivieren und Modal Fokus einfangen.
• Nachtest: welche Aktion muss funktionieren, zum Beispiel Tab Reihenfolge, Escape schließt Modal.

Mini Checkliste für Ihren nächsten Release

Sie wollen nicht jedes Mal bei null starten. Bauen Sie sich ein Release Ritual, das 10 Minuten dauert.

• Einmal Checkout per Tastatur durchklicken.
• Einmal Zoom 200 Prozent auf Produktdetail prüfen.
• Einmal Formular Fehler absichtlich auslösen und prüfen.
• Einmal Kontrast bei Buttons und Preisen prüfen.

Ihre Community Aufgabe, ich will echte Beispiele von Ihnen

Jetzt sind Sie dran. Schreiben Sie mir in die Kommentare:

• Welche Stelle im Shop nervt Sie selbst, wenn Sie ohne Maus testen?
• Haben Sie schon mal einen Checkout gesehen, der beim Tabben komplett ausrastet?
• Welche Fehlermeldung hat Sie zuletzt so genervt, dass Sie fast abgebrochen haben?

Wenn Sie wollen, posten Sie auch eine anonymisierte Beschreibung Ihres größten Barrierefreiheits Bugs. Seite, Verhalten, warum es nervt. Ich sammle die besten Fälle und mache daraus eine zweite Runde mit konkreten Fix Patterns.