Sie brauchen eine Checkliste, keine weitere Erklärung, was das BFSG ist. Dieser Leitfaden gibt Ihnen genau das: jede Barrierefreiheitsanforderung des Barrierefreiheitsstärkungsgesetzes, abgebildet auf konkrete, testbare Prüfpunkte, die Sie heute in Ihrem Online-Shop durchführen können. Jeder Punkt verweist auf das relevante WCAG 2.1 AA-Kriterium und die EN 301 549-Klausel. Drucken Sie ihn aus, teilen Sie ihn mit Ihrem Entwicklungsteam und beginnen Sie mit dem Abhaken.
Bilder und Medien
Jedes nicht-dekorative Bild muss einen aussagekräftigen Alt-Text haben. Produktbilder benötigen Alt-Text mit Produktname und visuellen Details. Dekorative Bilder müssen leere Alt-Attribute haben (alt=""). Icons als Buttons brauchen aria-label.
Prüfpunkt: Rechtsklick auf ein Bild, Element untersuchen, Alt-Attribut prüfen. Wenn dort "IMG_2847.jpg" steht oder es fehlt, ist das ein BFSG-Verstoß (WCAG 1.1.1, EN 301 549 Klausel 9.1.1.1).
Videoinhalte benötigen Untertitel (WCAG 1.2.2). Aufgezeichnete Videos brauchen auch Audiobeschreibungen (WCAG 1.2.5). Live-Videos benötigen Echtzeit-Untertitel (WCAG 1.2.4).
Farbe und Kontrast
Text muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben (WCAG 1.4.3). Großer Text benötigt mindestens 3:1. Nicht-Text-Elemente wie Formularrahmen und Icons benötigen ebenfalls mindestens 3:1 (WCAG 1.4.11).
Farbe darf nie die einzige Möglichkeit sein, Informationen zu vermitteln (WCAG 1.4.1).
Prüfpunkt: Nutzen Sie den Farbkontrast-Checker. Testen Sie Fließtext, Überschriften, Buttons, Formularrahmen, Platzhaltertext und Linkfarben.
Navigation und Tastaturzugang
Jedes interaktive Element muss per Tastatur erreichbar und bedienbar sein (WCAG 2.1.1). Es darf keine Tastaturfallen geben (WCAG 2.1.2). Die Fokusreihenfolge muss logisch dem visuellen Layout folgen (WCAG 2.4.3). Ein sichtbarer Fokusindikator muss auf jedem fokussierbaren Element vorhanden sein (WCAG 2.4.7).
Ein Skip-Navigation-Link muss als erstes fokussierbares Element erscheinen (WCAG 2.4.1).
Prüfpunkt: Tabben Sie durch Ihre Startseite, Kategorieseite, Produktseite und den Checkout. Dokumentieren Sie jeden Punkt, an dem der Fokus verschwindet oder in einer Falle steckt.
Formulare und Eingabefelder
Jedes Formulareingabefeld muss ein sichtbares, programmatisch zugeordnetes Label haben (WCAG 1.3.1, 4.1.2). Platzhaltertext allein als Label ist nicht konform. Fehlermeldungen müssen spezifisch und beschreibend sein (WCAG 3.3.1). Der Eingabezweck muss für persönliche Datenfelder identifizierbar sein — autocomplete-Attribute verwenden (WCAG 1.3.5).
Prüfpunkt: Senden Sie jedes Formular mit leeren oder falschen Daten ab. Nennt jede Fehlermeldung das spezifische Feld und erklärt das Problem?
Seitenstruktur und Semantik
Jede Seite muss genau eine H1-Überschrift haben. Überschriften müssen einer strikten Hierarchie folgen (WCAG 1.3.1). Die Seitensprache muss im HTML-Element deklariert sein (lang="de") (WCAG 3.1.1). Landmark-Regionen (header, nav, main, footer) müssen vorhanden und korrekt beschriftet sein. Listen müssen als Listen ausgezeichnet sein, nicht als Absatzfolgen.
Prüfpunkt: Installieren Sie die HeadingsMap-Browsererweiterung. Gibt es genau eine H1? Folgen die Überschriften logisch ohne übersprungene Ebenen?
Checkout und Zahlung
Der Checkout-Flow ist der Bereich, in dem BFSG-Konformität für Online-Shops am wichtigsten ist. Jeder Checkout-Schritt muss tastaturzugänglich sein. Adressformulare müssen Autocomplete unterstützen. Die Zahlungsmethodenauswahl muss per Tastatur bedienbar und vom Screenreader vorgelesen werden. Die Bestellzusammenfassung muss in logischer Reihenfolge lesbar sein.
Drittanbieter-Zahlungs-Widgets (Stripe, PayPal, Klarna) sind Teil Ihres Checkouts — und deren Barrierefreiheit liegt in Ihrer Verantwortung unter dem BFSG.
Prüfpunkt: Schließen Sie einen kompletten Kauf nur mit der Tastatur ab. Dann wiederholen Sie es mit einem Screenreader.
Erklärung zur Barrierefreiheit
Das BFSG verlangt eine veröffentlichte Erklärung zur Barrierefreiheit. Diese muss enthalten: den beanspruchten Konformitätsstandard, das Datum der letzten Bewertung, bekannte Einschränkungen, Kontaktinformationen für Barrierefreiheits-Feedback und einen Link zur Vollzugsbehörde.
Nutzen Sie den Generator für Barrierefreiheitserklärungen, um eine konforme Erklärung in Minuten zu erstellen.
Prüfpunkt: Finden Sie Ihre Barrierefreiheitserklärung in zwei Klicks von jeder Seite? Enthält sie alle fünf erforderlichen Elemente?
Responsive Design und Textvergrößerung
Inhalte müssen bei 400 Prozent Zoom ohne Informationsverlust umbrechen (WCAG 1.4.10). Text muss auf 200 Prozent vergrößerbar sein (WCAG 1.4.4). Touch-Ziele auf Mobilgeräten müssen mindestens 24x24 CSS-Pixel groß sein.
Prüfpunkt: Zoomen Sie Ihren Browser auf 400 Prozent. Können Sie noch alle Inhalte lesen? Passt sich das Layout ohne horizontales Scrollen an?