Barrierefreie Website: Prüfpunkte, BFSG-Pflichten und SEO-Nutzen

Barrierefreie Website praktisch prüfen: Kontrast, Tastatur, Alt-Texte, Formulare – mit Prüfliste, kostenlosen Tools, Einordnung des Barrierefreiheitsstärkungsgesetzes und dem Nutzen für SEO.

Barrierefreiheit klingt nach Pflicht, Paragrafen und grauem Design. In der Praxis ist eine barrierefreie Website vor allem eines: eine Website, die mehr Menschen nutzen können – mit Tastatur statt Maus, mit Screenreader, mit Farbsehschwäche, mit dem Handy in der Sonne oder einfach mit wenig Zeit. Und weil Google Seiten ähnlich „liest“ wie ein Screenreader, profitiert die Sichtbarkeit gleich mit.

Seit dem 28. Juni 2025 ist das Thema für einen Teil der Unternehmen auch gesetzlich relevant. Dieser Guide ordnet das vorsichtig ein und zeigt dir vor allem, was du konkret prüfen und beheben kannst. Du bekommst:

• eine verständliche Einordnung des Barrierefreiheitsstärkungsgesetzes – ohne Rechtsberatung
• fünf praktische Prüfpunkte: Kontrast, Tastatur, Alt-Texte, Formulare, Struktur
• einen Ablauf, mit dem du deine Website in 60 Minuten selbst testest, mit kostenlosen Tools
• die häufigsten Fehler mit konkreter Behebung
• eine realistische Einschätzung von Aufwand und Kosten

Kurz gesagt: Barrierefreiheit in fünf Sätzen

Eine barrierefreie Website lässt sich ohne Maus bedienen, hat ausreichend Kontrast, beschreibt Bilder in Alt-Texten, beschriftet Formularfelder sichtbar und ist logisch mit Überschriften gegliedert. Das Barrierefreiheitsstärkungsgesetz verpflichtet seit Juni 2025 bestimmte Anbieter von Verbraucherdienstleistungen dazu, vor allem Onlineshops und Buchungsstrecken; Kleinstunternehmen sind bei Dienstleistungen ausgenommen. Unabhängig von der Pflicht verbessert Barrierefreiheit die Verständlichkeit für Suchmaschinen und senkt Abbrüche in Formularen. Die größten Hürden findest du selbst in einer Stunde mit Tastatur, Kontrast-Checker und Lighthouse. Ein Overlay-Plugin ersetzt diese Arbeit nicht.

Was Barrierefreiheit im Alltag bedeutet

Eine Website ist barrierefrei, wenn Menschen sie wahrnehmen, bedienen und verstehen können – unabhängig von Einschränkungen oder Situation. Das betrifft weit mehr Menschen, als die meisten annehmen:

• jemand navigiert nur mit der Tastatur, weil die Hand nach einem Unfall in Gips ist
• jemand nutzt einen Screenreader, der die Seite vorliest
• jemand unterscheidet Rot und Grün nicht und sieht die rote Fehlermarkierung nicht
• jemand ist über 60, braucht größere Schrift und tippt auf dem Handy langsamer
• jemand steht auf der Baustelle in der Sonne und erkennt hellgraue Schrift nicht

Ein Teil deiner potenziellen Kunden bricht also heute ab, ohne dass du es merkst – nicht, weil das Angebot nicht passt, sondern weil die Seite sie ausschließt.

Die vier Prinzipien als Merkhilfe

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Websites. Du musst sie nicht auswendig kennen. Ihre vier Prinzipien reichen als Orientierung:

1. Wahrnehmbar: Inhalte sind erkennbar – Kontrast, Alt-Texte, Untertitel.
2. Bedienbar: Alles funktioniert ohne Maus – Tastatur, sichtbarer Fokus, ausreichend große Klickflächen.
3. Verständlich: Klare Sprache, sinnvolle Fehlermeldungen, vorhersehbares Verhalten.
4. Robust: Sauberer Code, den Browser und Hilfstechnik zuverlässig interpretieren.

