Barrierefreiheit

Digitale Barrierefreiheit ist kein Addon, sondern die Grundlage.

Unser Ziel?

Die digitale Welt so mitgestalten, dass alle Menschen sie nutzen können – einfach, selbstbestimmt und ohne Barrieren.

Warum Barrierefreiheit?

  • Bessere Usability für alle

  • Rechtssicherheit (BFSG, BITV 2.0)

  • Größere Zielgruppe

  • Geräteübergreifende Kompatibilität

  • Höhere Qualität eurer Produkte & Dienstleistungen

Wie wir euch unterstützen?

  • Konformitätsprüfungen nach BITV 2.0 & BFSG

  • Erfahrung in Barrierefreier Software-Entwicklung & UX Gestaltung

  • Umsetzung von Barrierefreiheit in Digitalisierungsprojekten

  • Workshops & Schulungen für Teams zum Awareness Raising und konkreter Umsetzung

  • Ausstattung, Optimierung und Schulung von barrierefreien PC Arbeitsplätzen mit assistiven Technologien

Basiswissen zu WCAG und Umsetzung

Die Web Content Accessibilyts Guidelines (WCAG) sind internationale Richtlinien mit dem Ziel, Websites für alle nutzbar zu machen.

Die WCAG basieren auf vier Grundprinzipien:

  • Wahrnehmbar: Inhalte müssen sichtbar oder hörbar sein

  • Bedienbar: Alles muss benutzbar sein

  • Verstehbar: Inhalte müssen klar und einfach zu verstehen sein

  • Robust: Funktionsfähigkeit auf verschiedenen Geräten und mit Hilfsmitteln muss gewährleistet sein

Diese Prinzipien sind die Grundlage. Darunter werden sie konkreter: Es gibt insgesamt 13 Richtlinien, die genauer beschreiben, worauf man achten sollte (z. B. Alternativtexte, Tastaturbedienung oder verständliche Fehlermeldungen).

Für jede Richtlinie existieren sogenannte Erfolgskriterien. Mit ihnen kann überprüft werden, ob eine Website die Anforderungen erfüllt (also „konform“ ist).

Diese Kriterien sind in drei Stufen eingeteilt:

  • A: Niedrigste Stufe, aber grundlegende Anforderungen (höchste Priorität)

  • AA: Der übliche Standard, den Websites erreichen sollten

  • AAA: Höchste Stufe, eher für besonders wichtige Inhalte gedacht

Wie diese Ebenen zusammenhängen, zeigt eine Visualisierung von Andrew Hick sehr anschaulich: Sie stellt die WCAG als eine Art Streckennetz dar, von den allgemeinen Prinzipien bis hin zu den konkreten Erfolgskriterien.

 

Für ein Deep Dive der einzelnen WCAG-Erfolgskriterien empfehlen sich die Understanding-Dokumente, die Hintergründe, Beispiele und Umsetzungshinweise liefern: Understanding Docs der WCAG 2.2

Accessibility Check

Wenn es um die Umsetzung der WCAG geht, stellt sich schnell die Frage: Wie testet man das eigentlich?

Typische Dinge, die dabei überprüft werden, sind zum Beispiel:

  • Ist die Website vollständig mit der Tastatur OHNE Maus nutzbar?

  • Sind Inhalte auch bei Zoom oder auf dem Handy gut zugänglich?

  • Haben Bilder verständliche Alternativtexte?

  • Sind Formulare klar beschriftet und Fehlermeldungen hilfreich?

Das gibt einen guten Eindruck davon, worauf es ankommt – zeigt aber auch:
Barrierefreiheit ist kein einzelner Check, sondern ein durchgehender Prozess.

Um Barrierefreiheit im Entwicklungsprozess sicherzustellen, können verschiedene Tools helfen, typische Probleme frühzeitig zu erkennen und zu beheben:

Tools im Überblick

Farbkontraste prüfen mit einem Contrast Checker

Das WebAIM Bookmarklet oder die Desktop App von vispero hilft dir zu überprüfen, ob Text und Hintergrund ausreichend Kontrast haben.

Warum ist das wichtig?

Menschen mit Sehbeeinträchtigungen oder Farbsehschwächen sind auf gute Kontraste angewiesen. Zu geringe Kontraste machen Inhalte schwer oder gar nicht lesbar.

