Barrierefreie Website: Checkliste mit 38 Prüfpunkten nach BFSG

Für wen diese Checkliste gedacht ist

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz. Seitdem kursieren Checklisten, die fünfzig Kriterien in beliebiger Reihenfolge aufzählen. Damit kann niemand arbeiten, der begrenzte Zeit hat und wissen will, wo er anfangen soll.

Diese Checkliste ist deshalb nach Schwere sortiert, nicht nach Aufwand. Ganz oben stehen die Punkte, die eine Website für einen Teil der Nutzer komplett unbenutzbar machen. Ganz unten steht, was auffällt, aber niemanden aussperrt. Wer die Liste von oben nach unten abarbeitet, hat nach dem ersten Drittel die meiste Wirkung erzielt.

Vorher steht allerdings eine andere Frage, und die überspringen die meisten.

Schritt 0: Bist Du überhaupt betroffen?

Das BFSG gilt nicht für jede Website. Es gilt für Unternehmen, die bestimmte Produkte und Dienstleistungen an Verbraucher anbieten. Drei Fragen klären das:

Richtet sich Dein Angebot an Verbraucher? Das Gesetz greift bei B2C. Wer ausschließlich an andere Unternehmen verkauft, fällt grundsätzlich nicht darunter. Ausschließlich heißt dabei wirklich ausschließlich. Ein einziger Verbraucher-Shop neben dem B2B-Geschäft reicht.

Kann man über Deine Website einen Vertrag abschließen? Das ist der Kern. Erfasst ist der elektronische Geschäftsverkehr, also Angebote, die über eine Website oder App zum Vertragsschluss führen: Onlineshops, Buchungssysteme und Terminsysteme, Banken, Versicherungen, Telekommunikation, Personenbeförderung, E-Books. Eine reine Visitenkarten-Website ohne Bestellfunktion oder Buchungsfunktion ist nach herrschender Auslegung nicht erfasst. Ein Kontaktformular allein macht daraus noch keinen Vertragsschluss. Ein Terminkalender mit verbindlicher Buchung sehr wohl.

Bist Du Kleinstunternehmen? Für Dienstleistungen gibt es eine Ausnahme: weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Beide Bedingungen müssen zusammen erfüllt sein.

Der Punkt, den fast alle übersehen: Diese Ausnahme gilt nur für Dienstleistungen, nicht für Produkte. Wer als Zwei-Personen-Betrieb einen Onlineshop führt, verkauft im Sinne des Gesetzes Produkte und ist trotz Kleinstunternehmensgröße in der Pflicht.

Halte das Ergebnis schriftlich fest. Diese Notiz ist die Grundlage für jede weitere Entscheidung und im Zweifel Dein Nachweis, dass Du die Frage geprüft hast.

Stufe 1: Was eine Website unbenutzbar macht

Diese sieben Punkte zuerst. Jeder einzelne davon sperrt einen Teil der Nutzer vollständig aus.

• 1. Alles ist per Tastatur erreichbar. Leg die Maus weg und bediene die Seite nur mit Tab, Shift und Tab, Enter und den Pfeiltasten. Jeder Link, jeder Button, jedes Eingabefeld muss erreichbar sein.
• 2. Der Fokus ist immer sichtbar. Du musst jederzeit sehen, wo Du gerade stehst. outline: none im CSS ohne sichtbaren Ersatz ist der klassische Verstoß und in fast jedem Theme zu finden.
• 3. Es gibt keine Tastaturfallen. Aus Menüs, Modals und dem Cookie-Banner musst Du per Escape wieder herauskommen. Wer irgendwo hängen bleibt, kommt ohne Maus nicht mehr weiter.
• 4. Die Fokusreihenfolge ist logisch. Von oben nach unten, von links nach rechts, passend zur visuellen Anordnung.
• 5. Jedes Formularfeld hat ein echtes Label. Ein <label> mit for und id verknüpft. Ein Platzhaltertext ist kein Label, er verschwindet beim Tippen.
• 6. Fehlermeldungen stehen im Text. Eine rote Umrandung allein sagt einem Screenreader nichts. Die Meldung muss über aria-describedby mit dem Feld verbunden sein und benennen, was falsch ist. Also „Bitte gib eine E-Mail-Adresse mit @ an" statt „Ungültige Eingabe".
• 7. Es gibt einen Sprunglink zum Inhalt. Ein Link ganz oben, der die Navigation überspringt. Ohne ihn tabbt sich ein Screenreader-Nutzer auf jeder Unterseite erneut durch das komplette Menü.