Die gängige Zielmarke ist die Stufe AA der WCAG 2.1 oder 2.2. Sie liegt auch der europäischen Norm EN 301 549 zugrunde, auf die sich das deutsche Gesetz bezieht.

Barrierefreiheitsstärkungsgesetz: was seit Juni 2025 gilt

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die europäische Barrierefreiheitsrichtlinie in deutsches Recht um und gilt seit dem 28. Juni 2025. Es verpflichtet Hersteller und Anbieter bestimmter Produkte und Dienstleistungen für Verbraucher, diese barrierefrei zu gestalten. Für Websites relevant ist vor allem der Bereich „Dienstleistungen im elektronischen Geschäftsverkehr“ – also Angebote, bei denen Verbraucher online Verträge schließen, buchen oder kaufen.

Wichtig vorab: Wir sind eine Webagentur, keine Kanzlei. Die folgende Tabelle gibt unser Verständnis wieder und ersetzt keine rechtliche Prüfung. Ob deine Website erfasst ist, klärst du mit einem Anwalt, deiner IHK oder Handwerkskammer.

Für erfasste Anbieter gilt außerdem, dass sie Informationen zur Barrierefreiheit ihres Angebots bereitstellen müssen, etwa in den AGB oder auf einer eigenen Seite. Für bestimmte Dienstleistungsverträge, die vor dem Stichtag geschlossen wurden, gibt es Übergangsfristen. Wenn du einen Shop betreibst oder planst, sollte Barrierefreiheit in jedem Fall Teil der Anforderungen sein – im Artikel zu Online-Shop Kosten und Fehlern findest du die übrigen Punkte, die beim Shop-Aufbau oft übersehen werden.

Tipp: Lass dich vom Gesetz nicht in Panik versetzen, aber auch nicht in Sicherheit wiegen. Selbst wenn deine Website nicht erfasst ist: Die Prüfpunkte in diesem Artikel kosten wenig, bringen messbar mehr Anfragen und ersparen dir Diskussionen, wenn sich die Regeln später ausweiten.

Warum Barrierefreiheit SEO und Anfragen stärkt

Google sieht deine Website nicht wie ein Mensch. Es liest Struktur: Überschriften, Listen, Linktexte, Bildbeschreibungen, Formularbeschriftungen. Genau diese Struktur erzwingt Barrierefreiheit. Deshalb ist Barrierefreiheit kein direkter Rankingfaktor, aber ein Fundament, das viele SEO-Probleme gleichzeitig löst:

• Überschriften in logischer Reihenfolge zeigen Google, worum es auf der Seite geht – und Screenreader-Nutzern, wo sie hinspringen können.
• Linktexte, die das Ziel beschreiben („Preise für Badsanierung ansehen“ statt „hier klicken“), geben Google Kontext und Menschen Orientierung.
• Alt-Texte machen Bilder für die Bildersuche auffindbar und für Blinde verständlich.
• Formulare mit klaren Beschriftungen und Fehlermeldungen brechen seltener ab – das sind direkt mehr Anfragen. Wie eine gute Kontaktstrecke aussieht, zeigt der Artikel Kontaktseite optimieren.
• Lesbare Texte mit kurzen Sätzen und ausreichend Kontrast werden länger gelesen.

Dazu kommt die Ladezeit: Schnelle Seiten mit stabilem Layout sind für alle leichter zu bedienen, besonders für Menschen mit Vergrößerung oder langsamer Verbindung. Die Schwellen der Core Web Vitals – Largest Contentful Paint unter 2,5 Sekunden, Interaction to Next Paint unter 200 Millisekunden, Cumulative Layout Shift unter 0,1 – sind damit auch Barrierefreiheitsziele. Was dahintersteckt, erklärt der Artikel Core Web Vitals erklärt.

Prüfpunkt 1: Kontrast und Lesbarkeit

Der häufigste Fehler auf Unternehmens-Websites: hellgraue Schrift auf weißem Grund, weil es „leicht“ wirkt. Auf dem Handy in der Sonne ist sie unsichtbar. Die WCAG legen Mindestwerte für das Kontrastverhältnis zwischen Schrift und Hintergrund fest:

