Barrierefreiheits-Audit selber machen: DIY-Checkliste für Webseitenbetreiber

Warum ein DIY-Audit? Rechtlicher Hintergrund

Seit Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) Anbieter digitaler Dienstleistungen, ihre Webseiten barrierefrei zu gestalten. Grundlage sind die Web Content Accessibility Guidelines (WCAG) 2.2 auf Stufe AA. Wer eine Webseite mit E-Commerce-Funktion, Kontaktformularen oder Buchungsstrecken betreibt, ist in aller Regel betroffen — unabhängig von der Unternehmensgröße (§ 1 Abs. 2 BFSG).

Ein professionelles Audit durch zertifizierte Prüfer kann mehrere Tausend Euro kosten. Die gute Nachricht: Du kannst die wichtigsten Barrieren selbst aufspüren. Ein strukturiertes DIY-Audit ist kein Ersatz für eine Fachprüfung, aber es ist unendlich besser als gar kein Audit.

Hinweis: Dieser Artikel dient der allgemeinen Orientierung und ersetzt keine Rechtsberatung. Für verbindliche Aussagen zur BFSG-Konformität konsultiere bitte einen Fachanwalt oder eine akkreditierte Prüfstelle.

Wie prüft man Barrierefreiheit? — Die 5-Schritte-Methodik

Das folgende Vorgehen orientiert sich an den vier WCAG-Prinzipien — Wahrnehmbar, Bedienbar, Verständlich und Robust — und kombiniert automatische mit manuellen Tests. So deckst du den größtmöglichen Anteil an Barrieren ab.

1. Automatischen Scan durchführen — mit bf-check.de, axe DevTools, WAVE oder Lighthouse. Findet fehlende Alt-Texte, Kontrastprobleme, fehlende Labels.
2. Tastatur-Test — Webseite nur mit Tab, Enter und Leertaste bedienen. Alle Funktionen erreichbar? (WCAG SC 2.1.1 Tastatur)
3. Screenreader-Test — NVDA (kostenlos, Windows) oder VoiceOver (Mac) installieren und die Seite vorlesen lassen.
4. Farbkontrast und Zoom prüfen — Minimum 4,5:1 für Normaltext (WCAG SC 1.4.3), Zoom bis 200 % ohne Funktionsverlust (WCAG SC 1.4.4).
5. Ergebnisse dokumentieren — für die BFSG-Dokumentationspflicht (§ 3 BFSG).

Was ein DIY-Audit leisten kann (und was nicht)

Automatische Scanner decken etwa 30–40 % aller WCAG-Verstöße auf. Mit manuellen Tests (Tastatur, Screenreader, Zoom) erhöhst du die Abdeckung auf rund 60–70 %. Das reicht, um die größten Risiken zu eliminieren und die häufigsten Nutzerbarrieren zu beseitigen.

Was ein DIY-Audit nicht leisten kann: Komplexe ARIA-Patterns bewerten, kognitive Barrierefreiheit vollständig prüfen oder ein offizielles Konformitätszertifikat ausstellen. Für vollständige WCAG-Konformität braucht es manuelle Tests durch erfahrene Prüfer und idealerweise Tests mit echten Nutzern assistiver Technologien.

Schritt 1: Automatischen Scan durchführen

Automatische Tools sind dein Startpunkt. Sie prüfen in Sekunden Hunderte von Regeln und liefern eine priorisierte Fehlerliste. Die drei wichtigsten kostenlosen Tools im Überblick:

axe DevTools (Browser-Extension)

Die axe-Extension von Deque Systems ist der Industriestandard. Sie prüft direkt im Browser gegen WCAG 2.2 AA und liefert zu jedem Fehler eine Erklärung samt Lösungsvorschlag. Installiere sie für Chrome oder Firefox, öffne die DevTools (F12) und klicke auf den Reiter „axe DevTools“.

WAVE (WebAIM)

WAVE visualisiert Barrieren direkt auf der Seite — fehlende Alt-Texte, leere Links, Kontrastprobleme. Besonders hilfreich, weil du die Fehler im Kontext siehst. Erreichbar als Extension oder unter wave.webaim.org.

