Kapitel 08 · Barrierefreie Website

Barrierefreie Website: Checkliste nach BFSG und WCAG 2.2

Die wichtigsten Erfolgskriterien der WCAG 2.2 nach Seitenbereichen geordnet, mit den neuen Anforderungen der Version 2.2, Hinweisen zur Betroffenheit nach BFSG und einem Prüfablauf für kleine Websites.

Eine barrierefreie Website erfüllt die Erfolgskriterien der Web Content Accessibility Guidelines (WCAG) auf der Konformitätsstufe AA. Praktisch heißt das: Inhalte sind wahrnehmbar, alles ist per Tastatur bedienbar, Texte und Formulare sind verständlich und der Code ist für Hilfstechniken lesbar. Die folgende Checkliste ordnet die wichtigsten Kriterien nach Seitenbereichen und nennt jeweils die Nummer des Kriteriums, damit Sie es in der Originalfassung nachschlagen können. Wer vom Barrierefreiheitsstärkungsgesetz (BFSG) betroffen ist und welche Grundprinzipien gelten, fasst das Kapitel Barrierefreie Website zusammen.

Kurz zur Betroffenheit

Das BFSG gilt seit dem 28. Juni 2025. Für Websites relevant sind vor allem Dienstleistungen im elektronischen Geschäftsverkehr, bei denen Verbraucher online einen Vertrag schließen. Kleinstunternehmen sind bei Dienstleistungen von den Anforderungen ausgenommen. Betroffene Anbieter müssen außerdem Informationen bereitstellen, wie ihre Dienstleistung die Anforderungen erfüllt, etwa in den Geschäftsbedingungen oder auf einer eigenen Seite.

Unabhängig von der Pflicht lohnt sich die Checkliste für jede Website. Viele Punkte verbessern zugleich die Bedienung auf dem Smartphone, die Verständlichkeit für alle und die Auswertung durch Suchmaschinen.

Checkliste nach Seitenbereichen

Seitenaufbau und Navigation

Checkliste: Aufbau und Navigation

  • Die Sprache der Seite ist im Code angegeben (3.1.1)
  • Jede Seite hat einen aussagekräftigen Seitentitel (2.4.2)
  • Überschriften, Listen und Tabellen sind als solche ausgezeichnet, nicht nur optisch gestaltet (1.3.1)
  • Ein Sprunglink oder Landmarken erlauben, wiederkehrende Bereiche wie das Menü zu überspringen (2.4.1)
  • Navigation und Hilfeangebote wie Telefon oder Kontaktlink stehen auf allen Seiten an derselben Stelle (3.2.3, 3.2.6)
  • Es gibt mehr als einen Weg zu jeder Seite, etwa Menü und Suche oder Sitemap (2.4.5)

Tastatur und Fokus

Checkliste: Tastaturbedienung

  • Alle Links, Schaltflächen, Menüs und Formularfelder sind per Tabulatortaste erreichbar und bedienbar (2.1.1)
  • Es gibt keine Tastaturfalle, aus der man nicht mehr herauskommt, etwa in eingebetteten Karten oder Videos (2.1.2)
  • Die Reihenfolge beim Tabben folgt der sichtbaren Reihenfolge (2.4.3)
  • Der Fokus ist deutlich sichtbar (2.4.7)
  • Der fokussierte Bereich wird nicht von festen Kopfleisten, Cookie-Bannern oder Chat-Fenstern verdeckt (2.4.11, neu in 2.2)

Texte, Farben und Darstellung

Checkliste: Wahrnehmbarkeit

  • Normaler Text hat mindestens 4,5 zu 1 Kontrast zum Hintergrund, großer Text mindestens 3 zu 1 (1.4.3)
  • Bedienelemente und informative Grafiken wie Symbole oder Feldrahmen haben mindestens 3 zu 1 Kontrast (1.4.11)
  • Informationen werden nicht nur über Farbe vermittelt (1.4.1)
  • Der Text lässt sich auf 200 Prozent vergrößern, ohne dass Inhalte verloren gehen (1.4.4)
  • Bei schmaler Ansicht, entsprechend einer Breite von 320 CSS-Pixeln, ist kein waagerechtes Scrollen nötig (1.4.10)
  • Vergrößerte Zeilen-, Absatz- und Buchstabenabstände zerstören das Layout nicht (1.4.12)
  • Text wird als Text dargestellt, nicht als Bild (1.4.5)