So prüfst du: Öffne die Seite in Chrome, klicke mit der rechten Maustaste auf einen Text, wähle „Untersuchen“ und klicke im Stilbereich auf das Farbfeld der Textfarbe – Chrome zeigt das Kontrastverhältnis und ob es die Stufe AA erreicht. Alternativ nimmst du den kostenlosen Kontrast-Checker von WebAIM und gibst beide Farbwerte ein.

Weitere Punkte zur Lesbarkeit:

• Schriftgröße im Fließtext mindestens 16 Pixel, Zeilenlänge nicht über etwa 80 Zeichen
• Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalte abgeschnitten werden
• Informationen nie nur über Farbe vermitteln: ein Fehler ist rot und hat ein Symbol und einen Text
• Kein Text als Bild – Google und Screenreader lesen ihn nicht

Prüfpunkt 2: Tastatur und Fokus

Der aussagekräftigste Test, den du selbst machen kannst, dauert fünf Minuten: Leg die Maus weg und bediene deine Website nur mit der Tastatur.

Achte dabei auf drei Dinge:

1. Siehst du immer, wo du bist? Der Fokusrahmen darf nicht per CSS entfernt sein. Viele Themes tun genau das, weil der Standardrahmen „unschön“ ist. Gestalte ihn lieber passend zur Marke, aber lass ihn sichtbar.
2. Kommst du überall hin? Menü, Untermenü, Suche, Cookie-Banner, Formular, Absende-Button. Was du nicht erreichst, erreicht auch niemand mit Hilfstechnik.
3. Kommst du überall wieder raus? Ein geöffnetes Menü oder ein Dialog, aus dem die Tastatur nicht mehr herausführt, ist eine „Tastaturfalle“ und ein schwerer Fehler.

Zur Tastatur gehört auch die Größe der Klickflächen. Die WCAG 2.2 verlangen auf Stufe AA mindestens 24 mal 24 Pixel; für Touch-Bedienung haben sich in der Praxis etwa 44 mal 44 Pixel bewährt. Winzige Icon-Links im Footer sind für Menschen mit Zittern oder dicken Fingern nicht bedienbar.

Prüfpunkt 3: Alt-Texte und Bilder

Ein Alt-Text ist die Textbeschreibung eines Bildes, die Screenreader vorlesen und Suchmaschinen indexieren. Er erscheint auch, wenn das Bild nicht lädt. Die Regel ist einfach: Beschreibe, was auf dem Bild zu sehen ist und warum es auf dieser Seite steht.

Drei Regeln, die in der Praxis reichen:

• Informative Bilder bekommen eine Beschreibung in ein bis zwei Sätzen, mit dem Wort, nach dem jemand suchen würde – ohne Aufzählung von Suchbegriffen.
• Dekorative Bilder bekommen einen leeren Alt-Text. So überspringt sie der Screenreader, statt „Bild“ zu sagen.
• Verlinkte Bilder beschreiben das Ziel des Links, nicht das Bild.

Bilder sind außerdem die häufigste Ursache für langsame Seiten. Wie du sie richtig komprimierst und lädst, ohne dass das Layout springt, steht im Artikel zu LCP und Bildern. Videos brauchen Untertitel – nicht nur für Gehörlose, sondern für alle, die ohne Ton schauen.

Prüfpunkt 4: Formulare

Das Kontaktformular ist der Ort, an dem Barrierefreiheit direkt Geld bedeutet. Jeder, der hier scheitert, ist eine verlorene Anfrage.

Sichtbare Beschriftungen. Jedes Feld braucht ein Label, das über oder neben dem Feld steht und im Code mit dem Feld verknüpft ist. Ein Platzhalter im Feld reicht nicht: Er verschwindet beim Tippen, hat meist zu wenig Kontrast und wird von Screenreadern nicht zuverlässig als Beschriftung erkannt.

Pflichtfelder klar kennzeichnen. Ein Sternchen allein erklärt sich nicht. Schreib einmal über das Formular „Felder mit Stern sind Pflichtfelder“ oder kennzeichne optionale Felder mit „(optional)“ – das ist die einfachere Variante, wenn es nur wenige sind.