Google Lighthouse

Lighthouse ist in Chrome DevTools eingebaut (Tab „Lighthouse“). Es prüft Accessibility zusammen mit Performance, SEO und Best Practices. Der Accessibility-Score (0–100) gibt eine grobe Orientierung — aber Achtung: Ein Score von 100 bedeutet nicht, dass deine Seite barrierefrei ist. Lighthouse prüft nur einen Bruchteil der WCAG-Kriterien.

Profi-Tipp: Nutze alle drei Tools nacheinander. Jedes findet leicht unterschiedliche Probleme. Dokumentiere die Ergebnisse als Screenshots oder CSV-Export — das wird später deine Nachweisdokumentation.

Schritt 2: Tastatur-Test

Der Tastatur-Test prüft WCAG-Prinzip 2 (Bedienbar) und ist einer der aussagekräftigsten manuellen Tests überhaupt. Lege die Maus beiseite und navigiere deine gesamte Webseite ausschließlich mit der Tastatur.

Wichtige Tasten:

• Tab / Shift+Tab — vorwärts/rückwärts navigieren
• Enter — Links und Buttons aktivieren
• Leertaste — Checkboxen umschalten, Buttons aktivieren
• Escape — Modale/Dropdowns schließen
• Pfeiltasten — innerhalb von Menüs, Tabs, Radio-Gruppen navigieren

Prüfe folgende Punkte:

• Ist der Fokus-Indikator jederzeit sichtbar? (WCAG SC 2.4.7 Fokus sichtbar)
• Erreichst du alle interaktiven Elemente — auch Menüs, Slider, Tabs? (WCAG SC 2.1.1 Tastatur)
• Kannst du aus Modalen und Dropdown-Menüs entkommen? (WCAG SC 2.1.2 Keine Tastaturfalle)
• Ist die Tab-Reihenfolge logisch und folgt dem visuellen Layout? (WCAG SC 2.4.3 Fokus-Reihenfolge)

Schritt 3: Screenreader-Test

Ein Screenreader liest deine Seite so vor, wie blinde und stark sehbehinderte Nutzer sie erleben. Dieser Test prüft WCAG-Prinzip 1 (Wahrnehmbar) und deckt Probleme auf, die kein automatischer Scanner findet.

Kostenlose Screenreader:

• NVDA — kostenlos für Windows, der meistgenutzte Screenreader in Deutschland
• VoiceOver — auf jedem Mac und iPhone vorinstalliert (Aktivierung: Cmd+F5 auf Mac)
• Orca — kostenlos für Linux

Prüfe folgende Punkte:

• Werden Bilder sinnvoll beschrieben? (WCAG SC 1.1.1 Nicht-Text-Inhalte)
• Werden Buttons und Links korrekt angesagt — mit verständlichem Label? (WCAG SC 4.1.2 Name, Rolle, Wert)
• Ist die Überschriften-Hierarchie logisch (h1 → h2 → h3)? (WCAG SC 1.3.1 Info und Beziehungen)
• Werden Formularfelder mit ihren Labels vorgelesen? (WCAG SC 1.3.1)
• Werden Statusmeldungen (Warenkorbhinweise, Fehlermeldungen) automatisch angesagt? (WCAG SC 4.1.3 Statusmeldungen)

Schritt 4: Zoom und Vergrößerung testen

Viele Nutzer mit Sehschwäche vergrößern den Browser auf 200 % oder mehr. Teste deine Seite bei verschiedenen Zoom-Stufen:

• 200 % Zoom: Text muss lesbar bleiben, keine Inhalte dürfen abgeschnitten werden (WCAG SC 1.4.4 Textgröße ändern)
• 400 % Zoom: Inhalte müssen in einer Spalte dargestellt werden, ohne horizontales Scrollen (WCAG SC 1.4.10 Umfluss/Reflow)
• Textabstand verdoppeln: Prüfe, ob Text bei erhöhtem Zeilen- und Buchstabenabstand noch lesbar bleibt (WCAG SC 1.4.12 Textabstand)

