Barrierefreiheit Website testen: So prüfst du deine Seite (kostenlos)

Warum Barrierefreiheit 2026 Pflicht ist

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft. Es setzt den European Accessibility Act (EAA) der EU in deutsches Recht um. Die Übergangszeit ist vorbei. Wer jetzt noch eine nicht barrierefreie Website betreibt, verstößt gegen geltendes Recht.

Konkret betrifft das BFSG alle Unternehmen, die über ihre Website Produkte oder Dienstleistungen an Verbraucher (B2C) anbieten. Dazu gehören:

• Online-Shops und E-Commerce-Plattformen
• Buchungssysteme (Termine, Reisen, Tickets)
• Online-Banking und Finanzdienstleistungen
• E-Books und digitale Publikationen
• Dienstleistungswebsites mit Online-Formularen, Kontaktformularen oder Angebotsrechnern

Ausgenommen sind Kleinstunternehmen mit weniger als 10 Mitarbeitern und unter 2 Millionen EUR Jahresumsatz, sofern sie keine der oben genannten digitalen Dienstleistungen anbieten. Aber Achtung: Auch wer formal ausgenommen ist, profitiert von Barrierefreiheit. Denn 7,8 Millionen schwerbehinderte Menschen in Deutschland sind potenzielle Kunden.

Die Bußgelder bei Verstößen können bis zu 100.000 EUR betragen. Zuständig sind die Marktüberwachungsbehörden der Bundesländer. Zusätzlich können Verbraucherschutzverbände abmahnen. Die Behörden arbeiten aktuell mit Stichproben und reagieren auf Beschwerden.

Mehr zum rechtlichen Hintergrund, den genauen Fristen und wer im Detail betroffen ist, findest du in unserem ausführlichen Artikel: Barrierefreiheit Website: Was ab 2025 Pflicht ist (BFSG).

Was wird bei einem Barrierefreiheit-Check geprüft?

Der technische Maßstab für digitale Barrierefreiheit sind die Web Content Accessibility Guidelines (WCAG) 2.1, Level AA. Das ist der Standard, auf den auch das BFSG verweist. Die WCAG definiert vier Grundprinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust (POUR).

In der Praxis prüft ein Barrierefreiheit-Test diese konkreten Kriterien:

Farbkontraste (WCAG 1.4.3 / 1.4.6)

Text muss sich deutlich vom Hintergrund abheben. Der Mindestkontrast liegt bei 4,5:1 für normalen Text und 3:1 für großen Text (ab 18pt oder 14pt fett). Hellgrauer Text auf weißem Hintergrund? Durchgefallen. Das betrifft nicht nur Fließtext, sondern auch Buttons, Links, Platzhaltertexte in Formularen und Fehlermeldungen.

Alt-Texte für Bilder (WCAG 1.1.1)

Jedes informative Bild braucht einen beschreibenden Alt-Text, der den Inhalt oder Zweck des Bildes vermittelt. Screenreader lesen diesen Text vor. Fehlt er, hören blinde Nutzer nur "Bild" oder den Dateinamen. Dekorative Bilder (z.B. Trennlinien) bekommen ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen.

Keyboard-Navigation (WCAG 2.1.1 / 2.4.7)

Jede Funktion deiner Website muss ohne Maus bedienbar sein. Nutzer müssen per Tab-Taste durch alle interaktiven Elemente navigieren können: Links, Buttons, Formulare, Menüs. Der aktuelle Fokus muss dabei sichtbar markiert sein (Focus-Indicator). Viele Websites entfernen den Standard-Fokusring per CSS, was ein schwerer Barrierefreiheit-Fehler ist.

Formulare und Labels (WCAG 1.3.1 / 3.3.2)

Jedes Formularfeld braucht ein programmatisch verknüpftes Label. Ein Platzhaltertext reicht nicht, weil er verschwindet, sobald der Nutzer tippt. Fehlermeldungen müssen klar beschreiben, was falsch ist und wie es korrigiert wird. Pflichtfelder müssen als solche gekennzeichnet sein.

