Checkliste: Barrierefreie Website nach BFSG

Vorab, damit Sie wissen, welche Pflichten für Ihre Website gelten. Im Zweifel klären Sie die Einordnung mit Ihrer Rechtsberatung.

• Klären, ob Verbraucher über Ihre Website einen Vertrag abschließen: Shop, Buchung, Bestellformular, Abo Warum: Das BFSG erfasst Websites vor allem dann, wenn Verbraucher darüber einen Vertrag abschließen, also auch Shops für Händler und Endkunden, reine B2B-Angebote und Informationsseiten mit Kontaktformular in der Regel nicht.
• Prüfen, ob Sie als Kleinstunternehmen gelten: weniger als zehn Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme Warum: Kleinstunternehmen, die Dienstleistungen anbieten, sind von den Barrierefreiheitsanforderungen ausgenommen, müssen den Status auf Nachfrage der Behörde aber belegen können.
• Auch ohne Pflicht die Grundlagen umsetzen: Kontraste, Tastaturbedienung, beschriftete Formulare Warum: Davon profitieren ältere Besucher und alle, die gerade mit einer Hand am Smartphone bedienen, und Ihr Angebot ist vorbereitet, falls es später unter das Gesetz fällt.

• Textkontrast mindestens 4,5:1, bei großer Schrift mindestens 3:1 Warum: Schwache Kontraste gehören zu den häufigsten Befunden und treffen auch alle, die bei Sonnenlicht auf ihr Smartphone schauen.
• Bedienelemente und Icons mit mindestens 3:1 Kontrast: Rahmen von Eingabefeldern, Buttons, Fokusrahmen Warum: Ist der Rahmen eines Eingabefelds kaum zu sehen, finden Menschen mit Sehschwäche das Feld nicht.
• Informationen nicht nur über Farbe vermitteln: Fehler, Pflichtfelder, Links im Text Warum: Wer Rot und Grün nicht unterscheiden kann, braucht zusätzlich einen Text, ein Symbol oder eine Unterstreichung.
• Alternativtexte für alle inhaltlichen Bilder, ein leeres alt-Attribut für reine Dekoration Warum: Screenreader lesen den Alternativtext vor und überspringen Bilder mit leerem alt-Attribut, statt den Dateinamen anzusagen.
• Untertitel für Videos, Transkript für reine Audiodateien Warum: Ohne Untertitel erfahren gehörlose und schwerhörige Menschen nicht, was gesagt wird, und ausgenommen sind nur Aufzeichnungen, die vor dem 28. Juni 2025 veröffentlicht wurden.
• Bei 200 % Zoom und auf schmalen Bildschirmen ohne Verlust nutzbar Warum: Wer die Seite vergrößert, darf weder abgeschnittene Texte noch verschwundene Menüs vorfinden, und Fließtext soll sich ohne waagerechtes Scrollen lesen lassen.

• Alles allein mit der Tastatur bedienbar, ohne Tastaturfallen: Menü, Filter, Slider, Pop-ups, Checkout Warum: Wer keine Maus benutzt, bewegt sich mit Tab, Enter und Pfeiltasten durch die Seite, und was nur per Maus geht oder den Fokus festhält, ist eine Sackgasse.
• Fokus deutlich sichtbar und in logischer Reihenfolge Warum: Ohne sichtbaren Fokus wissen Tastaturnutzer nicht, wo sie gerade sind, und eine springende Reihenfolge macht Formulare unbenutzbar.
• Link „Zum Inhalt springen“ am Seitenanfang Warum: Sonst muss sich jeder Tastatur- und Screenreader-Nutzer auf jeder Seite erst durch das ganze Menü arbeiten.
• Automatisch laufende Slider und Animationen lassen sich anhalten, nichts blinkt öfter als dreimal pro Sekunde Warum: Bewegte Inhalte lenken ab und sind mit Screenreader kaum zu erfassen, und schnelles Blinken kann Anfälle auslösen.
• Zeitlimits vermeiden oder verlängerbar machen, etwa bei Sitzungen im Checkout Warum: Wer langsamer liest oder tippt, verliert sonst den Warenkorb oder die bereits eingegebenen Daten.
• Aussagekräftige Linktexte statt „hier klicken“ oder „mehr“ Warum: Screenreader-Nutzer lassen sich oft alle Links einer Seite als Liste vorlesen, und dann hilft „mehr“ nicht weiter.

• Sprache der Seite im Code angeben, anderssprachige Abschnitte ebenfalls Warum: Nur mit dem richtigen lang-Attribut spricht der Screenreader deutsche und englische Texte richtig aus.
• Menü, Suche und wiederkehrende Elemente auf allen Seiten an derselben Stelle und gleich benannt Warum: Wer die Seite nicht auf einen Blick überschauen kann, verlässt sich darauf, dass sich die Navigation überall gleich verhält.
• Jedes Formularfeld mit sichtbarem, verknüpftem Label, ein Platzhaltertext ersetzt kein Label Warum: Der Platzhalter verschwindet beim Tippen, und ohne verknüpftes Label sagt der Screenreader nur „Eingabefeld“.
• Fehlermeldungen nennen das Feld und sagen, wie es richtig geht Warum: Ein Satz wie „Bitte geben Sie eine gültige E-Mail-Adresse ein“ hilft weiter, ein rot umrandetes Feld ohne Text nicht.
• Autovervollständigung für Name, Adresse, E-Mail und Telefon im Code freigeben Warum: Mit den passenden autocomplete-Angaben füllt der Browser die Felder aus, das erspart Menschen mit motorischen oder kognitiven Einschränkungen viel Tipparbeit.
• Vor dem Absenden einer Bestellung eine Übersicht zum Prüfen und Korrigieren anzeigen Warum: Bei Bestellungen und Zahlungen verlangt WCAG 2.1 AA, dass Angaben vor dem Absenden geprüft und korrigiert oder danach rückgängig gemacht werden können.
• Anmeldung, Sicherheitsabfragen und Bezahlung ohne Barrieren, auch bei eingebundenen Diensten Warum: Für Online-Shops nennt § 19 der Verordnung zum BFSG Identifizierung, Sicherheits- und Zahlungsfunktionen ausdrücklich, und gerade dort stecken oft fremde Plugins und Skripte.

