Digitale Barrierefreiheit – Teilhabe für jeden

Digitale Barrierefreiheit ist seit 2025 grundsätzlich für viele digitale Produkte und Verbraucher-Dienstleistungen verpflichtend und hat zwei Seiten: die Erfahrung der Nutzerinnen und Nutzer (z. B. ausreichende Farbkontraste, vollständige Tastaturbedienbarkeit) und die technische Beschaffenheit von IT-Lösungen, die diese Nutzung ermöglicht.

Maßstab sind die WCAG; in Deutschland konkretisiert durch die BITV 2.0, die auf die harmonisierte EU-Norm EN 301 549 (aktuell 3.2.1) verweist – das ist die Referenz für Barrierefreiheitstests. Wer seine Website rechtssicher und nutzerfreundlich aufstellen will, richtet sich daher an WCAG-Level AA entlang dieser Norm.

Inhaltsverzeichnis

1. Was sind die 4 Prinzipien der WCAG?

Die vier Prinzipien der WCAG umfassen die Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit der Inhalte. Diese vier Prinzipien tragen alle konkreten WCAG-Erfolgskriterien (sehen Sie mehr dazu unter Punkt 2.).

Wahrnehmbar

Alles Wichtige muss für Menschen überhaupt wahrnehmbar sein, sowohl visuell, auditiv als auch taktil.

Textalternativen für Bilder/Icons; Untertitel/Transkripte bei Videos & Audio.
Ausreichende Farbkontraste; Inhalte bleiben bei Zoom gut lesbar (kein horizontales Scrollen).
Keine Information nur „per Farbe“ oder „im Bild“.
Schnelltest: Siehst/‚hörst‘ du jede Info auch ohne Bilder oder Ton?

Bedienbar

Die Seite lässt sich mit unterschiedlichen Eingaben steuern, insbesondere per Tastatur.

Alles ist per Tab erreichbar; Fokus deutlich sichtbar und nicht verdeckt.
Animationen/Slider sind pausierbar; keine „Keyboard-Fallen“.
Mobile: Alternativen zu Wisch/Drag, ausreichend große Klickziele.
Schnelltest: Kommst du mit nur der Tastatur sinnvoll durch Navigation, Formulare & Menüs?

Verständlich

Inhalt und Bedienung sind klar, vorhersehbar und sprachlich sauber.

Eindeutige Seitentitel, Überschriften, Linktexte („Kontaktformular öffnen“ statt „Hier klicken“).
Keine Überraschungen: Kein Auto-Submit bei Eingaben; Navigation/Bezeichnungen konsistent.
Formulare mit klaren Labels, hilfreichen Fehlermeldungen und Bestätigungsschritten.
Schnelltest: Weißt du vor dem Klick, was passiert – und verstehst du jeden Fehlerhinweis sofort?

Robust

Code ist so umgesetzt, dass Assistenztechnologien zuverlässig damit arbeiten können.

Saubere Semantik/HTML; für Komponenten sind Name, Rolle, Zustand programmatisch ermittelbar.
Statusmeldungen (z. B. nach Ajax) werden Screenreadern angekündigt.
Schnelltest: Funktionieren deine Dialoge, Toggle, Formfelder sauber mit Screenreader & Co.?

2. Welche Standards gibt es für Barrierefreiheit?

Alle relevanten WCAG-Kriterien (A/AA)

Wahrnehmbar

Inhalte müssen in zugänglichen Formen wahrnehmbar sein – nicht nur visuell.

1.1.1 Nicht-Text-Inhalte – Alternativtexte

Sinntragende Bilder erhalten präzise Alt-Texte; dekorative Bilder alt="". Bild-Links beschreiben Ziel/Aktion.

Logo-Link: Ziel genannt („Startseite“)?
Komplexe Grafiken: Kurzfassung + ausführliche Textalternative?

1.2.1–1.2.5 Zeitbasierte Medien – Transkript, Untertitel, Audiodeskription

Nur-Audio/Video: Transkript. Video mit Ton: Untertitel. Wenn visuelle Infos sonst fehlen: Audiodeskription. Live-Formate: Live-Untertitel.

Transkript direkt am Medium verlinkt?
Untertitel inkl. Sprecher*innen/Geräuschen/Musik?

1.3.1 Information & Beziehungen – korrekte Semantik

Überschriften h1–h6 hierarchisch; Listen/Tabellen semantisch; Landmarken (header/nav/main/footer) nutzen.

Keine Layout-Tabellen; nur echte Daten.

1.3.2 Sinnvolle Reihenfolge

Lesereihenfolge im DOM entspricht der visuellen/inhaltlichen Logik.

1.3.3 Ohne rein sensorische Hinweise