Stufe 2: Struktur, die Hilfsmittel lesen können

Screenreader lesen die Auszeichnung, nicht das Aussehen. Ein <div> mit Klick-Handler ist für sie kein Button.

• 8. Genau eine `<h1>` pro Seite.
• 9. Die Überschriftenhierarchie hat keine Lücken. Nach <h2> kommt <h3>, nicht <h4>. Überschriften sind Struktur, kein Schriftgrößenwähler.
• 10. `<button>` für Aktionen, `<a href>` für Navigation. Nicht umgekehrt.
• 11. Bereiche sind ausgezeichnet. <nav>, <main>, <header>, <footer> statt durchnummerierter Container.
• 12. Listen sind Listen. <ul> und <ol>, keine Absätze mit Aufzählungszeichen davor.
• 13. Tabellen haben Kopfzellen. <th> mit scope, damit die Zuordnung von Wert und Spalte erhalten bleibt.
• 14. Die Seitensprache ist gesetzt. <html lang="de">. Fehlt das, liest der Screenreader deutschen Text mit englischer Aussprache vor.
• 15. Fremdsprachige Passagen sind ausgezeichnet. Ein englisches Zitat bekommt lang="en".
• 16. ARIA nur, wo HTML nichts anbietet. Native Elemente schlagen jedes ARIA-Attribut. Falsch gesetztes ARIA richtet mehr Schaden an als gar keines.

Stufe 3: Wahrnehmbarkeit

• 17. Textkontrast mindestens 4,5:1. Für großen Text ab 18,66 Pixel fett oder 24 Pixel normal reichen 3:1.
• 18. Bedienelemente erreichen 3:1. Der graue Rahmen um ein Eingabefeld zählt mit. Das ist der Punkt, an dem die meisten hellen Designs scheitern.
• 19. Information hängt nie allein an Farbe. Ein rot markiertes Pflichtfeld braucht zusätzlich Text oder ein Symbol.
• 20. Die Seite bleibt bei 200 Prozent Zoom nutzbar. Kein abgeschnittener Inhalt, kein horizontales Scrollen.
• 21. Der Inhalt fließt bei 320 Pixel Breite um. Entspricht 400 Prozent Zoom auf einem gängigen Desktop.
• 22. Alt-Texte beschreiben die Funktion, nicht das Bild. Bei einem Logo, das zur Startseite führt, gehört „Startseite" in den Alt-Text, nicht „Firmenlogo blau".
• 23. Dekorative Bilder haben `alt=""`. Leer, aber vorhanden. So überspringt der Screenreader sie, statt den Dateinamen vorzulesen.
• 24. Videos haben Untertitel. Bei längeren Videos zusätzlich ein Transkript oder eine Audiodeskription.
• 25. Nichts startet automatisch mit Ton. Und alles, was länger als drei Sekunden läuft, lässt sich anhalten.
• 26. Nichts blitzt öfter als dreimal pro Sekunde. Schnelleres Blinken kann Anfälle auslösen.
• 27. Klickflächen sind mindestens 24 mal 24 Pixel groß. Anforderung aus WCAG 2.2, betrifft vor allem Icon-Buttons auf dem Handy.
• 28. Linktexte funktionieren ohne Umgebung. „Mehr erfahren" ist wertlos, wenn ein Screenreader nur die Linkliste vorliest.
• 29. Die Bewegung respektiert `prefers-reduced-motion`. Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine Parallaxeffekte.

Stufe 4: Verständlichkeit und Bedienlogik

• 30. Die Navigation ist auf allen Seiten gleich. Gleiche Reihenfolge, gleiche Bezeichnungen.
• 31. Gleiche Funktionen heißen überall gleich. Nicht einmal „Absenden" und einmal „Abschicken".
• 32. Zeitlimits sind verlängerbar oder abschaltbar. Ein Warenkorb, der nach fünf Minuten verfällt, ist eine Barriere.
• 33. Pflichtfelder sind ausdrücklich gekennzeichnet. Ein Sternchen ohne Erklärung reicht nicht.
• 34. `autocomplete` ist gesetzt. Bei Name, Adresse, E-Mail. Das hilft allen Nutzern, nicht nur denen mit Einschränkung.
• 35. Vor einer verbindlichen Bestellung ist eine Korrektur möglich. Prüfen, ändern, bestätigen.