Fehlermeldungen, die helfen. Statt „Ungültige Eingabe“ in Rot oben auf der Seite: „Bitte gib eine E-Mail-Adresse ein, z. B. name@firma.de“ direkt am Feld, mit Symbol und Text, nicht nur mit Farbe. Nach dem Absenden mit Fehlern springt der Fokus zum ersten fehlerhaften Feld.

Richtige Feldtypen. Ein E-Mail-Feld öffnet auf dem Handy die Tastatur mit @-Zeichen, ein Telefonfeld die Zifferntastatur. Autovervollständigung für Name, E-Mail und Telefon spart Tipparbeit.

Keine Zeitlimits, keine Rätsel. Ein Captcha mit Bilderrätsel ist für Blinde unlösbar und für viele andere eine Hürde. Nutze unsichtbaren Spam-Schutz wie ein Honeypot-Feld. Nach dem Absenden bestätigt eine eigene Danke-Seite mit klarer Überschrift, dass die Anfrage angekommen ist.

Prüfpunkt 5: Überschriften, Links und Buttons

Überschriften als Struktur, nicht als Optik. Genau eine H1 pro Seite, die das Thema nennt. Darunter H2 für Abschnitte, H3 für Unterpunkte, ohne Ebenen zu überspringen. Screenreader-Nutzer springen von Überschrift zu Überschrift, Google liest daraus die Gliederung. Wer eine H3 nimmt, „weil sie kleiner aussieht“, zerstört beides – Schriftgröße regelt man im Stylesheet.

Linktexte, die allein Sinn ergeben. Screenreader können alle Links einer Seite als Liste vorlesen. „Hier klicken“, „mehr“, „weiter“ sagen dann nichts. Besser: „Preise für Webdesign ansehen“, „Checkliste als PDF herunterladen“. Die Prüfregel: Wenn du nur den Linktext liest – weißt du, wohin er führt?

Buttons mit Namen. Ein Icon-Button ohne Text (Lupe, Hamburger-Menü, X zum Schließen) braucht einen unsichtbaren Namen im Code, damit der Screenreader „Suche öffnen“ statt „Button“ ansagt. Buttons sind Buttons und Links sind Links – ein Link, der als Button gestaltet ist, verwirrt Hilfstechnik.

Sprache und Bereiche. Die Sprache der Seite ist im Code hinterlegt, damit der Screenreader deutsche Texte nicht englisch ausspricht. Navigation, Hauptinhalt und Fußbereich sind als solche ausgezeichnet, und ein „Zum Inhalt springen“-Link am Seitenanfang führt an langen Menüs vorbei.

Was verständliche Texte ausmacht – kurze Sätze, aktive Verben, ein Gedanke pro Absatz – gilt für Barrierefreiheit und Verkauf gleichermaßen; die Regeln dafür stehen im Artikel Website-Texte, die verkaufen.

Selbst prüfen in 60 Minuten: Tools und Ablauf

Du brauchst keinen Prüfdienstleister, um die größten Hürden zu finden. Dieser Ablauf funktioniert mit kostenlosen Werkzeugen:

1. Automatischer Check (10 Minuten). Öffne die Startseite in Chrome, drücke F12, wähle den Reiter „Lighthouse“ und starte einen Bericht mit der Kategorie „Barrierefreiheit“. Wiederhole das für die wichtigste Leistungsseite und die Kontaktseite. Die Browser-Erweiterung axe DevTools zeigt dieselben Probleme detaillierter und direkt am Element.
2. Tastaturtest (10 Minuten). Maus weg, Tab drücken, Menü, Formular und Cookie-Banner bedienen. Notiere jede Stelle, an der du nicht weiterkommst oder den Fokus nicht siehst.
3. Kontrast (10 Minuten). Fließtext, Buttons, Feldrahmen und Fußbereich mit dem Kontrast-Checker prüfen. Notiere die Farbwerte unter 4,5 zu 1.
4. Screenreader (15 Minuten). iPhone: VoiceOver in den Bedienungshilfen einschalten. Android: TalkBack. Windows: NVDA kostenlos installieren. Lass dir Startseite und Kontaktformular vorlesen und achte darauf, ob Überschriften angesagt werden, Linktexte verständlich sind und jedes Feld eine Beschriftung hat.
5. Vergrößerung und Handy (10 Minuten). Browser auf 200 Prozent zoomen: Bleibt alles lesbar und bedienbar? Auf dem Handy: Sind Buttons groß genug, lässt sich das Menü öffnen und schließen?
6. Priorisieren (5 Minuten). Zuerst alles, was Bedienung verhindert (Tastaturfallen, unbeschriftete Formulare, unbedienbares Menü). Dann Kontrast. Dann Überschriften und Linktexte. Zuletzt Alt-Texte und Details.