Instruktionen niemals nur über Farbe/Position/Form („roter Button rechts“) vermitteln.

1.3.4 Orientierung

Seiten nicht auf Porträt/Landschaft fixieren (Ausnahmen: z. B. Spiele, Instrumente).

1.3.5 Eingabezweck erkennbar

Formfelder mit maschinenlesbaren Zwecken versehen (autocomplete) – unterstützt Autofill/Passkeys.

1.4.1 Farbe nicht allein

Information wird nie ausschließlich über Farbe vermittelt (immer zusätzliche Indikatoren).

1.4.2 Audiosteuerung

Autoplay-Audio pausierbar/stumm (≥ 3 Sek.).

1.4.3 Kontrast (Text)

Fließtext ≥ 4.5:1, großer/fetter Text ≥ 3:1.

1.4.4 Text vergrößerbar

Bis 200 % ohne Funktionsverlust nutzbar.

1.4.5 Keine Bilder von Text

Keine Schriftgrafiken (Ausnahme: Logos).

1.4.10 Reflow

Bei starkem Zoom keine horizontale Zwangs-Scrollerei; Layout bricht sinnvoll um.

1.4.11 Nicht-Text-Kontrast

UI-Elemente/Icons/Grafiken ≥ 3:1.

1.4.12 Textabstand

Text-Spacing anpassbar, ohne Inhalte zu verlieren.

1.4.13 Inhalte bei Hover/Fokus

Zusatzinhalte (Tooltips/Untermenüs) sind steuerbar, bleiben auf Wunsch sichtbar und lassen sich schließen.

Bedienbar

Per Tastatur steuerbar, ohne Fallen, mit klarer Orientierung und sichtbarem Fokus.

2.1.1 Tastatur

Alle Funktionen sind ohne Maus erreichbar/bedienbar.

2.1.2 Keine Keyboard-Falle

Fokus kann jedes Element erreichen und wieder verlassen.

2.1.4 Tastenkürzel steuerbar

Ein-Tasten-Shortcuts sind abschaltbar, umlegbar oder nur im Fokus aktiv.

2.2.1 Zeit anpassbar

Zeitlimits abschalt-/anpass-/verlängerbar.

2.2.2 Pause/Stop/Verbergen

Bewegtes/Blinkendes/Automatisch scrollendes lässt sich pausieren/stoppen/verbergen.

2.3.1 Drei Blitze oder weniger

Keine Inhalte blitzen öfter als drei Mal pro Sekunde.

2.4.1 Bereiche überspringen

Skip-Link „Zum Inhalt“ oder Landmarken, um Wiederholungen zu überspringen.

2.4.2 Seitentitel

Jede Seite hat einen eindeutigen, beschreibenden Titel.

2.4.3 Fokus-Reihenfolge

Interaktive Elemente werden in sinnvoller Reihenfolge fokussiert.

2.4.4 Linkzweck (im Kontext)

Der Zweck des Links ist aus Ankertext/Kontext erkennbar (kein „hier klicken“).

2.4.5 Mehrere Wege

Es gibt mehrere Wege, Inhalte/Seiten zu finden (Navigation, Suche, Sitemap, Breadcrumbs).

2.4.6 Beschreibende Überschriften & Labels

Überschriften/Labels beschreiben kurz und klar den folgenden Inhalt bzw. Zweck.

2.4.7 Fokus sichtbar

Der Tastaturfokus ist stets deutlich sichtbar.

2.4.11 Fokus-Appearance (Minimum)

Fokus-Indikator deutlich (Kontrast/Fläche) – er ist nicht zu übersehen.

2.4.12 Fokus nicht verdeckt (Minimum)

Fixe Elemente (z. B. Header) verdecken den Fokus nicht; Seite scrollt nötigenfalls.

2.5.1 Zeigergesten

Für komplexe Gesten gibt es einfache Alternativen (z. B. Tippen statt Ziehen).

2.5.2 Zeiger-Abbruch

Aktionen bei Down-Event sind abbrechbar oder erfordern Bestätigung.

2.5.3 Label im Namen

Programmierbarer Name enthält den sichtbaren Text (wichtig für Sprachsteuerung).

2.5.4 Bewegungs-Auslösung

Funktionen, die Bewegung nutzen, sind abschaltbar und haben eine Alternative.

2.5.7 Ziehen vermeiden

Funktionen erfordern nicht ausschließlich Ziehen (Alternative anbieten).

2.5.8 Zielgröße (Minimum)

Interaktive Ziele sind ausreichend groß oder haben ausreichend Abstand (Richtwert: ~24 CSS-px).

Verständlich

Vorhersagbares Verhalten, klare Sprache, hilfreiche Labels und Fehlermeldungen.