Stufe 5: Dokumentation

• 36. Die Erklärung zur Barrierefreiheit ist online. Eine eigene, aus dem Footer erreichbare Seite.
• 37. Sie nennt den echten Stand. Auch offene Punkte. Verlangt ist Ehrlichkeit, nicht Perfektion.
• 38. Sie enthält einen Kontaktweg für Barriere-Meldungen. Mit einer Reaktionszusage, die Du auch einhältst.

Wie Du prüfst, ohne Dich selbst zu täuschen

Automatisierte Werkzeuge sind der richtige Einstieg, weil sie kostenlos sind und in Minuten laufen. Sie finden aber nur etwa ein Drittel der Probleme. Alles, was mit Verständlichkeit, sinnvoller Reihenfolge und passenden Alternativtexten zu tun hat, sehen sie nicht.

Für den automatisierten Teil reichen drei Werkzeuge:

• Lighthouse in Chrome unter F12, Kategorie Accessibility
• axe DevTools als Browser-Erweiterung, meldet präziser als Lighthouse
• WAVE, markiert die Funde direkt auf der Seite

Teste nicht nur die Startseite. Nimm mindestens Startseite, eine Inhaltsseite, das Kontaktformular oder Buchungsformular und den Checkout.

Danach kommen zwei manuelle Prüfungen, die zusammen fünfzehn Minuten dauern und mehr finden als jedes Tool:

Der Tastaturdurchlauf. Maus weg, einmal komplett durch die Seite tabben. Du merkst sofort, wo der Fokus verschwindet und wo Du hängen bleibst.

Der Screenreader-Durchlauf. VoiceOver ist auf macOS eingebaut und startet mit Cmd und F5. Unter Windows ist NVDA kostenlos. Hör Dir eine Seite einmal komplett an. Spätestens beim dritten „Mehr erfahren" ohne Kontext verstehst Du, warum Linktexte zählen.

Warum Overlay-Tools das Problem nicht lösen

Es gibt Anbieter, die ein Skript verkaufen, das per JavaScript über die bestehende Seite gelegt wird und sie angeblich barrierefrei macht. Ein Button rechts unten, ein paar Schieberegler für Kontrast und Schriftgröße, fertig.

Das funktioniert nicht, und zwar aus einem einfachen Grund: Ein Overlay kann die zugrunde liegende Auszeichnung nicht reparieren. Ein <div>, das eigentlich ein Button sein müsste, bleibt für den Screenreader ein <div>. Ein fehlendes Formularlabel bleibt fehlend. Verbände von Betroffenen kritisieren Overlays ausdrücklich, weil sie die gewohnten Einstellungen der Nutzer teilweise überschreiben und die Bedienung dadurch verschlechtern.

Für die Erfüllung der gesetzlichen Anforderungen reicht ein Overlay nicht. Es kostet jährlich Geld und ersetzt keinen einzigen Punkt dieser Checkliste.

Welche Dokumentation das Gesetz verlangt

Neben der Erklärung zur Barrierefreiheit auf der Website solltest Du intern festhalten, was Du geprüft hast und mit welchem Ergebnis. Das ist keine Formsache: Zuständig ist die Marktüberwachungsbehörde der Länder, und der Ablauf ist gestuft. Erst kommt die Aufforderung, Mängel zu beseitigen, meist nach einem Hinweis Dritter. Dann folgt eine Anordnung mit Frist. Am Ende steht ein Bußgeld von bis zu 100.000 Euro und im Extremfall die Untersagung der Dienstleistung.

Wer an dem Punkt eine dokumentierte Prüfung und einen laufenden Maßnahmenplan vorlegen kann, steht deutlich besser da als jemand, der bei null anfängt.

Ehrlich eingeordnet: Die Behörde durchsucht nicht von sich aus das Netz. Das reale Risiko entsteht durch Hinweise von Verbänden, Wettbewerbern und Betroffenen. Es ist damit kein akutes Massenrisiko, aber ein dauerhaft offenes.

Was Barrierefreiheit für Deine Sichtbarkeit bringt

Diese Frage stellt fast niemand, obwohl sie den Aufwand mit am besten rechtfertigt. Google liest eine Seite technisch ähnlich wie ein Screenreader. Fast jeder Punkt dieser Liste zahlt deshalb direkt auf die Suchmaschinenoptimierung ein:

• Alt-Texte für Bilder: Bilder werden für die Bildersuche auffindbar
• Lückenlose Überschriftenhierarchie: Google erkennt die Gliederung der Seite
• Semantisches HTML: Bessere Inhaltsauswertung, mehr Rich Results
• Sprechende Linktexte statt „hier klicken": Stärkere interne Verlinkung
• Kein Layoutsprung beim Laden: Bessere Core Web Vitals
• Seitensprache gesetzt: Korrekte Zuordnung im richtigen Sprachindex

Wie die Ladewerte im Einzelnen zusammenhängen, steht in unserem Beitrag zu den Core Web Vitals. Deshalb behandeln wir Barrierefreiheit nicht als Compliance-Aufgabe, sondern als Teil sauberer Webentwicklung.

Was die Umsetzung kostet

Bei einer bestehenden Website mit zehn bis zwanzig Seiten liegt der Aufwand für Analyse und Umsetzung erfahrungsgemäß im niedrigen vierstelligen Bereich. Der Ausschlag kommt von der technischen Substanz: Eine sauber entwickelte Seite ist in Tagen nachgebessert, ein verschachteltes Baukasten-Template kann deutlich teurer werden als ein Neubau.

Bei einer neu gebauten Website ist der Mehraufwand gering, weil die meisten Punkte ohnehin zu guter Umsetzung gehören. Was eine Website insgesamt kostet, haben wir hier aufgeschlüsselt: Was kostet eine Website?

Der Posten, den man nicht vergessen darf, ist die laufende Pflege. Barrierefreiheit ist kein Zustand, sondern eine Eigenschaft, die bei jedem neuen Inhalt aufs Neue entsteht oder verloren geht. Ein Bild ohne Alt-Text, das jemand schnell in eine Seite zieht, hebelt Punkt 22 wieder aus. Wer selbst keine Routine dafür aufbauen will, gibt das in die laufende Website-Pflege.

Häufige Fragen

Gilt das BFSG auch für bestehende Websites? Ja. Für Websites gibt es keinen Bestandsschutz. Übergangsfristen laufen nur für bestimmte Selbstbedienungsterminals, nicht für den elektronischen Geschäftsverkehr.

Welche Norm gilt konkret? Das Gesetz formuliert Ziele, die technische Konkretisierung liefert die europäische Norm EN 301 549. Sie verweist auf die WCAG in der Stufe AA. Praktisch arbeitest Du also gegen WCAG 2.1 AA, und mit WCAG 2.2 kommen einzelne Punkte hinzu, etwa die Mindestgröße von Klickflächen.

Was ist der Unterschied zwischen BITV und WCAG? Die WCAG sind der internationale Standard. Die BITV 2.0 ist die deutsche Verordnung, die diesen Standard für öffentliche Stellen verbindlich macht. Für private Unternehmen gilt über das BFSG der Weg über die EN 301 549, inhaltlich landest Du an derselben Stelle.

Reicht ein Barrierefreiheits-Plugin? Für Teilaspekte ja, für die Gesamtanforderung nein. Plugins können Kontraste prüfen oder fehlende Alt-Texte melden. Die Struktur Deiner Templates, die Bedienbarkeit Deiner Formulare und die Qualität Deiner Texte ändern sie nicht.

Mein Blog liegt auf derselben Domain wie mein Shop. Muss er auch barrierefrei sein? Ein Blog ohne Verkaufsfunktion oder Buchungsfunktion ist für sich genommen nicht erfasst. Liegt er auf derselben Domain wie ein Shop, ist die Abgrenzung praktisch kaum haltbar. Behandle ihn im Zweifel mit.

Wer haftet, meine Agentur oder ich? Verpflichtet ist das Unternehmen, das die Dienstleistung anbietet, also Du. Was die Agentur schuldet, ist eine Frage Eures Vertrags und ändert an der Pflicht nach außen nichts.

Wie lange dauert die Umsetzung? Die Punkte aus Stufe 1 sind bei den meisten Seiten in wenigen Tagen behoben. Stufe 2 und 3 hängen davon ab, wie viele Templates betroffen sind. Rechne bei einer typischen Unternehmenswebsite mit zwei bis vier Wochen bis zu einem Stand, den Du dokumentieren kannst.

Du willst nicht raten, sondern wissen, wo Deine Website steht? Wir prüfen sie automatisiert und manuell und liefern eine nach Schwere sortierte Mängelliste statt eines Tool-Reports: Webcompliance bei Clearform.