Skip to main content
WCAG- und BFSG-relevante Website-Prüfung

Website auf Barrierefreiheit testen

Plane zuerst, welche Seiten und Nutzerflows Du prüfst. Kombiniere automatisierte Scans mit manuellen Tests und dokumentiere für jede Barriere, wer sie behebt und wie Ihr den Fix überprüft.

Produktmanager & Product Owner
Webentwickler & QA-Teams
Agenturen & Webdesign-Dienstleister
Compliance- & Legal-Verantwortliche

Der kostenlose Scan liefert eine erste Momentaufnahme einer URL. Dieser Leitfaden hilft Dir, den gesamten Prüfumfang und die manuellen Tests zu planen.

Eine URL kostenlos scannen
Prüfumfang

Welcher Barrierefreiheits-Checker passt zu Deinem Test?

Mit einem Kontrast-Checker vergleichst Du zwei Farben. Ein URL-Scan untersucht die erreichbare Seite im geladenen Zustand. Öffne Dialoge, löse Formularfehler aus und melde Dich in geschützten Bereichen an, bevor Du dort erneut scannst.

Wähle den Prüfweg nach der Aufgabe. Ergänze automatisierte Befunde durch Tastatur- und Screenreader-Tests.

PrüfwegWofür er hilftWas Du zusätzlich prüfen musst
Kontrast-Checker: zwei FarbenKontrastverhältnis zwischen Textfarbe und Hintergrund, etwa für die Farben Deines Designs.Die verwendeten Farben in Komponenten, im hellen und dunklen Theme sowie nach Interaktionen messen.
Kostenloser URL-ScanMaschinell prüfbare Fehler im erreichbaren, geladenen Seitenzustand.Menüs und Dialoge öffnen, Formulare absenden und die neuen Zustände erneut scannen.
Audit über mehrere ZuständeBefunde in den aufgerufenen Seiten und Interaktionszuständen zusammenführen.Prüfpfad und Zugang einrichten. Fokuswege, Screenreader-Ausgaben und Inhalte, die der Scanner nicht bewerten kann, manuell testen.

Nutze den Farbvergleich für einzelne Farbpaare. Prüfe die verwendeten Farben und Zustände auf Deiner Website zusätzlich; Hinweise zu Text, Fokusrahmen und Grenzen der Messung findest Du direkt im Kontrast-Checker.

Prüfpfade im Audit-Produkt ansehen
Diagnose-Kriterien

Was ein Barrierefreiheitstest für Websites prüfen sollte

Um die Anforderungen nach WCAG 2.1 AA und BFSG umzusetzen, sollten alle Interaktionsbereiche frei von Hindernissen sein.

Struktur und Semantik

Achte darauf, dass Überschriften-Hierarchien, Seitenbereiche (Landmarks) und Formularbeschriftungen für Screenreader logisch aufgebaut sind.

Häufiger Fehler: Beispiel: Eine Überschrift ist optisch fett, aber im HTML-Code als einfacher Absatz definiert, wodurch sie für Screenreader unsichtbar bleibt.
Bedienung mit Tastatur

Alle interaktiven Elemente (Menüs, Buttons, Links) müssen per Tabulatortaste erreichbar, bedienbar und visuell fokussiert sein.

Häufiger Fehler: Beispiel: Ein fokussierter Link im Dropdown-Menü zeigt keinen visuellen Rahmen (Focus Outline) – der Nutzer navigiert blind.
Formulare und Fehlerführung

Eingaben müssen verständlich beschriftet und Fehlermeldungen programmatisch mit den betroffenen Feldern verknüpft sein.

Häufiger Fehler: Beispiel: Eine Fehlermeldung wird zwar rot angezeigt, aber für Screenreader-Nutzer nicht vorgelesen.
Visuelle Kontraste

Texte, Symbole und aktive Zustände (Focus, Hover) müssen ausreichend hohe Kontraste zum Hintergrund aufweisen.

