Barrierefreie Website: Checkliste für kleine Unternehmen und Shops

Stellen Sie sich eine Kundin vor, die einen Screenreader nutzt. Sie findet die Sneaker, die sie möchte, wählt eine Größe und drückt auf das, was sie für den Warenkorb-Button hält. Ihr Screenreader sagt „Schalter“. Sonst nichts. Davon gibt es drei auf der Seite, keiner hat einen Namen, also geht sie, und Sie erfahren nie, warum.

So sehen die meisten Barrieren auf Websites kleiner Unternehmen aus: für die Inhaber unsichtbar, für die Kundschaft eine Sackgasse. Diese Checkliste ist für alle, die eine Website mit Shopify, WooCommerce, Wix oder Squarespace betreiben, ohne eigene Entwickler im Team.

Muss die Website meines kleinen Unternehmens barrierefrei sein?

Wenn Sie an Verbraucher in der EU verkaufen, wahrscheinlich ja. Der European Accessibility Act (öffnet in einem neuen Tab), in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz (BFSG), erfasst den Onlinehandel seit dem 28. Juni 2025. Die wichtigste Ausnahme gilt für Kleinstunternehmen, die Dienstleistungen anbieten: weniger als 10 Beschäftigte und ein Jahresumsatz oder eine Jahresbilanzsumme von höchstens 2 Mio. €.

Onlinehandel heißt hier: Verkauf aus der Ferne über eine Website oder App, „auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags“ (Art. 3 Nr. 30 der Richtlinie). Ein Onlineshop oder ein Buchungssystem passt genau dazu. Die Ausnahme gilt nur für Dienstleistungen: Wer erfasste Produkte wie E-Book-Reader verkauft, unterliegt weiterhin den Produktregeln (Art. 4 Abs. 5). Ein Sitz außerhalb der EU hilft auch nicht, denn ein britischer Shop, der an Kundschaft in Frankreich verkauft, ist für diese Kunden erfasst (Art. 3 Nr. 4). Nationale Gesetze und Bußgelder erklärt unser Leitfaden zum BFSG und European Accessibility Act.

Der britische Equality Act 2010 (öffnet in einem neuen Tab) verlangt angemessene Vorkehrungen für Menschen mit Behinderungen, legt aber keine technische Norm für Websites fest. In den USA schreibt das Justizministerium in seinen Leitlinien vom März 2022 (öffnet in einem neuen Tab), dass Unternehmen mit Publikumsverkehr auch ihr Onlineangebot barrierefrei machen müssen und dass Normen wie die WCAG „hilfreiche Orientierung bieten“. Was auch immer im Gesetz steht: Wer Ihre Kasse nicht bedienen kann, kauft nicht.

Welche Barrieren gibt es auf Websites am häufigsten?

Sechs Fehler dominieren. Im WebAIM Million 2026 (öffnet in einem neuen Tab), einem automatischen Scan der 1 Million meistbesuchten Startseiten vom Februar 2026, hatten 95,9 % der Seiten erkannte WCAG-Fehler, im Schnitt 56,1 pro Seite. Am häufigsten war Text mit zu wenig Kontrast, zu finden auf 83,9 % der Startseiten.

Hinter diesen Prüfungen stehen die WCAG, die Web Content Accessibility Guidelines (auf Deutsch: Richtlinien für barrierefreie Webinhalte). Die meisten Gesetze verweisen auf deren Stufe AA, und unser Leitfaden zu WCAG 2.2 erklärt die aktuelle Version. Einige der folgenden Punkte kann kein Scanner beurteilen.

Können alle Ihre Texte lesen und Ihre Bilder verstehen?

Fangen Sie hier an, denn diese Korrekturen sind günstig und meist im Website-Editor erledigt. Text braucht genug Kontrast, Bilder mit Informationsgehalt brauchen Alternativtext, und nichts sollte allein über Farbe funktionieren. Etwa 1 von 12 Männern und 1 von 200 Frauen haben laut Colour Blind Awareness (öffnet in einem neuen Tab) eine Farbsehschwäche.