Tipp: In Chrome kannst du den Zoom über Strg + + schrittweise erhöhen. Prüfe besonders Navigation, Formulare und Tabellen — dort brechen Layouts am häufigsten.

Schritt 5: Ergebnisse dokumentieren

Ein Audit ohne Dokumentation ist wertlos — sowohl für dich als auch für den Nachweis gegenüber Behörden. § 3 BFSG verlangt, dass Wirtschaftsakteure die Konformität ihrer Produkte und Dienstleistungen nachweisen können.

Dokumentiere für jeden gefundenen Fehler:

• Welche Seite / welches Element ist betroffen?
• Welches WCAG-Erfolgskriterium wird verletzt (z. B. SC 1.1.1)?
• Schweregrad (kritisch, schwer, mittel, gering)
• Screenshot oder Beschreibung des Problems
• Geplante Maßnahme und Frist zur Behebung

Erstelle eine einfache Tabelle (Excel, Google Sheets) oder nutze eine spezialisierte Tool-Übersicht, die Ergebnisse automatisch exportiert. Halte Datum des Audits, geprüfte URLs und verwendete Tools fest.

Checkliste nach WCAG-Prinzip

Nutze die folgende Kurzcheckliste als Leitfaden für dein DIY-Audit. Sie deckt die wichtigsten Erfolgskriterien der WCAG 2.2 Stufe AA ab:

Prinzip 1: Wahrnehmbar

• Alle Bilder haben aussagekräftige Alt-Texte (SC 1.1.1)
• Videos haben Untertitel (SC 1.2.2)
• Farbkontrast mindestens 4,5:1 für Normaltext, 3:1 für großen Text (SC 1.4.3)
• Text bis 200 % vergrößerbar ohne Funktionsverlust (SC 1.4.4)
• Bei 400 % kein horizontales Scrollen (SC 1.4.10)

Prinzip 2: Bedienbar

• Alle Funktionen per Tastatur erreichbar (SC 2.1.1)
• Keine Tastaturfallen (SC 2.1.2)
• Fokus-Indikator immer sichtbar (SC 2.4.7)
• Seitentitel beschreibend (SC 2.4.2)
• Skip-to-Content-Link vorhanden (SC 2.4.1)

Prinzip 3: Verständlich

• Seitensprache im HTML-Tag deklariert (SC 3.1.1)
• Formularfelder haben sichtbare Labels (SC 3.3.2)
• Fehlermeldungen benennen das Problem und den Ort (SC 3.3.1)
• Navigation ist konsistent auf allen Seiten (SC 3.2.3)

Prinzip 4: Robust

• HTML ist valide (keine doppelten IDs, korrekte Verschachtelung) (SC 4.1.1)
• Interaktive Elemente haben Name, Rolle und Wert (SC 4.1.2)
• Statusmeldungen werden Screenreadern mitgeteilt (SC 4.1.3)

Wann du einen externen Experten brauchst

Ein DIY-Audit hat Grenzen. In diesen Fällen lohnt sich die Investition in eine professionelle Prüfung:

• Komplexe Interaktionen: Konfiguratoren, Buchungsstrecken, Single-Page-Applications (SPAs) erfordern ARIA-Expertise.
• Offizielles Zertifikat: Wenn Kunden oder Partner einen Nachweis nach EN 301 549 verlangen.
• Viele Fehler im DIY-Audit: Wenn dein Scan mehr als 50 Fehler pro Seite zeigt, brauchst du eine systematische Sanierungsstrategie.
• Hohe Haftungsrisiken: Bei Webseiten mit hohem Traffic oder in sensiblen Branchen (Gesundheit, Finanzen) kann ein Budget für ein Experten-Audit gut investiert sein.

Auch wenn du einen Experten beauftragst: Das DIY-Audit bleibt wertvoll. Es hilft dir, die Ergebnisse der professionellen Prüfung zu verstehen und die Nachbesserung selbst zu steuern.

Häufig gestellte Fragen