Barrierefreie Website testen: Was ein guter Test wirklich prüfen muss
Ein nützlicher Barrierefreiheitstest prüft mehr als nur Deine Startseite. Er klärt, ob Deine Besucher wichtige Formulare, Tastatur-Navigationswege und mobile Seiten ohne Hürden nutzen können.
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.
Achte darauf, dass Überschriften-Hierarchien, Seitenbereiche (Landmarks) und Formularbeschriftungen für Screenreader logisch aufgebaut sind.
Alle interaktiven Elemente (Menüs, Buttons, Links) müssen per Tabulatortaste erreichbar, bedienbar und visuell fokussiert sein.
Eingaben müssen verständlich beschriftet und Fehlermeldungen programmatisch mit den betroffenen Feldern verknüpft sein.
Texte, Symbole und aktive Zustände (Focus, Hover) müssen ausreichend hohe Kontraste zum Hintergrund aufweisen.
Touch-Targets müssen groß genug sein, Navigationen dürfen nicht verschwinden und Gestensteuerung braucht tastaturbedienbare Alternativen.
Modale Dialoge, Filter-Popups, Tabs und Cookie-Banner müssen den Tastaturfokus einfangen, freigeben und logisch leiten.
Was herkömmliche Scanner typischerweise übersehen
Einfache Quelltext-Scanner erfassen nur die halbe Wahrheit. Hier ist der direkte Vergleich.
Login-Wände & Schranken
Cookie-Einwilligung
Dynamische Overlays
Tastatur-Fallen
Mobile-spezifische Bugs
Formular-Fehlerführung
Versteckte Menüs
Komplexe Prozesse
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.
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.
Schritt 2: Template- und Sektionsprüfung
Untersucht die wichtigsten statischen Seitenlayouts. Identifiziert globale Fehler im Header, Footer oder Content-Strukturen.
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.
Schritt 4: Kombiniertes Audit (Auto + Manuell)
Kombiniert automatisierte Tests mit manueller Prüfung durch Experten (z.B. Screenreader-Navigation). Liefert maximale Rechtssicherheit für das BFSG.
Schritt 5: Dokumentation & Monitoring
Führen Sie alle Ergebnisse in einem zentralen Bericht zusammen und überwachen Sie die Barrierefreiheit kontinuierlich, um Rückschritte bei neuen Releases sofort zu erkennen.
Welche Seiten und Zustände geprüft werden sollten
Barrierefreiheit entscheidet sich in den interaktiven Zuständen Deiner Website, nicht nur beim ersten Seitenaufruf.
Was automatisierte Tests leisten – und was nicht
Automatisierte Scans decken schnell eine Vielzahl technischer Fehler auf – doch sie haben physikalische Grenzen. Manuelle Prüfungen sind unerlässlich, um Kriterien zu bewerten, die kein Algorithmus verlässlich beurteilen kann: Ob Alternativtexte inhaltlich sinnvoll sind, ob der Tastaturfokus logisch durch komplexe Formulare fließt und ob Screenreader-Ausgaben für echte Menschen verständlich sind. Dies gilt besonders für geschützte Bereiche, Dialoge und Bezahlprozesse.
Automatisiert gut prüfbar
- Technische Syntax- und HTML-Fehler
- Fehlende Bildbeschreibungen (Alt-Texte komplett leer)
- Farbkontraste zwischen Text und Hintergrund
- Fehlende Labels an Formularfeldern
- Tastatur-Erreichbarkeit von Links und Buttons
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)
navable vereint beide Welten: Nutze die automatisierte Engine für den Großteil Deiner Seiten und dokumentiere manuelle Experten-Tests direkt in derselben Plattform für Deine Unterlagen.
Wer welche Barrierefreiheits-Prüfung übernimmt
Erfolgreiche Barrierefreiheit ist Teamarbeit. Jeder Bereich trägt in der Praxis einen wichtigen Teil bei.
Verantwortlich für Farbkombinationen, Kontrastverhältnisse, logische Seitenabfolgen, visuelle Fokus-Indikatoren und Screenreader-Alternativen im Konzept.
Verantwortlich für sinnvolle Alternativtexte für Bilder, verständliche Überschriften-Strukturen, barrierefreie PDF-Downloads und einfache Sprache.
Verantwortlich für semantisches HTML, WAI-ARIA Rollen, Tastatur-Bedienbarkeit aller Elemente, Vermeidung von Fokus-Fallen und CI/CD-Checks.
Verantwortlich für die BFSG/WCAG-Konformitätserklärung, kontinuierliches Monitoring, Freigabeberichte und Schulung der Teams.
Wo navable bei tieferen Website-Tests ansetzt
navable wurde entwickelt, um die Lücken herkömmlicher Scanner zu schließen und professionelle Prüfprozesse zu vereinfachen.
Audits hinter Cookie-Bannern und Logins
Mit navable kannst Du Cookie-Zustimmungen und Login-Daten hinterlegen, um geschützte Kundenbereiche automatisch zu prüfen.
Prüfung dynamischer Zustände
Wir testen nicht nur nacktes HTML, sondern interagieren mit Modals, Menüs und Filtern, um Barrieren nach Benutzeraktionen aufzuspüren.
Vergleich Desktop vs. Mobile
navable scannt Deine Seiten in verschiedenen Viewports und deckt mobile Hürden wie zu kleine Touch-Targets oder fehlende Zoom-Optionen auf.
Einheitliche Datenbasis
Führen Sie automatisierte Scans und Ihre manuellen Prüfergebnisse in einem zentralen Dashboard zusammen.
Entwickler- & KI-Integrationen
Exportiere gefundene Barrieren als fertige Fehlerbeschreibungen und Fix-Prompts für Dein Team oder Deine KI-Code-Editoren.
Welcher nächste Schritt passt zu Deiner Website?
BFSG-Betroffenheit klären
Prüfe mit unserem kostenlosen Checker, ob Dein Unternehmen unter das BFSG fällt.
Schneller Einzelcheck
Starte einfach einen kostenlosen Scan für eine erste Momentaufnahme Deiner Seite.
Häufige Fragen zum Testen barrierefreier Websites
Standards und weiterführende Referenzen
Nutzen Sie diese offiziellen Ressourcen und Leitfäden zur Vertiefung.