3.1.1 Sprache der Seite

Grundsprache im <html lang> korrekt gesetzt.

3.1.2 Sprache von Abschnitten

Sprachwechsel im Inhalt markiert (z. B. <span lang="en">…</span>).

3.2.1 Kein Wechsel bei Fokus

Fokus allein verändert nicht die Seite/den Kontext.

3.2.2 Kein unerwarteter Wechsel bei Eingabe

Eingaben lösen ohne Bestätigung keinen Kontextwechsel aus (kein Auto-Submit).

3.2.3 Konsistente Navigation

Navigation bleibt in Reihenfolge/Position konsistent.

3.2.4 Konsistente Identifikation

Gleichartige Komponenten werden gleich benannt/identifiziert.

3.2.6 Konsistente Hilfe

Wenn Hilfe angeboten wird, ist sie auf allen Seiten konsistent auffindbar.

3.3.1 Fehler identifizieren

Fehler werden klar benannt und an den Feldern zugeordnet.

3.3.2 Labels & Instruktionen

Klare Labels/Anleitungen; Platzhalter allein genügen nicht.

3.3.3 Fehler-Vorschläge

Bei erkannten Fehlern werden Korrekturvorschläge angeboten.

3.3.4 Fehlerprävention (wichtige Vorgänge)

Rechtlich/finanziell relevante Vorgänge: rückgängig, korrigierbar oder bestätigbar.

3.3.7 Redundante Eingaben vermeiden

Bereits bekannte Daten nicht erneut verlangen (vorbefüllen, übernehmen).

3.3.8 Barrierefreie Authentifizierung (Minimum)

Anmeldung ohne kognitive Rätsel möglich (z. B. Copy-Paste, Passwort-Manager, passwortlose Optionen).

Robust

Kompatibel mit Assistenz-Technologien: Rollen, Namen & Zustände maschinenlesbar.

4.1.2 Name · Rolle · Wert

Bei Formularen, Links, Buttons & Custom-Widgets sind Name/Rolle/Zustand programmatisch ermittelbar & änderbar.

4.1.3 Status-Meldungen

Erfolg/Fehler/Info wird per Rolle/Live-Region angekündigt, ohne Fokusverlust.

3. Ist die WCAG in Deutschland verpflichtend?

Kurz: direkt nein, indirekt ja – über die EU-Norm EN 301 549, die bei uns den technischen Maßstab setzt.

Öffentliche Stellen: Barrierefrei nach BITV 2.0 – maßgeblich ist die EN 301 549 (damit faktisch WCAG-Level-AA für Web, plus Extras).
Private Anbieter (B2C): Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit 28.06.2025 für erfasste Verbraucher-Dienstleistungen (z. B. Online-Shop, Banking). Technischer Maßstab: EN 301 549 mit WCAG-Kriterien.
Kleinstunternehmen-Ausnahme: Für Dienstleistungen mit < 10 Beschäftigten und ≤ 2 Mio. € Jahresumsatz/Bilanzsumme kann eine BFSG-Ausnahme greifen. Achtung: Für erfasste Produkte oder besondere Rollen (z. B. Hersteller) kann die Ausnahme nicht ziehen.
B2B-only: Reine Angebote ohne Verbraucherbezug fallen typischerweise nicht unter das BFSG. Barrierefreiheit bleibt dennoch sinnvoll (Reichweite, Usability, SEO).

Praxis-Merksatz: Rechtlich wird EN 301 549 geprüft, technisch sodann WCAG 2.1/2.2 AA voll umgesetzt.

Hinweis: Weiterführende Informationen zur Barrierefreiheit und zum BFSG

Wenn Sie sich über das Barrierefreiheitsstärkungsgesetz (BFSG) und dessen Bedeutung für die Privatwirtschaft informieren möchten, finden Sie weitere hilfreiche Materialien, Webinare und Links im Nachfolgenden:

4. Digitale Barrierefreiheit Tools für die Praxis

Zur Überprüfung der Barrierefreiheit von Websites gibt es verschiedene Werkzeuge. Sie unterstützen dabei, typische Probleme sichtbar zu machen und erste Einschätzungen zur Zugänglichkeit zu erhalten:

WAVE (Web Accessibility Evaluation Tool)
Eine kostenlose Browsererweiterung, die mögliche Barrieren wie fehlerhafte Überschriftenstrukturen oder fehlende Alternativtexte aufzeigt.
WAVE

Google Lighthouse und HeadingsMap
Lighthouse führt einen automatisierten Test zu grundlegenden Kriterien wie Farbkontrasten, Schriftgrößen, Labels, Touch-Elementen oder Alt-Texten durch, während HeadingsMap zusätzlich einen strukturierten Überblick über die Überschriftsstruktur bietet.
Google Lighthouse