Bilder, Videos und Audio

Checkliste: Medien

  • Informative Bilder haben einen Alternativtext, der ihre Aussage wiedergibt; dekorative Bilder einen leeren (1.1.1)
  • Logos, die verlinkt sind, nennen im Alternativtext das Linkziel, etwa „Startseite“
  • Videos mit Ton haben Untertitel (1.2.2)
  • Audio und Video starten nicht automatisch oder lassen sich sofort stoppen (1.4.2)
  • Bewegte Inhalte wie Slider lassen sich pausieren (2.2.2)
  • Nichts blinkt mehr als dreimal pro Sekunde (2.3.1)

Checkliste: Links und Bedienelemente

  • Linktexte sind aus sich heraus oder mit dem umgebenden Satz verständlich (2.4.4)
  • Schaltflächen und Symbole ohne Text haben einen zugänglichen Namen (4.1.2)
  • Der sichtbare Text einer Schaltfläche ist im zugänglichen Namen enthalten (2.5.3)
  • Klickziele sind mindestens 24 × 24 CSS-Pixel groß oder haben genügend Abstand (2.5.8, neu in 2.2)
  • Funktionen, die Ziehen erfordern, etwa Schieberegler, lassen sich auch mit einfachen Klicks bedienen (2.5.7, neu in 2.2)

Formulare, Buchung und Bezahlung

Formulare sind für die meisten kleinen Websites der wichtigste Bereich, weil hier aus Besuchern Anfragen oder Kunden werden.

Checkliste: Formulare

  • Jedes Feld hat eine sichtbare, dauerhafte Beschriftung, nicht nur einen Platzhaltertext (3.3.2)
  • Pflichtfelder sind erkennbar, nicht nur durch Farbe
  • Felder für persönliche Daten sind für automatisches Ausfüllen ausgezeichnet (1.3.5)
  • Fehler werden in Textform benannt und das betroffene Feld markiert (3.3.1)
  • Fehlermeldungen enthalten einen Korrekturvorschlag, wenn möglich (3.3.3)
  • Bereits eingegebene Daten müssen im selben Vorgang nicht noch einmal eingetippt werden (3.3.7, neu in 2.2)
  • Bei verbindlichen Bestellungen lassen sich Eingaben vor dem Absenden prüfen und korrigieren (3.3.4)
  • Anmeldungen kommen ohne Gedächtnisaufgaben aus, Einfügen von Passwörtern und Passwortmanager sind erlaubt (3.3.8, neu in 2.2)
  • Spamschutz funktioniert ohne Bilderrätsel oder bietet eine zugängliche Alternative
  • Zeitlimits lassen sich verlängern oder abschalten (2.2.1)

Was WCAG 2.2 neu bringt

Die Version 2.2 ist seit Oktober 2023 eine Empfehlung des World Wide Web Consortium. Die europäische Norm EN 301 549, auf die sich das BFSG stützt, verweist derzeit auf WCAG 2.1. Wer neu plant, sollte trotzdem 2.2 zugrunde legen, weil die neuen Kriterien praxisnah sind und frühere Versionen mit abdecken.

Nr. Kriterium Stufe Worum es geht
2.4.11 Fokus nicht verdeckt AA Fokussierte Elemente bleiben zumindest teilweise sichtbar
2.5.7 Ziehbewegungen AA Alternative zu Drag-and-drop mit einfachem Zeigen
2.5.8 Zielgröße (Minimum) AA Klickziele mindestens 24 × 24 CSS-Pixel oder ausreichender Abstand
3.2.6 Konsistente Hilfe A Hilfe und Kontakt an gleichbleibender Stelle
3.3.7 Redundante Eingabe A Keine doppelte Eingabe derselben Daten im Vorgang
3.3.8 Barrierefreie Authentifizierung AA Anmeldung ohne Rätsel oder Gedächtnistest

Zusätzlich gibt es neue Kriterien der Stufe AAA, die für die meisten Websites keine Pflicht sind. Das Kriterium 4.1.1 zur Code-Syntax wurde gestrichen, weil moderne Browser und Hilfstechniken solche Fehler selbst ausgleichen.