• Kontrast. Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 (öffnet in einem neuen Tab) zum Hintergrund, großer Text mindestens 3:1. Prüfen Sie Ihre Farben in einem kostenlosen Kontrast-Checker, auch Text auf Bannerfotos. Unser Leitfaden zum Farbkontrast zeigt Lösungen, bei denen Ihre Marke erhalten bleibt.
• Alternativtexte für Produkte. Beschreiben Sie, was Kaufinteressierte wissen müssen: „Marineblauer Wollpullover mit geripptem Rollkragen, Vorderansicht“ ist besser als „Produktbild 1“. Beginnen Sie mit Ihren zehn Bestsellern.
• Dekorative Bilder. Ein Hintergrundschnörkel sollte einen leeren Alternativtext haben, damit Screenreader ihn überspringen. Manche Plattformen füllen ein leeres Alt-Feld mit dem Dateinamen; prüfen Sie also Ihre eigene.
• Nur Farbe. „Ausverkauft“ nur als ausgegrautes Farbfeld oder ein Pflichtfeld, das nur rot markiert ist, erreicht nicht alle. Sehen Sie sich die Seite mit dem Graustufenfilter Ihres Smartphones an und ergänzen Sie ein Wort oder Symbol überall dort, wo die Bedeutung verschwindet.
• Zoom. Bei 200 % Browser-Zoom sollte Text größer werden, ohne sich zu überlappen oder abgeschnitten zu werden, und das Menü sollte weiter funktionieren.
• Sprache der Seite. Jeder kostenlose Checker meldet eine fehlende Sprachangabe. Die Korrektur ist eine Theme-Einstellung oder eine einzige Zeile im Template.

Lässt sich Ihre Website mit der Tastatur bedienen?

Viele Menschen surfen ohne Maus: Screenreader-Nutzer, Menschen mit Tremor oder eingeschränkter Handbeweglichkeit und alle, deren Touchpad gerade den Geist aufgegeben hat. Legen Sie die Maus beiseite und drücken Sie die Tabulatortaste. Sie sollten jeden Link, jeden Button und jedes Formularfeld in sinnvoller Reihenfolge erreichen, immer sehen, wo Sie sind, und nirgends hängen bleiben.

• Sichtbarer Fokus. Ein Rahmen sollte zeigen, welches Element aktiv ist, und ein fixierter Header oder eine Chat-Blase darf ihn nicht verdecken (WCAG 2.2, 2.4.11 Fokus nicht verdeckt). Viele Themes entfernen den Rahmen aus optischen Gründen; ein Entwickler kann ihn zurückholen.
• Keine Fallen. Öffnen Sie Menü, Größenauswahl, Pop-ups und Bildergalerie mit der Tastatur, wählen Sie etwas aus und versuchen Sie dann, wieder herauszukommen. Die Escape-Taste sollte Pop-ups schließen.
• Namen für Symbole. Jeder Symbol-Link und jeder Symbol-Button braucht einen Namen, den ein Screenreader vorlesen kann, etwa „Warenkorb, 2 Artikel“. Ersetzen Sie „Hier klicken“ durch Worte, die sagen, wohin der Link führt.
• Sprunglink und Überschriften. Der erste Druck auf die Tabulatortaste sollte möglichst einen Link „Zum Inhalt springen“ zeigen. In der Screenreader-Umfrage von WebAIM 2024 (öffnet in einem neuen Tab) gaben 71,6 % der Befragten an, sich auf einer langen Seite zuerst über die Überschriften zu orientieren. Verwenden Sie also echte Überschriftenebenen statt fett gesetzten Texts.
• Klickflächen. WCAG 2.2 verlangt Zielflächen von mindestens 24 × 24 CSS-Pixeln oder genug Abstand drumherum (Erfolgskriterium 2.5.8 (öffnet in einem neuen Tab)).