Screenreader-Überprüfung
Screenreader machen erfahrbar, wie Menschen mit Sehbehinderungen Websites wahrnehmen. Mit ihnen lässt sich überprüfen, ob Inhalte korrekt ausgegeben werden. Beispiele:

Kontrast-Checker
Ein ausreichender Kontrast zwischen Text und Hintergrund ist entscheidend für Lesbarkeit. Dieses Tool ermöglicht eine Prüfung der gewählten Farbwerte.
Contrast Checker

Barrierefreiheit ist nicht nur für Menschen wichtig, sondern spielt auch für die Sichtbarkeit von Websites eine Rolle. Mehr zur Suchmaschinenoptimierung (SEO) finden Sie in unserem Beitrag: SEO für Anwälte

5. FAQ: Digitale Barrierefreiheit

Was ist digitale Barrierefreiheit und warum ist sie wichtig?

Sie sorgt dafür, dass jede Person digitale Angebote gleichwertig nutzen kann, unabhängig von Behinderung, Situation (helles Licht, laute Umgebung) oder Gerät. Das erhöht Reichweite, Usability und SEO, senkt Abbrüche, reduziert rechtliche Risiken (BITV/BFSG) und ist schlicht: gutes Web.

Was verstehen Sie unter digitaler Barrierefreiheit?

Die zweiteilige Idee:

Nutzungserlebenis ohne Hürden (Kontrast, Untertitel, klare Struktur, vollständige Tastaturbedienung).
Technische Umsetzung, die das ermöglicht (saubere Semantik, Name/Rolle/Zustand, Alt-Texte, reflow-fähiges Layout). Beides zusammen macht Inhalte für alle zugänglich.

Was sind die 4 Prinzipien der WCAG?

Wahrnehmbar, Bedienbar, Verständlich, Robust (POUR). Kurz: Inhalte müssen für alle erfassbar sein, sich per Tastatur & Co. steuern lassen, vorhersehbar funktionieren und technisch so gebaut sein, dass Screenreader & Browser sie zuverlässig verstehen.

Ist die WCAG in Deutschland verpflichtend?

Direkt: nein (sie ist kein Gesetz). Verbindlich wird sie indirekt über die EN 301 549, auf die u. a. die BITV 2.0(öffentliche Stellen) und seit 28.06.2025 das BFSG für viele B2C-Dienstleistungen verweisen. Ergebnis: Faktisch gilt WCAG-Level AA als technischer Maßstab.

Welche Standards gibt es für Barrierefreiheit?

Kern ist WCAG 2.1/2.2 (Web), in Europa gebündelt in EN 301 549 (Web, Software, Dokumente, Apps, Hardware). Dazu BITV 2.0 (DE, öffentliche Stellen), PDF/UA (barrierefreie PDFs), WAI-ARIA + Authoring Practices (interaktive Komponenten), teils ISO 30071-1 (Prozess-/Managementleitfaden).

Was ist ein WCAG-Test?

Ein strukturierter Abgleich deiner Seiten, Apps oder PDFs gegen die vier WCAG-Erfolgskriterien. Kombiniert aus Automatiken (z.B. Kontraste, fehlende Labels) und manuellen Prüfungen (etwa: Tastaturnutzung, Fokusführung, Screenreader-Verhalten, verständliche Linktexte). Gute Praxis: repräsentative Seitenauswahl, dokumentierte Befunde, Maßnahmenplan.

Jurawelt Redaktion

Christopher Molter

Studium:

Student der Rechtswissenschaften an der EBS Universität für Wirtschaft und Recht
Schwerpunktbereich: Bank- und Kapitalmarktrecht
Auslandsaufenthalt an der University of Alberta (Kanada)

Jurawelt:

Redakteur & Studentischer Mitarbeiter

Digitale Barrierefreiheit – Teilhabe für jeden

1. Was sind die 4 Prinzipien der WCAG?

Wahrnehmbar

Bedienbar

Verständlich

Robust

2. Welche Standards gibt es für Barrierefreiheit?

Wahrnehmbar

Bedienbar

Verständlich

Robust

3. Ist die WCAG in Deutschland verpflichtend?

4. Digitale Barrierefreiheit Tools für die Praxis

5. FAQ: Digitale Barrierefreiheit

Was ist digitale Barrierefreiheit und warum ist sie wichtig?

Was verstehen Sie unter digitaler Barrierefreiheit?

Was sind die 4 Prinzipien der WCAG?

Ist die WCAG in Deutschland verpflichtend?

Welche Standards gibt es für Barrierefreiheit?

Was ist ein WCAG-Test?

Schreibe einen Kommentar Antwort abbrechen