Häufiger Fehler: Beispiel: Ein hellgrauer Deaktivierungs- oder Platzhaltertext auf weißem Grund ist für Menschen mit Sehschwäche unlesbar.
Responsive & mobile Ansicht

Touch-Targets müssen groß genug sein, Navigationen dürfen nicht verschwinden und Gestensteuerung braucht tastaturbedienbare Alternativen.

Häufiger Fehler: Beispiel: Das Hamburger-Menü in der mobilen Ansicht lässt sich per Tastatur nicht öffnen oder fokussieren.
Interaktive Zustände & Overlays

Modale Dialoge und blockierende Consent-Layer setzen den Fokus beim Öffnen hinein, halten ihn darin und geben ihn beim Schließen zurück. Nicht-modale Cookie-Banner dürfen den Fokus nicht einfangen: Sie müssen früh per Tastatur erreichbar sein und dürfen fokussierte Elemente nicht vollständig verdecken (WCAG 2.4.11).

Häufiger Fehler: Beispiel: Ein modaler Cookie-Dialog lässt den Fokus auf verdeckte Links im Hintergrund wechseln.
Praktische Checkliste

Checkliste: Website auf Barrierefreiheit testen

Führe diese Tests auf einem typischen Nutzerweg aus und dokumentiere die Ergebnisse. Sie ergänzen den Scan und sind keine vollständige Konformitätsprüfung.

  1. Tastatur und Dialoge

    Prüfung: Navigiere mit Tab und Shift+Tab. Öffne das Hauptmenü und einen Dialog, schließe ihn mit Escape.

    Erwartetes Ergebnis: Der Fokus bleibt sichtbar, alle Bedienelemente sind erreichbar und nach dem Schließen kehrt der Fokus zum Auslöser zurück.

  2. Formularfehler

    Prüfung: Sende ein wichtiges Formular leer und anschließend mit einer ungültigen Eingabe ab. Prüfe den Fehler mit Tastatur und Screenreader.

    Erwartetes Ergebnis: Das betroffene Feld und der Fehler sind zugeordnet. Die Fehlermeldung wird angekündigt; eingegebene Daten bleiben erhalten.

  3. Mobile Ansicht und Vergrößerung

    Prüfung: Prüfe denselben Nutzerweg bei schmaler Ansicht und vergrößertem Text. Teste Bedienelemente per Touch.

    Erwartetes Ergebnis: Texte und Bedienelemente bleiben lesbar und bedienbar. Wesentliche Inhalte werden nicht abgeschnitten oder verdeckt.

  4. Inhalte und Screenreader

    Prüfung: Prüfe Überschriften, Linknamen und die Bedeutung wichtiger Bilder. Durchlaufe den Nutzerweg mit einem Screenreader.

    Erwartetes Ergebnis: Struktur, Namen und Statusmeldungen vermitteln den Zweck der Inhalte und ermöglichen den Abschluss der Aufgabe.

  5. Fix erneut testen

    Prüfung: Dokumentiere URL, Zustand, Schritte, erwartetes und tatsächliches Ergebnis. Wiederhole den Test nach der Behebung.

    Erwartetes Ergebnis: Die Barriere lässt sich in derselben Situation nicht mehr reproduzieren. Verwandte Zustände funktionieren weiterhin.

Prüfschritte

So testest Du eine Website richtig

Ein barrierefreier Webauftritt lässt sich nicht durch ein einziges Tool auf Knopfdruck garantieren. Jede Website sollte einen strukturierten, aufeinander aufbauenden Prüfprozess durchlaufen. Je dynamischer und interaktiver Deine Website ist, desto gründlicher sollte die Prüfung sein.

1

Schritt 1: Schneller Einzelcheck

Ideal für eine erste grobe Einschätzung. Findet offensichtliche Programmierfehler auf einer einzelnen URL, reicht aber nicht für Konformitätsnachweise aus.