Überschriften-Hierarchie (WCAG 1.3.1)

Überschriften strukturieren den Inhalt für Screenreader-Nutzer. Die Hierarchie muss logisch absteigend sein: H1, dann H2, dann H3. Sprünge wie H1 direkt zu H4 verwirren assistive Technologien. Jede Seite sollte genau eine H1 haben.

ARIA-Attribute (WCAG 4.1.2)

ARIA-Labels und -Rollen helfen Screenreadern, benutzerdefinierte Elemente zu verstehen. Ein Icon-Button ohne sichtbaren Text braucht ein aria-label. Navigation muss als solche markiert sein. Falsche oder fehlende ARIA-Attribute sind eine der häufigsten Fehlerquellen, die automatische Tools zuverlässig erkennen.

Touch-Targets (WCAG 2.5.5 / 2.5.8)

Interaktive Elemente (Buttons, Links, Checkboxen) brauchen eine Mindestgröße von 24x24 Pixel (WCAG 2.5.8, Level AA). Zu kleine Klickflächen sind besonders für Nutzer mit motorischen Einschränkungen problematisch.

Website auf Barrierefreiheit testen: 3 Methoden

Es gibt drei Ansätze, um die Barrierefreiheit deiner Website zu testen. Jeder hat Stärken und Grenzen. Die beste Strategie kombiniert alle drei.

Methode 1: Automatische Tools

Automatische Scanner prüfen den HTML-Code deiner Website gegen WCAG-Regeln. Sie erkennen ca. 30 bis 40 Prozent aller Barrierefreiheit-Probleme, darunter die häufigsten und offensichtlichsten Fehler.

Bekannte Tools:

• KI-WebSichtbar Barrierefreiheit-Check: Kostenlos, auf Deutsch, prüft Kontraste, Alt-Texte, ARIA, Keyboard-Fokus und Touch-Targets in 30 Sekunden. Kein Account nötig.
• WAVE (wave.webaim.org): Browser-Extension von WebAIM. Zeigt Fehler direkt auf der Seite an. Englisch.
• axe DevTools (deque.com): Browser-Extension für Chrome und Firefox. Besonders detailliert, auf Entwickler ausgerichtet. Englisch.
• Google Lighthouse: Eingebaut in Chrome DevTools (F12, Tab "Lighthouse"). Prüft Accessibility neben Performance und SEO. Deckt weniger ab als spezialisierte Tools.

Vorteil: Schnell, kostenlos, reproduzierbar. Ideal als Startpunkt.
Grenze: Können keine subjektiven Kriterien prüfen (Ist der Text verständlich? Ist die Tab-Reihenfolge logisch? Ergibt das Bild mit dem Alt-Text Sinn?).

Methode 2: Manuelle Prüfung

Manuelle Tests decken das ab, was automatische Tools nicht können. Die wichtigsten Schritte:

1. Keyboard-Test: Stecke die Maus aus. Navigiere nur mit Tab, Shift+Tab, Enter und Escape durch die gesamte Seite. Kommst du überall hin? Siehst du immer, wo der Fokus ist? Gibt es "Keyboard-Fallen", aus denen du nicht mehr rauskommst?
2. Screenreader-Test: Aktiviere VoiceOver (Mac: Cmd+F5) oder NVDA (Windows, kostenlos). Lass dir die Seite vorlesen. Ergibt der vorgelesene Inhalt Sinn? Werden Bilder korrekt beschrieben? Sind Formulare verständlich?
3. Zoom-Test: Vergrößere den Browser auf 200 Prozent (Strg/Cmd + Plus). Ist alles noch lesbar? Überlappt sich Text? Verschwinden Inhalte?
4. Farb-Test: Werden Informationen nur über Farbe vermittelt? Ein roter Fehlerrahmen reicht nicht, es braucht zusätzlich Text oder ein Icon.
5. Link-Text-Check: Sind Links verständlich ohne umgebenden Text? "Hier klicken" und "Mehr erfahren" sind für Screenreader-Nutzer nutzlos, die per Tab durch Links springen.