Kommen alle durch Ihre Formulare, den Warenkorb und die Kasse?

An der Kasse kosten Barrieren Sie direkt Geld. Testen Sie sie deshalb von Anfang bis Ende, auch für den Fall, dass etwas schiefgeht. Jedes Feld braucht eine sichtbare Beschriftung, Fehlermeldungen müssen das Problem in Worten erklären, und das Login darf nicht von Gedächtnistests oder Rätseln abhängen. Die Seiten Ihres Zahlungsanbieters zählen mit.

• Beschriftungen statt Platzhalter. Platzhaltertext verschwindet, sobald jemand tippt, und ist oft zu blass, um ihn zu lesen. Jedes Feld braucht eine Beschriftung, die sichtbar bleibt.
• Fehlermeldungen. Schicken Sie das Formular leer ab. Jeder Fehler sollte ausformuliert sein („Geben Sie eine Postleitzahl ein, zum Beispiel 10115“), direkt beim Feld stehen und vorgelesen werden, statt nur einen Rahmen rot zu färben.
• Nicht zweimal fragen. Bieten Sie „Rechnungsadresse ist identisch“ an, statt die Lieferadresse noch einmal abzufragen. WCAG 2.2 hat daraus eine Anforderung der Stufe A gemacht: 3.3.7 Redundante Eingabe.
• Login. Erlauben Sie das Einfügen von Passwörtern und Einmalcodes und die Nutzung von Passwort-Managern. Wer das Einfügen blockiert, verfehlt das WCAG-2.2-Kriterium zur barrierefreien Authentifizierung (öffnet in einem neuen Tab), sofern es keinen anderen Weg hinein gibt.
• CAPTCHAs. In der WebAIM-Umfrage von 2024 nannten Screenreader-Nutzer CAPTCHAs das problematischste Element im Web. Brauchen Sie einen Bot-Schutz, verzichten Sie auf visuelle Rätsel und bieten Sie immer eine nicht visuelle Alternative an.
• Zeitlimits. Läuft ein Warenkorb oder eine Reservierung ab, warnen Sie vorher und ermöglichen Sie eine Verlängerung.

Gehören Teile der Kasse zu Ihrer Plattform oder Ihrem Zahlungsanbieter, testen Sie sie trotzdem, melden Sie Probleme und führen Sie sie als bekannte Mängel auf.

Was ist mit Cookie-Bannern, Pop-ups und Chat-Widgets?

Für Ihre Kundschaft gehören Skripte von Drittanbietern zu Ihrer Website. Ein Cookie-Banner, das sich nicht mit der Tastatur schließen lässt, blockiert jede Seite, und ein Newsletter-Pop-up, das mitten in der Bestellung den Fokus an sich reißt, kann einen Kauf verhindern. Testen Sie jedes Skript und jedes Plugin, das Sie eingebunden haben, und fragen Sie Anbieter vor der Installation nach Barrierefreiheit.

• Cookie-Banner. Erreichen Sie „Akzeptieren“ und „Ablehnen“ mit der Tabulatortaste, können Sie beides bei 200 % Zoom lesen und danach dort weitermachen, wo Sie waren?
• Pop-ups. Der Fokus sollte ins Pop-up springen, dort bleiben, bis es geschlossen wird, und dann zurückkehren. Escape sollte es schließen.
• Chat-Widgets. Der Button braucht einen Namen, das Fenster sollte sich per Tastatur öffnen und schließen lassen, und auf dem Smartphone sollte es nicht über „Jetzt bezahlen“ liegen.
• Karussells. Alles, was sich länger als fünf Sekunden automatisch bewegt, braucht eine Möglichkeit zum Pausieren, Beenden oder Ausblenden (WCAG 2.2 (öffnet in einem neuen Tab), Erfolgskriterium 2.2.2).
• Eingebettete Inhalte. Bewertungs-Widgets, Karten und Buchungstools stehen ebenfalls auf Ihrer Seite. Melden Sie Fehler dem Anbieter.