2

Schritt 2: Template- und Sektionsprüfung

Untersucht die wichtigsten statischen Seitenlayouts. Identifiziert globale Fehler im Header, Footer oder Content-Strukturen.

3

Schritt 3: Umfassendes Audit (inkl. Nutzerflüssen)

Umfasst interaktive Zustände, Logins, Warenkörbe und Cookie-Layer auf Desktop und Mobile. Empfohlen für E-Commerce und Portale.

4

Schritt 4: Kombiniertes Audit (Auto + Manuell)

Kombiniere automatisierte Prüfungen mit manuellen Bewertungen, etwa zur Screenreader-Navigation. Dokumentiere Befunde und Korrekturen; das Ergebnis ersetzt keine rechtliche Einordnung.

5

Schritt 5: Dokumentation & Verlauf

Führe die Befunde in einem Bericht zusammen. Prüfe nach Releases dieselben Seiten und Nutzerflüsse erneut. Score-Verlauf und Alerts im Audit helfen Dir, Änderungen zu vergleichen und Rückschritte zu untersuchen.

Prüfbereiche

Welche Seiten und Zustände geprüft werden sollten

Barrierefreiheit entscheidet sich in den interaktiven Zuständen Deiner Website, nicht nur beim ersten Seitenaufruf.

Startseite / HomepageKategorieseiten & ProduktfilterProduktdetailseitenFormulare & EingabefelderLogin- & RegistrierungsformulareKunden-Dashboard & KontoeinstellungenSuchergebnisse & Auto-VorschlägeCookie-EinwilligungsbannerModale Dialoge & OverlaysValidierungs-FehlermeldungenLeere Zustände (Empty States)Checkout- & BuchungsprozesseMobile Hamburger-Menüpfade

Cookie-Banner mit Tastatur und Fokus testen

Umfang

Was automatisierte Tests leisten – und was nicht

Regelbasierte Scans finden technische Fehler. Teste zusätzlich, ob Du die Aufgabe mit Tastatur und Screenreader abschließen kannst.

Automatisiert gut prüfbar

  • Technische Syntax- und HTML-Fehler
  • Fehlende Alt-Attribute an Bildern, die eine Textalternative benötigen
  • Berechenbare Textkontraste im geprüften Zustand
  • Fehlende Beschriftungen an Formularfeldern
  • Ungültige ARIA-Rollen und Attribute

Zusätzlich manuell zu bewerten

  • Sinnhaftigkeit von Alternativtexten (z. B. 'Bild_123.jpg' vs. Beschreibung)
  • Logik der Tastatur-Fokusreihenfolge in komplexen Formularen
  • Verständlichkeit von Texten und Fachbegriffen
  • Nutzerfreundlichkeit bei der Navigation mit echten Screenreadern
  • Ausnahme-Regelungen und Verhältnismäßigkeit (§ 17 BFSG)
  • Lesbarkeit von Canvas-Diagrammen und deren Textalternativen
  • Erreichbarkeit und Bedienbarkeit eingebetteter Zahlungs- und Chat-Widgets

Halte fest, welche Seiten, Zustände und eingebetteten Inhalte geprüft wurden. Ergänze den Bericht um manuelle Befunde und wiederhole die betroffenen Prüfungen nach der Behebung.

Verantwortlichkeiten

Wer welche Barrierefreiheits-Prüfung übernimmt

Erfolgreiche Barrierefreiheit ist Teamarbeit. Jeder Bereich trägt in der Praxis einen wichtigen Teil bei.

Design & Produkt

Verantwortlich für Farbkombinationen, Kontrastverhältnisse, logische Seitenabfolgen, visuelle Fokus-Indikatoren und Screenreader-Alternativen im Konzept.

Redaktion & Content

Verantwortlich für sinnvolle Alternativtexte für Bilder, verständliche Überschriften-Strukturen, barrierefreie PDF-Downloads und einfache Sprache.