So gehst du vor:

  • Nutze die Pipette, um die Vordergrundfarbe (den Text beispielsweise) zu erhalten

  • Gleiches für die Hintergrundfarbe

  • Das Tool berechnet automatisch das Kontrastverhältnis

Ergebnisse verstehen

  • AA (mindestens): erfüllt grundlegende Anforderungen

  • AAA (optimal): besonders gut lesbar

  • Werte unter AA: nicht barrierefrei

Typische Stolperfallen

  • Platzhaltertexte (z. B. in Formularen) haben oft zu wenig Kontrast

  • Buttons wirken visuell klar, erfüllen aber rechnerisch nicht die Mindestwerte

  • Transparenzen verfälschen die tatsächliche Wahrnehmung

Wichtig: Prüfe nicht nur Design-Farben, sondern echte Kombinationen aus deiner Anwendung.

Struktur & Inhalte analysieren mit WAVE

Das WAVE Evaluation Tool analysiert Webseiten direkt im Browser und zeigt Probleme visuell an.

Was macht das Tool besonders?

WAVE legt Hinweise direkt über deine Seite. Du siehst sofort, wo ein Problem auftritt, nicht nur dass es existiert.

So nutzt du WAVE

  • Öffne deine Seite im Browser

  • Starte WAVE die Extension

  • Analysiere die eingeblendeten Icons

Die wichtigsten Kategorien

  • Errors (Fehler): klare Barrierefreiheitsprobleme

  • Alerts (Warnungen): mögliche Probleme, Kontext nötig

  • Features (Strukturhinweise): z. B. Landmarken oder ARIA-Rollen

Beispiele für typische Findings

  • Fehlende Alternativtexte bei Bildern

  • Leere Buttons oder Links

  • Falsche Überschriftenstruktur (z. B. Sprünge von H1 zu H4)

Interpretation (entscheidend!)

Nicht jeder Hinweis ist automatisch ein Fehler.
Ein „Alert“ kann völlig in Ordnung sein, oder ein ernstes Problem.

 

Automatisierte Audits mit Lighthouse

Google Lighthouse ist in die Chrome DevTools integriert und führt umfassende Audits durch – auch zur Barrierefreiheit.

Was wird geprüft?

  • Kontraste

  • ARIA-Attribute

  • HTML-Struktur

  • Formularbeschriftungen

  • Fokus-Reihenfolge (teilweise)

So führst du einen Test durch

  • Öffne die DevTools (Rechtsklick → „Untersuchen“)

  • Gehe zum Tab „Lighthouse“

  • Wähle „Accessibility“ aus

  • Starte den Audit

Ergebnisse verstehen

Du erhältst:

  • Einen Score (0–100)

  • Konkrete Verbesserungsvorschläge

  • Verlinkungen zu weiterführenden Erklärungen

Wichtige Einschränkung

Ein hoher Score bedeutet nicht, dass deine Seite barrierefrei ist.

Warum?

  • Lighthouse testet nur automatisierbare Kriterien

  • Nutzendeninteraktion wird kaum bewertet

  • Screenreader-Verhalten bleibt unberücksichtigt

Automatisierte Tools wie WAVE Web Accessibility Evaluation Tool oder Google Lighthouse sind eine wertvolle Unterstützung, decken jedoch nur einen Teil möglicher Barrieren ab.

Viele Aspekte der Barrierefreiheit lassen sich nicht automatisiert prüfen, insbesondere solche, die von Nutzungskontext, Verständnis oder Interaktion abhängen.

Screenreader als testing tool

Ein zentraler Bestandteil manueller Tests ist die Prüfung mit einem Screenreader. Damit lässt sich nachvollziehen, wie Inhalte für Screenreader Nutzende tatsächlich ausgegeben werden.

Ein häufig eingesetztes Werkzeug ist NVDA (NonVisual Desktop Access). Der Screenreader ist kostenlos verfügbar und wird insbesondere auf Windows-Systemen breit genutzt.

NVDA [ Link zum NVDA Cheatsheet ]

Macht eure Angebot barrierefrei!

Ob schneller Accessibility-Check oder konkrete Optimierung: Wir helfen euch dabei, Barrieren zu erkennen und direkt zu beseitigen. Startet jetzt:

ANLEI-Service GmbH
Goethestraße 29
34119 Kassel