Barrierefreiheit prüfen – Checkliste und Tools für Ihre Webseite

Barrierefreiheit prüfen – Checkliste und Tools für Ihre Webseite

Barrierefreiheit (Accessibility) bedeutet, dass Ihre Webseite von möglichst vielen Menschen genutzt werden kann – unabhängig von Sehvermögen, Motorik oder Hilfsmitteln wie Screenreadern. Ob Ihre Seite das erfüllt, lässt sich mit Tools und einer strukturierten Checkliste prüfen. So finden Sie Schwachstellen und können gezielt nachbessern – für bessere Nutzererfahrung und oft besseres SEO.

Warum Barrierefreiheit prüfen?

Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet viele Unternehmen schrittweise zu mehr Zugänglichkeit. Darüber hinaus profitieren alle Nutzer von klarer Struktur, gutem Kontrast und bedienbaren Formularen. Suchmaschinen nutzen ähnliche Signale (z. B. Überschriften, Alt-Texte) – Barrierefreiheit und technisches SEO gehen oft einher. Eine gezielte Prüfung zeigt, wo Sie stehen und was als Nächstes Priorität hat.

Tools für die Prüfung

Google Lighthouse

Lighthouse (in den Chrome-DevTools unter „Lighthouse“) prüft automatisch viele WCAG-relevante Punkte: Kontrast, Alt-Texte, Überschriften, Tastaturbedienbarkeit, Link- und Button-Namen. Der Accessibility-Score (0–100) und die Liste der „Issues“ geben einen schnellen Überblick. Ideal für regelmäßige Checks zusammen mit Performance und SEO.

WAVE (Web Accessibility Evaluation Tool)

WAVE (z. B. als Browser-Erweiterung oder auf wave.webaim.org) analysiert eine einzelne Seite und zeigt Fehler, Warnungen und Verbesserungen direkt auf der Seite an. Sehr hilfreich, um konkrete Stellen zu sehen (z. B. welches Bild keinen Alt-Text hat). Die Ausgabe ist verständlich auch für Nicht-Entwickler.

axe DevTools

axe (z. B. als Erweiterung „axe DevTools“ in Chrome) integriert sich in die Entwicklertools und prüft die Seite gegen WCAG-Kriterien. Die Ergebnisse sind nach Schweregrad und Kategorie sortiert und oft mit konkreten Code-Hinweisen. Gut für Entwickler, die Fehler direkt im Markup beheben wollen.

Manuelle Prüfung

Tools erfassen nicht alles: Ob Texte verständlich sind, ob die Reihenfolge der Fokus-Elemente sinnvoll ist oder ob Formulare in der Praxis nutzbar sind, prüfen Sie am besten manuell – z. B. nur mit Tastatur durch die Seite navigieren (Tab, Enter, Escape) und mit einem Screenreader (z. B. NVDA unter Windows) testen.

Checkliste: Die wichtigsten Prüfpunkte

Struktur und Semantik

• [ ] Eine H1 pro Seite, danach logisch H2, H3 usw. – keine Überschrift-Ebenen überspringen.
• [ ] Landmarks genutzt (z. B. `<header>`, `<main>`, `<nav>`, `<footer>`) – hilft bei der Orientierung mit Screenreadern.
• [ ] Listen als `<ul>`/`<ol>` markiert, nicht nur optisch als Aufzählung gestaltet.

Bilder und Medien

• [ ] Alle relevanten Bilder haben einen Alt-Text (beschreibend oder leer `alt=""` bei rein dekorativen Bildern).
• [ ] Videos: Untertitel oder Transkript vorhanden, Player mit Tastatur bedienbar.

Kontrast und Lesbarkeit

• [ ] Textkontrast mindestens 4,5:1 für Fließtext, 3:1 für größere Schrift (WCAG AA). Tools wie Lighthouse oder WAVE zeigen Verstöße.
• [ ] Schriftgröße und Zeilenabstand so, dass Texte gut lesbar sind; keine Informationen nur über Farbe vermittelt.

Tastatur und Fokus

• [ ] Alle interaktiven Elemente (Links, Buttons, Formularfelder) mit Tastatur erreichbar (Tab-Navigation).
• [ ] Sichtbarer Fokus (z. B. Fokus-Rahmen) – nicht mit `outline: none` entfernen, ohne Ersatz anzubieten.
• [ ] Keine Fokus-Falle: Nutzer können mit Tastatur wieder aus Modals oder Dropdowns heraus (z. B. Escape, Tab).

Formulare

• [ ] Jedes Feld hat ein sichtbares Label (z. B. `<label for="...">` oder `aria-label`).
• [ ] Fehlermeldungen sind verständlich und werden ggf. für Screenreader angekündigt (`aria-live`, Fehler am Feld zugeordnet).
• [ ] Keine zu kurzen Timeouts – Nutzer haben genug Zeit zum Ausfüllen.

Links und Buttons

• [ ] Link-Texte aussagekräftig (nicht nur „Hier klicken“ oder „Mehr“ ohne Kontext).
• [ ] Buttons für Aktionen, Links für Navigation zu einer anderen Seite/Ressource – semantisch korrekt eingesetzt.

Prüfung in den Ablauf einbauen

• Vor dem Launch: Mindestens Lighthouse-Accessibility und WAVE für die wichtigsten Seiten; kritische Fehler (z. B. fehlende Alt-Texte, Kontrast) beheben.
• Bei größeren Redesigns: Erneut prüfen und Checkliste durchgehen.
• Regelmäßig: Einmal pro Jahr oder bei vielen neuen Inhalten einen kompletten Accessibility-Check – auch mit Tastatur und Screenreader.

Barrierefreiheit ist ein Prozess: Mit Tools und Checkliste können Sie Schritt für Schritt verbessern. Wenn Sie Unterstützung bei der Prüfung oder Umsetzung brauchen, können wir in einem kostenlosen Erstgespräch die nächsten Schritte festlegen.

Kostenloses Beratungsgespräch vereinbaren