• Sauberes HTML: Überschriften in logischer Reihenfolge, Listen, echte Buttons statt anklickbarer div-Elemente, Quelltext in der sichtbaren Reihenfolge Warum: Screenreader erkennen Aufbau und Funktion einer Seite am Code und lesen in dessen Reihenfolge vor, nicht nach der Optik.
• Buttons und Icons mit verständlichem Namen: Warenkorb, Suche, Menü, Schließen Warum: Ein Icon-Button ohne Namen wird nur als „Schaltfläche“ vorgelesen, und niemand weiß, was er tut.
• Meldungen ohne Seitenwechsel ansagen lassen: Artikel im Warenkorb, Filterergebnisse, Fehler nach dem Absenden Warum: Ändert sich etwas, ohne dass der Fokus springt, bekommen Screenreader-Nutzer es sonst nicht mit.
• ARIA nur dort, wo HTML nicht reicht, und dann korrekt: Menüs, Akkordeons, Dialoge Warum: Falsches ARIA kündigt dem Screenreader Funktionen an, die das Element nicht hat, und schadet dann mehr als fehlendes.
• Kein Overlay-Plugin als Ersatz für die Umsetzung im Code Warum: Ein eingeblendetes Bedienfeld für Schriftgröße und Kontrast behebt keine fehlenden Formular-Beschriftungen und keine Tastaturfallen im Theme. Welche Plugins wirklich helfen

• Automatisch prüfen, etwa mit WAVE, axe oder Lighthouse Warum: Die Werkzeuge finden schnell fehlende Alternativtexte, schwache Kontraste und unbeschriftete Felder, aber nur einen Teil aller Barrieren.
• Von Hand prüfen: den Weg bis zur Bestellbestätigung nur mit Tastatur und mit Screenreader wie NVDA oder VoiceOver Warum: Tastaturfallen, eine unlogische Fokus-Reihenfolge und unverständliche Ansagen findet kein automatischer Test.
• Alle Seitentypen prüfen, nicht nur die Startseite: Kategorie, Produkt, Warenkorb, Checkout, Kundenkonto, Formulare Warum: Barrieren sitzen meist in den Abläufen, und eine gute Startseite sagt nichts über den Checkout.
• Neue PDFs und Dokumente zum Herunterladen ebenfalls barrierefrei, etwa mit PAC prüfen Warum: Ausgenommen sind nur Office-Dateien, die vor dem 28. Juni 2025 veröffentlicht wurden, also nicht AGB oder Produktblätter, die Sie heute hochladen.
• Befunde mit Seite, Kriterium und Priorität festhalten und abarbeiten Warum: Aus der Liste wird der Maßnahmenplan, und später belegt sie, was Sie in den Informationen zur Barrierefreiheit schreiben.

• Informationen zur Barrierefreiheit nach Anlage 3 BFSG veröffentlichen: Dienstleistung, Ablauf, Erfüllung der Anforderungen, zuständige Marktüberwachungsbehörde Warum: Diese Angaben verlangt das Gesetz von Unternehmen, und Vorlagen für Behörden passen nicht, weil ihnen unter anderem die Marktüberwachungsbehörde fehlt. Angaben und Muster
• Prüfmaßstab, Prüfdatum, Prüfmethode und bekannte Einschränkungen offen nennen Warum: Was dort steht, müssen Sie belegen können, und eine offen genannte Einschränkung ist besser als eine Konformität, die ein einfacher Tastaturtest widerlegt.
• Die Informationen als Text auf einer eigenen Seite mit Link in der Fußzeile veröffentlichen Warum: Das Gesetz verlangt die AGB oder eine andere deutlich wahrnehmbare Stelle in barrierefreier Form, und ein eingescanntes PDF erfüllt das nicht.
• Einen Kontaktweg für gemeldete Barrieren angeben Warum: Das BFSG schreibt Unternehmen keinen Feedback-Mechanismus vor, mit einer Kontaktadresse landen Hinweise aber bei Ihnen, bevor sich jemand bei der Behörde beschwert.
• Angaben der Hersteller zur Barrierefreiheit ihrer Produkte im Shop weitergeben Warum: Stellt ein Hersteller solche Informationen bereit, verlangt § 19 der Verordnung zum BFSG, dass Ihr Shop sie anzeigt.
• Die Informationen nach jeder größeren Änderung prüfen und das Datum anpassen: Relaunch, Theme-Wechsel, neuer Checkout Warum: Nach § 14 Abs. 3 BFSG müssen Sie Änderungen an der Dienstleistung, an den Anforderungen und an den Normen berücksichtigen.
• Alle, die Inhalte pflegen, in Alternativtexten, Überschriften und Linktexten schulen Warum: Ein barrierefreies Theme hilft wenig, wenn neue Seiten und Produkte ohne Alternativtext oder mit übersprungenen Überschriften online gehen.
• Barrierefreiheit in feste Prüfintervalle und in die Wartung aufnehmen Warum: Plugin-Updates und neue Inhalte können jederzeit neue Barrieren einbauen, die niemand bemerkt, solange keiner nachsieht. WordPress-Betreuung