Vorteil: Findet Probleme, die kein Tool erkennt.
Grenze: Zeitaufwändig, erfordert Wissen über Barrierefreiheit und assistive Technologien.

Methode 3: Professioneller Audit

Ein professioneller Barrierefreiheit-Audit wird von spezialisierten Prüfern durchgeführt, oft mit realen Nutzern assistiver Technologien. Er umfasst:

• Vollständige WCAG 2.1 AA Prüfung aller Seiten und Funktionen
• Tests mit mehreren Screenreadern (VoiceOver, NVDA, JAWS)
• Dokumentierter Prüfbericht mit Fehlerklassen und Handlungsempfehlungen
• Optional: Barrierefreiheitserklärung gemäß BFSG

Vorteil: Umfassend, rechtlich belastbar, inklusive Dokumentation.
Grenze: Kosten von 2.000 bis 10.000 EUR je nach Umfang. Lohnt sich bei großen Websites und Unternehmen, die rechtliche Sicherheit brauchen.

Die 5 häufigsten Barrierefreiheit-Probleme

Der WebAIM Million Report analysiert jährlich die eine Million meistbesuchten Websites. Die Ergebnisse sind ernüchternd: 95,9 Prozent aller Startseiten haben nachweisbare WCAG-Fehler. Diese fünf Probleme tauchen am häufigsten auf.

1. Zu wenig Farbkontrast (83 % aller Websites)

Das häufigste Problem überhaupt. Hellgraue Texte auf weißem Hintergrund, pastellfarbene Buttons, schwach sichtbare Platzhaltertexte. Die Lösung: Prüfe jede Text-Hintergrund-Kombination mit einem Kontrastrechner. Mindestens 4,5:1 für normalen Text. Viele Design-Tools (Figma, Adobe) haben Kontrast-Checker eingebaut.

2. Fehlende Alt-Texte bei Bildern (58 % aller Websites)

Mehr als die Hälfte aller Websites hat Bilder ohne Alt-Text. Die Lösung: Jedes Bild braucht ein alt-Attribut. Beschreibe informative Bilder in 5 bis 15 Wörtern. Dekorative Bilder bekommen alt="". Tipp: Beschreibe nicht "was das Bild ist" (Foto eines Mannes), sondern "was das Bild zeigt" (Mechaniker prüft Bremsen in der Werkstatt).

3. Fehlende Formular-Labels (45 % aller Websites)

Eingabefelder ohne verknüpftes Label. Das Platzhalter-Attribut ist kein Ersatz für ein Label, weil es verschwindet, sobald getippt wird. Die Lösung: Jedes <input> braucht ein <label> mit passendem for-Attribut. Oder ein umschließendes <label>-Element.

4. Leere Links und Buttons (44 % aller Websites)

Links und Buttons ohne erkennbaren Text. Klassiker: Social-Media-Icons, die nur ein Bild enthalten, ohne Alt-Text oder aria-label. Screenreader lesen dann nur "Link" vor, ohne zu sagen wohin. Die Lösung: Jeder Link und Button braucht einen verständlichen Text, sichtbar oder per aria-label.

5. Fehlende Dokumentsprache (18 % aller Websites)

Das lang-Attribut im HTML-Tag fehlt oder ist falsch. Ohne <html lang="de"> weiß der Screenreader nicht, in welcher Sprache er vorlesen soll. Ein deutschsprachiger Text wird dann möglicherweise mit englischer Aussprache vorgelesen. Die Lösung: Eine Zeile Code. Keine Ausreden.

Barrierefreiheit Website testen kostenlos: Unsere Empfehlung

Du willst jetzt wissen, wie es um deine Website steht? Starte mit unserem kostenlosen Barrierefreiheit-Check. Gib deine URL ein, warte 30 Sekunden und du bekommst einen klaren Report.

Was unser Tool prüft:

• Farbkontraste: Alle Text-Hintergrund-Kombinationen gegen WCAG 2.1 AA
• Alt-Texte: Fehlende oder leere Alt-Attribute bei informativen Bildern
• ARIA-Labels: Korrekte Verwendung von ARIA-Attributen und Rollen
• Keyboard-Fokus: Sichtbare Fokus-Indikatoren bei interaktiven Elementen
• Touch-Targets: Mindestgröße von Klickflächen
• Überschriften-Hierarchie: Logische Struktur ohne Sprünge
• Formular-Labels: Verknüpfung von Labels und Eingabefeldern
• Dokumentsprache: Korrektes lang-Attribut

Der Check ist kostenlos, ohne Registrierung und ohne Limit. Du bekommst eine Gesamtbewertung plus konkrete Fehlerbeschreibungen mit Handlungsempfehlungen.

Übrigens: Wenn du auch den Datenschutz deiner Website prüfen willst, nutze parallel unseren kostenlosen DSGVO-Check. Barrierefreiheit und Datenschutz sind die zwei häufigsten Compliance-Baustellen bei kleinen Unternehmen.

Was tun, wenn der Check Fehler findet?

Kein Grund zur Panik. Die meisten Barrierefreiheit-Probleme lassen sich beheben. Die Frage ist nur: Selbst machen oder Profi beauftragen?

Selbst fixen: Diese Probleme kannst du oft allein lösen

• Alt-Texte ergänzen: In jedem CMS (WordPress, Shopify, Jimdo) kannst du Alt-Texte direkt beim Bild eintragen. 5 bis 15 Wörter pro Bild, beschreibend und konkret.
• Farbkontraste anpassen: Textfarben oder Hintergrundfarben ändern, bis der Kontrast stimmt. Tools wie WebAIM Contrast Checker helfen dabei.
• Dokumentsprache setzen: Im CMS unter den Spracheinstellungen oder im HTML-Code: <html lang="de">.
• Link-Texte verbessern: "Hier klicken" durch beschreibende Texte ersetzen. Statt "Mehr erfahren" besser "Unsere Preise ansehen".

Profi beauftragen: Wenn es tiefer geht

Manche Probleme erfordern Eingriffe in den Code, die ohne Entwicklungserfahrung schwierig sind:

• Keyboard-Navigation reparieren: Erfordert Verständnis von tabindex, Focus Management und Event-Handlern.
• ARIA-Attribute korrekt einsetzen: Falsches ARIA ist schlimmer als fehlendes ARIA. Hier braucht es Expertise.
• Responsive Design für Zoom: Layout-Probleme bei 200-Prozent-Vergrößerung erfordern CSS-Anpassungen.
• Dynamische Inhalte: Modale Dialoge, Akkordeons und Tabs barrierefrei zu machen, ist technisch anspruchsvoll.

Wenn dein Barrierefreiheit-Check viele Fehler zeigt und du keine Entwicklungsressourcen hast, gibt es zwei Optionen: Einen Spezialisten für Barrierefreiheit beauftragen (rechne mit 500 bis 3.000 EUR je nach Umfang) oder die Website neu bauen lassen. Bei einer Neuerstellung ist Barrierefreiheit kein Extra-Posten, sondern Bestandteil sauberer Entwicklung.

Alle Websites von KI-WebSichtbar sind standardmäßig WCAG 2.1 AA konform: semantisches HTML, korrekte Überschriftenstruktur, ARIA-Labels, ausreichende Kontraste, Keyboard-Navigation. Ab 1.499 EUR zum Festpreis. Mehr dazu auf unserer Seite zur KI-gestützten Website-Erstellung.

FAQ

Kann ich die Barrierefreiheit meiner Website kostenlos testen?

Ja. Unser kostenloser Barrierefreiheit-Check prüft deine Website in 30 Sekunden auf die wichtigsten WCAG 2.1 AA Kriterien. Auch WAVE und Google Lighthouse sind kostenlos nutzbar.

Was prüft ein automatischer Barrierefreiheit-Test?