So prüfen Sie Ihre Website in vier Schritten

  1. Automatischer Test: Lassen Sie Startseite, eine Leistungsseite und die Kontaktseite mit einem Prüfwerkzeug analysieren, etwa Lighthouse in den Chrome-Entwicklerwerkzeugen oder eine Browsererweiterung. Diese Werkzeuge finden fehlende Alternativtexte, zu geringe Kontraste und fehlende Beschriftungen. Welche kostenlosen Werkzeuge es außerdem gibt, zeigt der Überblick über kostenlose SEO-Analyse-Tools, von denen einige auch Barrierefreiheit prüfen.
  2. Tastaturtest: Bedienen Sie die Seite ohne Maus, vom Menü bis zum Absenden des Formulars.
  3. Zoom- und Mobiltest: Vergrößern Sie auf 200 und 400 Prozent und prüfen Sie die Seite auf einem kleinen Smartphone.
  4. Inhaltlicher Test: Lesen Sie Alternativtexte, Linktexte und Fehlermeldungen. Ergeben sie ohne Bild und ohne Zusammenhang Sinn?

Automatische Tests erkennen nur einen Teil der Probleme. Für Shops und Buchungsstrecken, die unter das BFSG fallen, ist eine fachkundige Prüfung sinnvoll, idealerweise unter Einbeziehung von Menschen, die Hilfstechnik im Alltag nutzen.

Barrierefreiheit gehört ins Pflichtenheft

Am günstigsten ist Barrierefreiheit, wenn sie von Anfang an vereinbart ist. Nennen Sie im Auftrag die Konformitätsstufe, etwa WCAG 2.2 AA, und machen Sie die Prüfung zum Teil der Abnahme. Wie Sie das formulieren, zeigt der Artikel Pflichtenheft für die Website.

Informationen zur Barrierefreiheit

Anbieter, die unter das BFSG fallen, müssen in barrierefreier Form erklären, wie ihre Dienstleistung die Anforderungen erfüllt. Typische Inhalte sind eine allgemeine Beschreibung der Dienstleistung, Erläuterungen zur Bedienung und Angaben dazu, wie die Barrierefreiheitsanforderungen umgesetzt werden, außerdem die zuständige Marktüberwachungsbehörde. Viele Anbieter stellen diese Informationen auf eine eigene Seite, die aus dem Fußbereich verlinkt ist. Für Websites öffentlicher Stellen gelten mit der Erklärung zur Barrierefreiheit eigene, etwas andere Vorgaben.

Häufige Fragen

Fragen und Antworten

Gilt das BFSG für meine Website?
Das BFSG betrifft vor allem Dienstleistungen im elektronischen Geschäftsverkehr, also Websites und Apps, über die Verbraucher Verträge schließen, etwa Onlineshops oder Buchungen mit Bezahlung. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme sind bei Dienstleistungen ausgenommen. Reine Informationsseiten fallen nach verbreiteter Auffassung nicht darunter. Im Einzelfall hilft die Kammer oder eine Kanzlei.
Was ist der Unterschied zwischen WCAG 2.1 und 2.2?
WCAG 2.2 baut auf 2.1 auf und ergänzt neue Erfolgskriterien, etwa zur Sichtbarkeit des Tastaturfokus, zur Mindestgröße von Klickzielen, zu Alternativen für Ziehbewegungen und zu Anmeldeverfahren ohne Gedächtnisaufgaben. Ein Kriterium zur Code-Syntax ist entfallen. Wer 2.2 erfüllt, erfüllt in aller Regel auch 2.1.
Reicht ein Barrierefreiheits-Overlay oder Plugin?
Nein. Werkzeuge, die per Skript eine Leiste mit Schriftgröße oder Kontrastumschaltung einblenden, beheben die eigentlichen Probleme im Code und in den Inhalten nicht. Fehlende Alternativtexte, unbedienbare Menüs oder unbeschriftete Formulare bleiben bestehen.
Was droht, wenn ein betroffenes Angebot nicht barrierefrei ist?
Zuständig sind die Marktüberwachungsbehörden der Länder. Sie können die Behebung von Mängeln verlangen und im äußersten Fall die Einstellung der Dienstleistung anordnen. Das Gesetz sieht für bestimmte Verstöße außerdem Bußgelder vor, die je nach Schwere bis zu 100.000 Euro betragen können.

Zuletzt überarbeitet am 26. Oktober 2026 von der Redaktion Werbe-Wissen. Fehler gefunden?Schreiben Sie uns.