Was du in 60 Minuten prüfen kannst. 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 brauchst du einen Plan, der in dein Tagesgeschäft passt. Heute bekommst du einen Audit Ablauf, der in 60 Minuten die größten Lücken im Shop sichtbar macht.
Wenn du denkst, Barrierefreiheit betrifft nur ein paar Menschen, dann unterschätzt du dein 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 dein Shop klar strukturiert und sauber bedienbar ist.
Wenn du einen Einstieg in offizielle Grundlagen suchst, nimm dir 5 Minuten und schau bei der Bundesfachstelle Barrierefreiheit vorbei. Das ist eine gute Referenz, wenn du intern erklären musst, warum du dafür Zeit brauchst.
Was Barrierefreiheit im Shop praktisch bedeutet
Barrierefreiheit heißt nicht, dass dein Design langweilig wird. Es heißt, dass Nutzer:innen deinen 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.
Du brauchst dafür keine 200 Seiten Theorie. Du brauchst ein paar harte Regeln, die du konsequent durchziehst. Und du brauchst Prioritäten. Denn im Shop zählen am Ende diese drei Dinge: Finden, Verstehen, Kaufen.
Dein 60 Minuten Audit, Schritt für Schritt
Stell dir einen Timer. Ja, wirklich. Sonst verzettelst du dich in Details. Nimm dir einen Desktop Browser und zusätzlich dein Smartphone. Und arbeite diese Reihenfolge ab. Sie ist so gebaut, dass du zuerst die Umsatzbremsen findest.
Minute 0 bis 5: Setup und Schnellcheck
- Öffne Startseite, Kategorie, Produktdetail, Warenkorb, Checkout.
- Schalte Zoom auf 200 Prozent und scrolle alles durch.
- Teste einmal im Hochformat am Smartphone.
Was du suchst: 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ück Tab. Immer wieder. Ohne Maus. Wenn du dabei innerlich aggressiv wirst, ist das ein Signal. Nutzer:innen erleben das exakt so, nur ohne die Option auf Maus auszuweichen.
- Kannst du die Hauptnavigation erreichen und bedienen?
- Siehst du 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 du kommst nicht mehr raus. Oder der Fokus springt in Elemente, die du nicht siehst, 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. Dein Brand bleibt dein Brand. Du musst nur dafür sorgen, dass Text gegen Hintergrund lesbar ist.
- Checke Buttons, Links, Preise, Rabatt Labels, Pflichtfeld Hinweise.
- Checke Text auf Bildern, zum Beispiel Hero Banner mit Claims.
- Checke 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 dein Geld. Wenn sie unklar sind, hast du Support Tickets und Kaufabbrüche. Du testest 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 klickst du 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. Du siehst es nicht. Du wirst wütend. Du gehst.
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.
- Kannst du 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?
- Kannst du 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 du hast ein Popup für AGB, das sich mit Escape nicht schließen lässt.
Minute 55 bis 60: Ergebnis sichern und priorisieren
Mach Screenshots. Notiere pro Problem: Seite, Element, Verhalten, Risiko. Und dann priorisiere. Du brauchst eine Reihenfolge, sonst passiert gar nichts.
Prioritäten, was du zuerst fixen solltest
Wenn du nur begrenzt Zeit hast, arbeite 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 du intern argumentieren musst, hilft ein neutraler Testansatz. Schau dir den BITV Test an. Du bekommst dort Prüfschritte, die du gut in Tickets übersetzen kannst.
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öhe 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 dein 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: Sorge 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 dir 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: Schreib 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 du sofort stoppen solltest
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: Halte Interaktionen so standardnah wie möglich. Nutze echte Form Controls. Und wenn du UI stark customst, teste härter. Sonst wirkt es modern, aber ist nicht bedienbar.
Quick Wins für dein 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
Setze 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. Verwende button für Aktionen, a für Navigation, input für Auswahl. Das spart dir 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 du ein Modal öffnest, setz Fokus hinein. Schließe 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 du intern Standards brauchst, ist der BFIT Bund eine gute Anlaufstelle. Du kannst daraus klare interne Guidelines ableiten.
Quick Wins für dein 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
Nutze 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. Schreib, 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. Schreib 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 du zu euren Templates schon Content Pflege machst, verlinke intern gezielt auf passende Hilfe Inhalte. Zum Beispiel auf euren Guide zur UX Optimierung oder zum Checkout. Hier sind vier interne Links als Vorschläge, die du an eure Struktur anpassen kannst:
- 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 dokumentierst du Findings, damit sie wirklich gefixt werden
Ein gutes Ticket ist die halbe Miete. Wenn du Barrierefreiheit als “Irgendwas mit WCAG” reinwirfst, verschwindet es in einem Backlog Loch. Schreib 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 deinen nächsten Release
Du willst nicht jedes Mal bei null starten. Bau dir 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.
Deine Community Aufgabe, ich will echte Beispiele von dir
Jetzt bist du dran. Schreib mir in die Kommentare:
- Welche Stelle im Shop nervt dich selbst, wenn du ohne Maus testest?
- Hast du schon mal einen Checkout gesehen, der beim Tabben komplett ausrastet?
- Welche Fehlermeldung hat dich zuletzt so genervt, dass du fast abgebrochen hast?
Wenn du willst, poste auch eine anonymisierte Beschreibung deines 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.
Danke für diesen wichtigen Beitrag! Ich arbeite in der Medizintechnik und bei uns ist Barrierefreiheit ein absolutes Muss, weil viele unserer Endkunden naturgemäß Einschränkungen haben. Wir haben schon 2024 mit dem Audit begonnen und ich kann nur sagen: Fangt früh an!
Was uns am meisten überrascht hat: Die Testphase mit echten Nutzern war unglaublich aufschlussreich. Ein blinder Tester hat in 20 Minuten mehr Probleme gefunden als unser automatisiertes Tool in einer Woche. Automatische Tests sind gut für den Anfang, ersetzen aber NIEMALS manuelles Testing mit Betroffenen.
@Karsten Sievers: Wir standen vor einem ähnlichen Problem – 8.000 Produkte in unserem Tierbedarf-Shop. Unser Ansatz war: Top-100-Produkte zuerst, dann die Kategorien mit dem meisten Traffic, dann den Rest systematisch abarbeiten. Mit einer Kombination aus KI-generierten Vorschlägen und manueller Überarbeitung haben wir pro Tag ca. 150 Produkte geschafft.
Wichtig: Die Alt-Texte müssen nicht literarisch wertvoll sein. Ein „Hundeleine aus Leder, braun, 120cm, mit Karabinerhaken“ ist für einen Screenreader-Nutzer absolut hilfreich. Klar, dafür braucht man ein System und Prozesse, aber es ist machbar. Der Trick ist, es in den normalen Produktpflegeprozess zu integrieren, statt es als einmalige Mammutaufgabe zu betrachten.
Übrigens nutzen wir mittlerweile KI-Tools im Onlineshop auch für andere Bereiche – die Technologie entwickelt sich rasant und wird gerade bei Alt-Texten immer besser.
Ich bin da ehrlich gesagt noch nicht ganz überzeugt. Unser Baumarkt-Onlineshop hat 15.000 Produkte, jedes mit mehreren Bildern. Wenn ich jetzt für JEDES Bild einen sinnvollen Alt-Text schreiben soll, reden wir über Monate an Arbeit. Und die automatisch generierten Alt-Texte per KI sind meiner Erfahrung nach zu generisch, um wirklich nützlich zu sein.
Wie lösen andere das? Oder reicht es erstmal, die wichtigsten Kategorien abzuarbeiten und den Rest nach und nach zu ergänzen? Der Artikel spricht von Priorisierung, aber bei einer fünfstelligen Anzahl von Produkten fühlt sich das trotzdem wie eine Mammutaufgabe an.
Als UX-Designerin kann ich nur bestätigen: Barrierefreiheit und gute User Experience sind keine Gegensätze, sondern gehen Hand in Hand. Ich erlebe leider immer noch Kunden, die sagen „das sieht dann aber nicht mehr schön aus“ – als ob barrierefreies Design hässlich sein müsste. Das Gegenteil ist der Fall!
Ein gut strukturierter Shop mit klarer visueller Hierarchie, ausreichenden Kontrasten und verständlicher Beschriftung sieht professionell aus und funktioniert für alle Nutzer besser. Besonders spannend finde ich den Aspekt im Artikel, dass auch die Schriftgröße einen messbaren Einfluss auf die Conversion hat. Typografie ist einer der am meisten unterschätzten Faktoren in der Barrierefreiheit.
Mein Appell an alle Designer und Shopbetreiber: Accessibility ist kein Addon, das man am Ende draufpappt. Es muss von Anfang an mitgedacht werden – bei jedem neuen Design, bei jeder neuen Funktion.
Kurze Frage an die Runde: Wir nutzen Shopware 6 für unseren Weinshop und haben festgestellt, dass unser Theme einige Accessibility-Probleme hat, die wir selbst kaum beheben können, ohne den Theme-Code massiv anzupassen. Ist es sinnvoller, auf ein anderes Theme zu wechseln oder das bestehende zu patchen? Hat jemand Erfahrungen mit accessibility-konformen Shopware-Themes?
Die Tipps im Artikel sind jedenfalls schon mal eine super Grundlage. Das mit den ARIA-Labels haben wir direkt umgesetzt – war gar nicht so aufwendig wie befürchtet!
Danke für die klare Darstellung! Ich bin Rechtsanwältin mit Schwerpunkt IT-Recht und möchte einen wichtigen rechtlichen Aspekt ergänzen: Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie 2019/882 in deutsches Recht um. Betroffen sind tatsächlich ALLE Online-Shops, die Produkte oder Dienstleistungen an Verbraucher verkaufen – unabhängig von der Unternehmensgröße.
Die Übergangsfristen sind dabei sehr genau geregelt: Seit Juni 2025 müssen neue Produkte und Dienstleistungen die Anforderungen erfüllen. Für bestehende Angebote gibt es Übergangsregelungen bis 2030, aber das heißt NICHT, dass man warten kann. Wer jetzt nicht handelt, riskiert Abmahnungen und Bußgelder.
Ein proaktiver Ansatz – wie im Artikel beschrieben mit Audit und priorisierter Umsetzung – ist definitiv der richtige Weg. Mein Rat: Dokumentiert alles, was ihr tut. Eine nachweisbare Strategie zur Herstellung der Barrierefreiheit ist im Streitfall Gold wert.
Übrigens empfehle ich jedem Shopbetreiber, sich parallel auch mit dem Thema DSGVO-Konformität auseinanderzusetzen, denn die beiden Themen überschneiden sich stark bei Formularen und Cookie-Bannern.
Interessanter Beitrag. Wir sind ein B2B-Großhändler für Gastronomiebedarf und ich bin mir unsicher, inwieweit die Barrierefreiheitsanforderungen auch für reine B2B-Shops gelten. In dem Artikel klingt es so, als wären alle Onlineshops betroffen. Kann das jemand bestätigen? Unsere Kunden bestellen hauptsächlich über ein geschlossenes Portal mit Login. Trotzdem ist der öffentliche Teil unserer Website natürlich zugänglich.
Was wir auf jeden Fall mitnehmen: Die PDF-Rechnungen und Lieferscheine sollten ebenfalls barrierefrei sein. Das hatten wir gar nicht auf dem Radar.
Wow, was für ein umfassender Artikel! Ich bin selbst betroffen – ich habe eine Sehbehinderung und bin auf Screenreader angewiesen. Was ich tagtäglich in deutschen Onlineshops erlebe, ist teilweise haarsträubend. Buttons ohne Beschriftung, Bilder ohne Alt-Text, Dropdown-Menüs die nur mit Maus bedienbar sind, und Captchas, die selbst für sehende Menschen eine Herausforderung sind.
Besonders frustrierend: Viele Shops haben wunderschöne, aufwendig gestaltete Websites. Aber für mich ist all das Design wertlos, wenn ich nicht durch den Checkout komme, weil die Formularfelder nicht korrekt beschriftet sind. Ich habe schon mehrfach Warenkörbe mit Waren über 200 Euro aufgegeben, weil der Bestellprozess unüberwindbar war.
Was mich an diesem Beitrag freut: Er behandelt das Thema nicht als abstraktes Compliance-Ding, sondern zeigt, dass es um echte Menschen mit echtem Kaufinteresse geht. Wir WOLLEN euer Geld ausgeben – gebt uns einfach die Möglichkeit dazu!
Mein Tipp an alle Shopbetreiber: Testet euren Shop einmal mit ausgeschaltetem Bildschirm und nur mit Keyboard und Screenreader. Das ist ein Augenöffner, den ihr nie vergessen werdet. Und für die Conversion Rate Optimierung ist Barrierefreiheit übrigens Gold wert – denn jeder Kunde, den ihr bisher verliert, ist bares Geld.
Moin! Hatte das Thema komplett auf dem Schirm, aber dieser Artikel hat mir nochmal klar gemacht, wie dringend das wirklich ist. Wir verkaufen Fahrräder und Zubehör online und hatten bisher null Fokus auf Accessibility. Ab morgen wird das anders. Danke für den Weckruf! Die Frage ist nur, ob wir das intern schaffen oder eine Agentur brauchen. Hat hier jemand aus dem Raum Hamburg eine Empfehlung?
Als Beraterin für digitale Transformation erlebe ich in vielen Unternehmen, dass Barrierefreiheit als reines Compliance-Thema behandelt wird. Das ist grundlegend falsch! Barrierefreiheit ist ein Qualitätsmerkmal, das sich direkt auf die User Experience aller Nutzer auswirkt.
Ein barrierefreier Shop ist in der Regel auch ein benutzerfreundlicher Shop. Klare Strukturen, lesbare Texte, logische Navigation – das hilft jedem Kunden, nicht nur Menschen mit Behinderung. Wer das als lästige Pflicht betrachtet, verschenkt enormes Potenzial.
Für alle, die sich auch mit den DSGVO-Anforderungen im E-Commerce auseinandersetzen: Da gibt es übrigens viele Parallelen. Sowohl Datenschutz als auch Barrierefreiheit erfordern einen systematischen Ansatz und regelmäßige Überprüfungen.
Top Beitrag! Was hier im Artikel über die Prioritäten geschrieben wird, deckt sich exakt mit unseren Erfahrungen. Wir haben in unserem Sportartikel-Shop zuerst den Checkout-Bereich komplett überarbeitet: Tab-Reihenfolge korrigiert, Error-Messages für Screenreader lesbar gemacht und alle Pflichtfelder korrekt ausgezeichnet. Allein das hat schon einen spürbaren Unterschied gemacht.
Im zweiten Schritt kamen dann die Produktseiten dran: Alt-Texte für alle Bilder, korrekte Heading-Hierarchie und ausreichende Kontrastverhältnisse. Und im dritten Schritt die Navigation und Filter-Funktionen. So kann man das auch als kleinerer Shop gut bewältigen, ohne den laufenden Betrieb zu gefährden.
@Marten Witt: Ich verstehe deinen Punkt, aber ich möchte eine andere Perspektive einbringen. Wir haben unseren Naturkosmetik-Shop Schritt für Schritt barrierefrei gemacht und dabei bewusst priorisiert. Man muss nicht alles auf einmal machen! Die kritischsten Punkte – Alt-Texte, Kontraste, Formularbeschriftungen – lassen sich oft mit überschaubarem Aufwand umsetzen.
Außerdem gibt es Fördermöglichkeiten. Wir haben über ein Digitalisierungsprogramm des Landes Schleswig-Holstein einen Teil der Kosten abdecken können. Und der Return on Investment ist real: Seit unser Shop barrierefrei ist, haben wir 12% mehr Bestellungen von Kunden über 60. Das ist eine Zielgruppe mit enormer Kaufkraft, die wir vorher schlicht verloren haben.
Übrigens: Wer seinen Checkout optimiert, erschlägt oft zwei Fliegen mit einer Klappe – bessere Barrierefreiheit UND höhere Conversion.
Ich finde den Artikel grundsätzlich gut, aber mir fehlt ein wichtiger Aspekt: die Kosten. Für einen kleinen Shopbetreiber mit vielleicht 200 Produkten können professionelle Accessibility-Audits und die anschließende Umsetzung schnell fünfstellige Beträge erreichen. Das muss man realistisch benennen.
Klar, es gibt gesetzliche Pflichten und ja, Barrierefreiheit ist wichtig und richtig. Aber die Frage, wie kleine Unternehmen das finanziell stemmen sollen, wird hier etwas zu leichtfertig übergangen. Nicht jeder hat das Budget einer Enterprise-Lösung.
Danke für den gut strukturierten Überblick! Wir betreiben eine Apotheke mit Online-Bestellmöglichkeit und für uns ist Barrierefreiheit besonders kritisch, weil viele unserer Kunden älter sind oder Einschränkungen haben. Gerade bei Medikamenteninformationen ist es essenziell, dass ALLE Nutzer die Texte lesen und verstehen können.
Was mir aufgefallen ist: Barrierefreiheit betrifft ja nicht nur Sehbehinderte. Auch motorische Einschränkungen, kognitive Beeinträchtigungen und temporäre Handicaps wie ein gebrochener Arm müssen berücksichtigt werden. Das wird oft vergessen. Die Priorisierung im Artikel – erst Checkout, dann Navigation, dann Content – finde ich für die meisten Shops sinnvoll. Bei uns steht allerdings die Produktsuche ganz oben, weil unsere Kunden sehr gezielt nach bestimmten Medikamenten suchen. Da hilft übrigens auch eine gut optimierte Suchfunktion im Onlineshop, die barrierefrei bedienbar sein muss.
Als Webentwickler sehe ich das Thema natürlich aus der technischen Perspektive. ARIA-Labels, semantisches HTML, Focus-Management – das sind alles Dinge, die eigentlich zum Handwerk gehören sollten, aber in der Praxis viel zu oft vernachlässigt werden. Ich schätze, dass mindestens 70% der deutschen Onlineshops aktuell nicht barrierefrei sind.
Der Audit-Ansatz im Artikel ist genau richtig: Erst analysieren, dann priorisieren, dann schrittweise umsetzen. Wer jetzt noch damit anfängt, hat genug Zeit. Aber wer wartet, wird in Panik geraten, wenn die Abmahnwelle kommt – und die wird kommen, das ist so sicher wie das Amen in der Kirche.
Super Artikel! Als Inhaberin eines kleinen Modegeschäfts mit angeschlossenem Webshop beschäftigt mich das Thema Barrierefreiheit seit Monaten. Die gesetzlichen Anforderungen sind für kleine Händler eine echte Herausforderung, aber der Beitrag zeigt gut, wie man Prioritäten setzen kann. Besonders der Hinweis auf die WCAG 2.1 AA-Kriterien als Mindeststandard war für mich sehr hilfreich.
Was mich interessieren würde: Gibt es empfehlenswerte Tools, mit denen man als Laie einen ersten Accessibility-Check selbst durchführen kann, bevor man eine Agentur beauftragt? Wir arbeiten mit WooCommerce und ich bin unsicher, ob unser Theme überhaupt accessibility-ready ist. Hat da jemand Erfahrungen? Ich habe übrigens auch den Beitrag zum Thema Screenreader-User als Kunden gelesen – das hat mir nochmal die Augen geöffnet, wie viele potenzielle Kunden wir bisher ausschließen.
Endlich spricht mal jemand das Thema Barrierefreiheit im E-Commerce so klar an! Wir betreiben seit acht Jahren einen Onlineshop für Outdoorbekleidung und haben das Thema ehrlich gesagt viel zu lange auf die leichte Schulter genommen. Erst als uns eine Kundin eine detaillierte E-Mail geschrieben hat, in der sie beschrieb, wie frustrierend unser Checkout für sie als sehbehinderte Person ist, haben wir angefangen umzudenken.
Seit dem European Accessibility Act ist das Thema ja nicht mehr optional, sondern ab Juni 2025 gesetzliche Pflicht. Wir haben letztes Jahr ein umfassendes Audit durchführen lassen und waren ehrlich gesagt schockiert, wie viele Baustellen wir hatten: fehlende Alt-Texte bei Produktbildern, keine Keyboard-Navigation, Kontrastverhältnisse unter aller Kanone und ein Checkout-Prozess, der mit Screenreadern praktisch unbenutzbar war.
Die gute Nachricht: Seit wir die kritischsten Fixes umgesetzt haben, ist nicht nur die Barrierefreiheit besser, sondern auch unsere Conversion Rate um 4,2% gestiegen. Barrierefreiheit ist kein Kostenblock, sondern ein Investment! Wer das noch nicht begriffen hat, wird spätestens 2026 ein Problem bekommen, wenn die Übergangsfristen auslaufen und die ersten Abmahnungen kommen.