Funktionieren Ihre Videos, PDFs und Speisekarten für alle?

Videos brauchen Untertitel, Audio braucht ein Transkript, und wichtige Informationen sollten nicht nur in einem PDF oder Bild stehen. Ein Restaurant mit einer eingescannten PDF-Speisekarte oder ein Shop, dessen Größentabelle ein Foto ist, schließt Screenreader-Nutzer aus und alle, die auf dem Smartphone hineinzoomen müssen.

• Untertitel und Transkripte. Korrigieren Sie automatische Untertitel vor der Veröffentlichung. Podcasts brauchen eine Textfassung.
• Bilder von Text. Stellen Sie Speisekarten, Preislisten, Größentabellen und Öffnungszeiten auf eine normale Webseite. Muss es ein PDF sein, exportieren Sie es mit Überschriften und Tags aus Ihrer Textverarbeitung, statt einen Ausdruck einzuscannen.
• Ältere Dateien. Der EAA verlangt nicht, dass Sie Office-Dateien oder aufgezeichnete Audio- und Videoinhalte korrigieren, die vor dem 28. Juni 2025 veröffentlicht wurden, oder Archive, die Sie nicht mehr aktualisieren (Art. 2 Abs. 4). Neue Dateien sind erfasst.

Was kann ich selbst beheben, und wann brauche ich Entwickler oder ein Audit?

Die meisten Inhaltsprobleme beheben Sie selbst im CMS: Alternativtexte, Überschriften, Linktexte, Farben, Untertitel und viele Formularbeschriftungen. Probleme auf Theme-Ebene wie fehlende Fokus-Stile, Tastaturfallen und selbst gebaute Aufklappmenüs brauchen jemanden, der programmiert. Ein Audit lohnt sich am meisten, wenn die Grundlagen behoben sind oder bevor ein Redesign live geht.

Welche Rolle spielt ein Widget wie unseres? Ein Panel für Besucher wie SiteAccessible lässt Menschen den Kontrast erhöhen, Text vergrößern oder eine Lesehilfe einschalten. Das hilft manchen Besuchern, hakt aber keinen einzigen Punkt dieser Checkliste ab: Ein Button ohne Namen bleibt ohne Namen, und eine Tastaturfalle bleibt eine Falle. Bringen Sie zuerst die Website in Ordnung und sehen Sie ein Widget oder Plugin als Zugabe.

Wie dokumentiere ich, was ich getan habe?

Führen Sie ein einfaches Protokoll darüber, was Sie wann getestet haben, was behoben ist und was noch nicht funktioniert, und veröffentlichen Sie eine ehrliche Zusammenfassung in einer Erklärung zur Barrierefreiheit. Gilt der EAA für Sie, müssen Sie außerdem angeben, wie Ihre Dienstleistung die Barrierefreiheitsanforderungen erfüllt, meist in Ihren AGB oder einem ähnlichen Dokument.

Diese zweite Pflicht stammt aus Anhang V der Richtlinie; die Form legt das nationale Recht fest, in Deutschland das BFSG. Unser Leitfaden zur Erklärung zur Barrierefreiheit enthält ein Muster zum Anpassen. Danach heißt es dranbleiben:

1. Gehen Sie die Checkliste auf Ihren drei wichtigsten Seiten durch und machen Sie von jedem Fehler einen Screenshot.
2. Beheben Sie die Inhaltspunkte noch diese Woche selbst.
3. Übergeben Sie die Punkte zu Theme und Kasse an Ihre Entwickler, die schlimmsten zuerst.
4. Testen Sie jede Korrektur erneut, mit der Tastatur und mit einem Checker.
5. Veröffentlichen oder aktualisieren Sie Ihre Erklärung, mit Datum.
6. Wiederholen Sie das, sobald Sie eine App oder ein Plugin hinzufügen, das Theme wechseln oder eine neue Landingpage starten.