Automatische Tools prüfen ca. 30 bis 40 Prozent aller WCAG-Kriterien: Farbkontraste, fehlende Alt-Texte, Überschriftenstruktur, Formular-Labels, ARIA-Attribute und Keyboard-Fokus. Subjektive Kriterien wie verständliche Sprache oder logische Tab-Reihenfolge erfordern manuelle Prüfung.

Ist meine Website vom BFSG betroffen?

Wenn du über deine Website Produkte oder Dienstleistungen an Verbraucher verkaufst (B2C), bist du sehr wahrscheinlich betroffen. Das BFSG gilt seit dem 28. Juni 2025 für E-Commerce, Online-Banking, E-Books und vergleichbare digitale Angebote. Reine B2B-Websites und Kleinstunternehmen mit weniger als 10 Mitarbeitern und unter 2 Millionen EUR Umsatz sind ausgenommen.

Welche Bußgelder drohen bei fehlender Barrierefreiheit?

Das BFSG sieht Bußgelder bis zu 100.000 EUR vor. Zuständig sind die Marktüberwachungsbehörden der Bundesländer. Zusätzlich können Verbraucherschutzverbände Abmahnungen aussprechen. Die Behörden setzen aktuell auf Stichproben und Beschwerden.

Reicht ein automatischer Test für BFSG-Konformität?

Nein. Automatische Tools decken nur einen Teil der WCAG-Kriterien ab. Für eine vollständige BFSG-Konformität brauchst du zusätzlich manuelle Tests: Keyboard-Navigation durchspielen, Screenreader testen, Inhalte auf Verständlichkeit prüfen. Der automatische Test ist aber der beste Startpunkt, um die offensichtlichsten Probleme zu finden.

Wie mache ich meine bestehende Website barrierefrei?

Starte mit einem automatischen Check, um die größten Probleme zu identifizieren. Häufige Quick Fixes: Alt-Texte ergänzen, Farbkontraste anpassen, Formular-Labels hinzufügen. Tiefergehende Probleme wie fehlende Keyboard-Navigation oder falsche ARIA-Attribute erfordern Eingriffe in den Code. Bei größerem Aufwand lohnt sich ein professioneller Anbieter.

Was ist der Unterschied zwischen WCAG und BFSG?

WCAG (Web Content Accessibility Guidelines) ist der internationale technische Standard für barrierefreie Webinhalte. Das BFSG (Barrierefreiheitsstärkungsgesetz) ist das deutsche Gesetz, das die EU-Richtlinie (European Accessibility Act) umsetzt. Das BFSG verweist auf WCAG 2.1 Level AA als technischen Maßstab, geht aber in den rechtlichen Anforderungen darüber hinaus.

Wie oft sollte ich meine Website auf Barrierefreiheit testen?

Nach jeder größeren Änderung an Layout, Inhalten oder Funktionalität. Mindestens einmal pro Quartal als Routine-Check. Bei aktiver Content-Produktion empfiehlt sich ein monatlicher automatischer Scan, um neue Probleme frühzeitig zu erkennen. Unser Barrierefreiheit-Check ist dafür ideal, weil er ohne Anmeldung und unbegrenzt nutzbar ist.

Fazit: Jetzt testen, nicht warten

Die BFSG-Deadline ist vorbei. Barrierefreiheit ist keine optionale Verbesserung mehr, sondern gesetzliche Pflicht. Und selbst wenn du formal ausgenommen bist: Eine barrierefreie Website ist schneller, besser bedienbar und rankt besser bei Google. Barrierefreiheit ist SEO.

Der erste Schritt ist einfach: Teste deine Website jetzt. Unser kostenloser Check zeigt dir in 30 Sekunden, wo du stehst und was du verbessern kannst. Ohne Anmeldung, ohne Kosten, ohne Haken.

Wenn du Hilfe bei der Umsetzung brauchst, ob einzelne Fixes oder eine komplett barrierefreie Neugestaltung, schau dir unsere Pakete an. Oder lies zuerst unsere DSGVO-Checkliste für KMU, um auch den Datenschutz abzuhaken.