Entwicklung & QA

Verantwortlich für semantisches HTML, WAI-ARIA Rollen, Tastatur-Bedienbarkeit aller Elemente, Vermeidung von Fokus-Fallen und CI/CD-Checks.

Compliance & Management

Erstellt und pflegt die Barrierefreiheitserklärung, dokumentiert Folgeprüfungen und Freigaben und schult die Teams.

Die navable Lösung

Den geplanten Test mit navable Audit ausführen

Audit übernimmt automatisierte Prüfungen in mehreren Seitenzuständen und verwaltet Befunde. Ergänze Eure manuellen Tests und prüfe die betroffenen Nutzerwege nach jedem Fix erneut.

Zum Audit-Produkt: Funktionen und Ablauf
Nächste Schritte

Welcher nächste Schritt passt zu Deiner Website?

BFSG-Betroffenheit klären

Nutze den Fragebogen für eine erste Einschätzung des Anwendungsbereichs.

BFSG-Check starten

Schneller Einzelcheck

Starte einfach einen kostenlosen Scan für eine erste Momentaufnahme Deiner Seite.

Audit starten

Barrierefreiheitserklärung

Erstelle einen bearbeitbaren Erklärungs-Entwurf und prüfe ihn vor der Veröffentlichung.

Mehr erfahren

Die Plattform kennenlernen

Vergleiche die Audit-Tarife und wähle den Prüfumfang für Dein Projekt.

Jetzt loslegen

Häufige Fragen zum Testen barrierefreier Websites

Ein kostenloser URL-Scan hilft Dir, erste technische Fehler im geladenen Zustand zu finden. Für einen vollständigen Test brauchst Du repräsentative Seiten, interaktive Zustände und ergänzende manuelle Prüfungen. Ein fehlerfreier Scan bestätigt keine Konformität.

Grundsätzlich alle Seiten, die für die Kernfunktion Deines Angebots notwendig sind. Bei einem Onlineshop sind das: Startseite, Produktsuche und -filter, Produkt-Detailseite, Warenkorb, Checkout-Prozess und Registrierungsformulare. Bei SaaS-Produkten gehören alle Dashboards und Einstellungsseiten des Kundenbereichs dazu.

Das hängt vom Prüfweg ab. Ein öffentlicher URL-Scan erreicht ohne Anmeldung keine geschützten Inhalte. Für solche Bereiche musst Du einen authentifizierten Prüfpfad einrichten und kontrollieren, welche Seiten und Zustände tatsächlich erreicht wurden.

Mit WCAG 2.1 AA prüfst Du technische Barrieren auf Deiner Website. BFSG und EN 301 549 beschreiben den gesetzlichen und technischen Rahmen. Ein Scan zeigt Dir Fehler, klärt aber nicht, ob Dein Unternehmen unter das BFSG fällt oder alle gesetzlichen Anforderungen erfüllt. Nutze den BFSG-Check für eine erste Orientierung und hole bei Bedarf fachlichen Rat ein.

Automatisierte Scans erkennen maschinell prüfbare Kontrast-, HTML-Struktur- und Attributfehler. Verständlichkeit, sinnvolle Tastaturwege und die Nutzung mit Screenreadern benötigen zusätzliche manuelle Prüfungen. Dokumentiere beide Prüfwege und überprüfe den Entwurf Deiner Barrierefreiheitserklärung vor der Veröffentlichung.
Referenzen

Standards und weiterführende Referenzen

Diese Quellen helfen Dir, Prüfumfang und Kriterien nachzuschlagen.

WCAG 2.1 Schnellreferenz (W3C) (öffnet in neuem Tab)WCAG-Evaluierungsmethode (WCAG-EM) (öffnet in neuem Tab)Bundesfachstelle Barrierefreiheit (BFSG) (öffnet in neuem Tab)MDN Web Docs Barrierefreiheit (öffnet in neuem Tab)