Eine Website, die nicht alle bedienen können, verliert Kunden – oft ohne es zu merken. Barrierefreies Webdesign sorgt dafür, dass Menschen mit Seh-, Hör- oder motorischen Einschränkungen, ältere Nutzer und alle, die gerade unterwegs mit dem Smartphone surfen, deine Seite problemlos nutzen können. Seit Juni 2025 ist das für viele Online-Angebote in Deutschland außerdem Pflicht. In diesem Leitfaden erfährst du, was die WCAG verlangen, wen das Barrierefreiheitsstärkungsgesetz betrifft, welche Fehler am häufigsten sind und wie du deine Website Schritt für Schritt barrierefrei machst.
Das Wichtigste in Kürze
- Gesetzliche Pflicht seit 28. Juni 2025: Das BFSG verlangt Barrierefreiheit für viele Online-Angebote an Verbraucher, etwa Onlineshops und Buchungsportale. Kleinstunternehmen mit Dienstleistungen sind ausgenommen.
- Maßstab ist WCAG 2.1 Stufe AA über die europäische Norm EN 301 549. Die neuere WCAG 2.2 ist eine sinnvolle Orientierung.
- Fast jede Website hat Barrieren: Auf 95,9 % von einer Million untersuchter Startseiten wurden Fehler gefunden – am häufigsten zu geringer Kontrast.
- Viele Nutzer betroffen: In Deutschland leben rund 7,8 Millionen Menschen mit einer schweren Behinderung, dazu kommen Ältere und vorübergehende Einschränkungen.
Stand: Oktober 2026
Was barrierefreies Webdesign wirklich bedeutet
Barrierefrei ist eine Website, wenn möglichst alle Menschen sie wahrnehmen, bedienen und verstehen können – unabhängig davon, ob sie schlecht sehen, keine Maus benutzen können, einen Screenreader verwenden oder einfach nur ein kleines Display in der Sonne haben. Einschränkungen sind dabei viel häufiger, als viele denken:
Blindheit, Sehschwäche, Gehörlosigkeit, motorische oder kognitive Einschränkungen
gebrochener Arm, nach einer Augen-OP, vergessene Lesebrille
grelles Sonnenlicht, laute Umgebung ohne Kopfhörer, ein Kind auf dem Arm
Laut Statistischem Bundesamt lebten Ende 2025 rund 7,8 Millionen Menschen mit einer schweren Behinderung in Deutschland, das sind 9,4 % der Bevölkerung. Gut 91 % dieser Behinderungen entstehen durch Krankheit, die meisten Betroffenen sind älter als 55 Jahre. Barrierefreiheit ist also kein Randthema, sondern betrifft einen großen Teil deiner möglichen Kunden.
Die WCAG verständlich erklärt
Die Web Content Accessibility Guidelines (WCAG) des W3C sind der internationale Standard für barrierefreie Websites. Aktuell ist die Version 2.2 vom Oktober 2023. Rechtlich maßgeblich ist in Europa die Norm EN 301 549, die auf WCAG 2.1 verweist. Alle Versionen bauen auf vier Prinzipien auf:
Inhalte müssen erkennbar sein
Alternativtexte, Kontraste, UntertitelAlles muss steuerbar sein
Tastatur, Fokus, genug Zeit, große KlickflächenTexte und Abläufe sind klar
einfache Sprache, feste Navigation, hilfreiche FehlermeldungenTechnik funktioniert mit Hilfsmitteln
sauberes HTML, korrekte Beschriftungen, Screenreader-tauglichDie Anforderungen sind in drei Stufen eingeteilt. Stufe AA ist der Maßstab, den Gesetze und Normen verlangen – sie umfasst alle Kriterien der Stufe A und weitere wichtige Punkte wie ausreichende Kontraste.
Barrierefreiheitsstärkungsgesetz: Wer ist betroffen?
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt den European Accessibility Act um und betrifft unter anderem Dienstleistungen im elektronischen Geschäftsverkehr – also Websites und Apps, über die Verbraucher einen Vertrag abschließen können. Der schnelle Check:
- Erklärung zur Barrierefreiheit: Betroffene Anbieter müssen erklären, wie ihr Angebot die Anforderungen erfüllt. Ein Beispiel ist unsere eigene Seite zur Barrierefreiheit.
- Sanktionen: Die Marktüberwachung kann Angebote untersagen, bei Verstößen drohen Bußgelder bis 100.000 €. Außerdem sind Abmahnungen durch Mitbewerber oder Verbände möglich.
- Reine Informationsseiten ohne Vertragsabschluss und reine B2B-Angebote fallen in der Regel nicht unter das BFSG. Barrierefreiheit lohnt sich aber auch dort – für Nutzer und für Google.
Besonders oft betroffen sind Online-Shops: Produktseiten, Warenkorb und Checkout müssen vollständig per Tastatur bedienbar und für Screenreader verständlich sein.
Hinweis: Dieser Abschnitt ist ein Überblick und keine Rechtsberatung. Ob dein Angebot betroffen ist, klärst du im Zweifel mit deiner IHK oder einer Fachanwältin bzw. einem Fachanwalt.
Die häufigsten Barrieren im Web
Die Organisation WebAIM prüft jedes Jahr die Startseiten von einer Million Websites automatisch auf Barrieren. Das Ergebnis 2026: Auf 95,9 % der Seiten wurden Fehler gefunden, im Schnitt 56 pro Seite. Sechs Fehlerarten machen rund 96 % aller gefundenen Probleme aus – und sie lassen sich fast alle leicht beheben:
Anteil der Startseiten mit diesem Fehler – Quelle: WebAIM Million 2026
Kontrast richtig prüfen
Zu blasse Schrift ist der häufigste Fehler überhaupt. Die WCAG verlangen auf Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text sowie für Bedienelemente wie Buttons und Eingabefelder. So sehen die Unterschiede aus:
Hellgraue Schrift auf Weiß
2,4 : 1✕ nicht ausreichendMittelgraue Schrift auf Weiß
2,8 : 1✕ nicht ausreichendDunkelgraue Schrift auf Weiß
10,3 : 1✓ erfüllt AA und AAAKontrastwerte berechnet nach der WCAG-Formel
Prüfen kannst du Farben mit kostenlosen Kontrast-Rechnern oder direkt in den Entwicklertools deines Browsers. Wichtig: Auch Markenfarben müssen den Wert erreichen. Ein kräftiges Pink oder Orange auf Weiß sieht oft gut aus, fällt aber bei normaler Textgröße häufig durch. Dann hilft ein etwas dunklerer Farbton für Text und Links.
Checkliste: So setzt du Barrierefreiheit um
Barrierefreiheit entsteht im Zusammenspiel von Design, Inhalten und Technik. Diese Punkte decken die wichtigsten Anforderungen ab und lassen sich auch bei bestehenden Websites Schritt für Schritt umsetzen:
- Kontraste mind. 4,5:1 für Text
- Informationen nie nur über Farbe
- Sichtbarer Fokusrahmen
- Klickflächen mind. 24 × 24 px
- Logische Überschriften H1 bis H3
- Beschreibende Alternativtexte
- Aussagekräftige Linktexte
- Untertitel für Videos
- Sprache der Seite angegeben
- Alles per Tastatur bedienbar
- Kein Autoplay ohne Stopp
- Semantisches HTML statt Div-Suppe
- Jedes Feld hat ein Label
- Pflichtfelder klar markiert
- Verständliche Fehlermeldungen
- Kein CAPTCHA ohne Alternative
Am einfachsten ist es, Barrierefreiheit von Anfang an mitzudenken. Wenn wir eine Website mit WordPress erstellen, achten wir auf saubere Überschriften, ausreichende Kontraste, Tastaturbedienung und beschriftete Formulare – das spart später teure Nachbesserungen.
So testest du deine Website in 10 Minuten
Automatische Tools finden nur einen Teil der Barrieren. Die Kombination aus Tool und eigenem Test zeigt schnell, wo es hakt. Dieser Selbsttest braucht keine Vorkenntnisse:
Klicke in die Adresszeile und springe mit Tab durch die Seite. Siehst du immer, wo du bist? Erreichst du alle Links, Menüs und Buttons?
Vergrößere die Seite im Browser. Bleibt alles lesbar, ohne dass Inhalte abgeschnitten werden oder überlappen?
Haben alle wichtigen Bilder einen sinnvollen Alternativtext? Dekorative Bilder bekommen ein leeres alt-Attribut.
Absichtlich falsch ausfüllen: Sind die Fehlermeldungen verständlich und beim richtigen Feld?
Lighthouse in Chrome, WAVE oder axe zeigen technische Fehler in Sekunden.
Für einen gründlichen Test lohnt sich ein Screenreader: Unter Windows ist NVDA kostenlos, auf Mac und iPhone ist VoiceOver bereits eingebaut. Höre dir an, wie deine Startseite vorgelesen wird – das öffnet oft die Augen.
Barrierefreiheit und SEO: doppelter Nutzen
Viele Maßnahmen für Barrierefreiheit verbessern gleichzeitig deine Sichtbarkeit bei Google. Denn Suchmaschinen „lesen“ eine Website ähnlich wie ein Screenreader: über Text, Struktur und Code.
| Maßnahme | Nutzen für Menschen | Nutzen für SEO |
|---|---|---|
| Überschriften-Struktur | Screenreader-Nutzer springen über Überschriften | Google versteht Gliederung und Themen |
| Alternativtexte | Bilder werden vorgelesen | Bilder werden in der Bildersuche gefunden |
| Beschreibende Linktexte | Ziel des Links ist klar | Google versteht verlinkte Seiten besser |
| Schnelle, stabile Seiten | Weniger Hürden für alle | bessere Core Web Vitals |
| Klare Sprache | leichter verständlich | Inhalte treffen die Suchintention |
Wie du Überschriften, Linktexte und Ladezeit optimierst, erklären wir ausführlich im Leitfaden OnPage SEO für kleine Unternehmen.
Barrierefreie Website
Unsicher, ob deine Website die Anforderungen erfüllt?
Wir schauen uns deine Seite an, zeigen dir die wichtigsten Barrieren und setzen die Verbesserungen auf Wunsch direkt um.
Fazit: Barrierefreiheit ist Qualität für alle
Barrierefreies Webdesign nach WCAG ist kein Zusatz für wenige, sondern ein Qualitätsmerkmal für alle Besucher – und für viele Online-Angebote seit Juni 2025 Pflicht. Die gute Nachricht: Die häufigsten Barrieren wie schwache Kontraste, fehlende Alternativtexte und unbeschriftete Formulare lassen sich schnell beheben. Prüfe deine Website mit Tools und eigenem Test, beginne mit den größten Hürden und denke Barrierefreiheit bei jeder neuen Seite von Anfang an mit.
Häufige Fragen zu barrierefreiem Webdesign
Was ist barrierefreies Webdesign?
Barrierefreies Webdesign bedeutet, eine Website so zu gestalten und technisch umzusetzen, dass möglichst alle Menschen sie wahrnehmen, bedienen und verstehen können – auch mit Seh-, Hör- oder motorischen Einschränkungen, mit Screenreader oder nur mit der Tastatur.
Welche WCAG-Stufe muss meine Website erfüllen?
Maßstab ist in der Regel WCAG 2.1 auf Stufe AA. Darauf verweist die europäische Norm EN 301 549, die für das Barrierefreiheitsstärkungsgesetz gilt. Die neuere WCAG 2.2 ergänzt einige Kriterien und ist eine gute Orientierung für neue Projekte.
Muss meine Website nach dem BFSG barrierefrei sein?
Betroffen sind vor allem Websites und Apps, über die Verbraucher einen Vertrag abschließen können, etwa Onlineshops oder Buchungsportale. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen. Reine Informationsseiten fallen in der Regel nicht darunter. Im Einzelfall solltest du dich rechtlich beraten lassen.
Was passiert, wenn meine Website nicht barrierefrei ist?
Bei betroffenen Angeboten kann die Marktüberwachung Mängel beanstanden und Angebote untersagen, außerdem drohen Bußgelder bis 100.000 Euro und Abmahnungen. Unabhängig davon verlierst du Besucher, die deine Seite nicht nutzen können.
Kann ich eine bestehende Website barrierefrei machen?
Ja. Meist ist eine schrittweise Optimierung möglich: zuerst Kontraste, Alternativtexte, Formular-Beschriftungen und Tastaturbedienung verbessern, danach weitere Punkte. Bei sehr alten Websites kann ein Neuaufbau wirtschaftlicher sein.
Reicht ein Barrierefreiheits-Plugin oder Overlay aus?
Nein. Overlays und Plugins können einzelne Anzeigen anpassen, beheben aber keine Fehler im Code, in der Struktur oder in den Inhalten. Echte Barrierefreiheit entsteht durch sauberes Design, gute Inhalte und korrekte Technik.
Verbessert Barrierefreiheit mein Google-Ranking?
Indirekt ja. Saubere Überschriften, Alternativtexte, beschreibende Linktexte und schnelle Ladezeiten helfen Menschen und Suchmaschinen gleichermaßen. Barrierefreiheit ist kein direkter Rankingfaktor, stärkt aber viele Grundlagen guter Suchmaschinenoptimierung.