Automatische Tools finden nur einen Teil der Probleme – die Tastatur- und Screenreader-Tests sind deshalb keine Kür, sondern der eigentliche Test.

Tipp: Nimm den Tastaturtest und den Lighthouse-Check in deine Abnahme auf, wenn du eine neue Website oder einen Relaunch beauftragst. Vor dem Livegang ist jede Korrektur günstiger als danach. Die übrigen Prüfpunkte für einen Relaunch stehen in der Checkliste Relaunch ohne Rankingverlust.

Häufige Fehler und wie du sie behebst

Aufwand und Kosten realistisch

Was Barrierefreiheit kostet, hängt davon ab, wann du sie einplanst.

Bei einer neuen Website ist der Mehraufwand gering, wenn Barrierefreiheit von Anfang an Teil der Anforderungen ist: Farben mit ausreichend Kontrast festlegen, Komponenten tastaturbedienbar bauen, Alt-Texte beim Einpflegen der Bilder schreiben. Bei unseren Websites ab 1.499 € netto gehören saubere Struktur, sichtbarer Fokus und beschriftete Formulare zur Grundausstattung – nicht als Extra.

Bei einer bestehenden Website liegt der Aufwand irgendwo zwischen einem Nachmittag und einem Relaunch:

• Gering: Kontraste anpassen, Alt-Texte ergänzen, Linktexte umschreiben, Fokusrahmen reaktivieren. Das sind Änderungen an Farben, Texten und wenigen Zeilen Stylesheet.
• Mittel: Formulare umbauen, Überschriftenstruktur korrigieren, Icon-Buttons benennen, Cookie-Banner tauschen. Hier muss jemand in den Code oder in die Einstellungen des Systems.
• Hoch: Menüs, Slider oder Buchungsstrecken eines Baukasten-Themes, die grundsätzlich nicht tastaturbedienbar sind. Dann ist ein Relaunch oft günstiger als das Flicken.

Ein laufender Posten ist die Pflege: Jedes neue Bild braucht einen Alt-Text, jeder neue Text eine saubere Überschriftenstruktur. Das ist eine Frage der Gewohnheit, nicht des Budgets. Wenn die Website ohnehin in den nächsten Monaten neu gebaut wird, behebst du jetzt nur die Punkte, die Anfragen verhindern – Formular, Kontrast, Tastatur – und planst den Rest in das neue Projekt ein.

Nächster Schritt

Wenn du selbst loslegen willst: Nimm dir eine Stunde für den Prüfablauf oben, notiere die Funde und behebe zuerst, was Bedienung verhindert. Kontrast, Alt-Texte und Linktexte kannst du in den meisten Systemen ohne Entwickler ändern. Für Formulare und Menüs holst du dir Hilfe.

Wenn du lieber einen Partner hast: Wir bauen Websites und Onlineshops von Anfang an barrierefrei – mit sauberer Struktur, tastaturbedienbaren Komponenten und beschrifteten Formularen – und prüfen bestehende Seiten auf die Punkte, die Anfragen kosten. Für Unternehmen aus Magdeburg und ganz Deutschland, mit klarer Priorisierung nach Wirkung.

• Webdesign von 22Orbit
• Onlineshops mit Shopify
• Kostenloses Erstgespräch vereinbaren