Barrierefreiheit 2026.
WCAG 2.2, BFSG — und wie man es technisch richtig macht.
95,9 % aller Websites scheitern bei grundlegenden Accessibility-Tests. Dieser Guide zeigt, wie man es besser macht — mit konkreten Code-Beispielen, den richtigen Tools und dem nötigen rechtlichen Überblick.
Barrierefreiheit ist seit Juni 2025 Gesetz — nicht Kür.
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft. Wer unter die Pflicht fällt und noch keine konforme Website hat, riskiert Bußgelder und Abmahnungen.
95,9 %
aller Websites scheitern bei grundlegenden A11y-Tests (WebAIM Milestone Report)
13 Mio.
Menschen mit Behinderungen in Deutschland als potenzielle Nutzer
bis 100 k€
mögliche Bußgelder bei BFSG-Verstößen — seit Juni 2025 in Kraft
Die vier Prinzipien — technisch umgesetzt.
POUR: Perceivable, Operable, Understandable, Robust. WCAG 2.2 Level AA ist seit Oktober 2023 der aktuelle Standard und Basis für BFSG und EN 301 549. WCAG 3.0 ist noch in Entwicklung.
Wahrnehmbar
Visuelle Inhalte brauchen Text-Alternativen. Bilder mit alt-Attribut, Videos mit Untertiteln, Kontrast ≥ 4,5:1.
Bedienbar
Alle Funktionen per Tastatur erreichbar. Jedes click-Event braucht ein Tastatur-Äquivalent. Fokus immer sichtbar.
Verständlich
Konsistente Navigation, klare Fehlermeldungen, vorhersagbares Verhalten. Sprache im HTML angeben.
Robust
Semantisches HTML als Basis. main, nav, section, article, header, footer korrekt einsetzen.
Alt-Texte richtig einsetzen
<!-- Informatives Bild -->
<img src="umsatz-q1.webp"
alt="Umsatz Q1 2026: +25 % auf 2,3 Mio. €"
width="600" height="400">
<!-- Dekoratives Bild: alt="" leer lassen -->
<img src="hintergrund.svg"
alt=""
role="presentation">Formulare barrierefrei
<label for="email">
E-Mail-Adresse *
</label>
<input
type="email"
id="email"
required
autocomplete="email"
aria-describedby="email-hint email-error">
<p id="email-hint" class="hint">
Wir senden keine Werbemails.
</p>
<div id="email-error" role="alert"
aria-live="polite"></div>Fokus — sichtbar & erreichbar
:focus-visible {
outline: 3px solid #EB5E28;
outline-offset: 3px;
border-radius: 2px;
}
/* Skip-Link für Tastatur-Nutzer */
.skip-link {
position: absolute;
top: -40px;
left: 1rem;
background: #EB5E28;
color: #fff;
padding: .5rem 1rem;
transition: top .2s;
}
.skip-link:focus {
top: 1rem;
}Semantisches HTML & Skip-Link
<body>
<a href="#main" class="skip-link">
Zum Hauptinhalt springen
</a>
<header>
<nav aria-label="Hauptnavigation">…</nav>
</header>
<main id="main">
<article>
<h1>Titel</h1>
<time datetime="2026-01-15">
15. Januar 2026
</time>
<p>Inhalt…</p>
</article>
</main>
<footer>…</footer>
</body>Hier scheitern die meisten Websites.
Alle sechs Punkte lassen sich mit sauberem HTML und ein bisschen Disziplin vermeiden. Quelle: WebAIM Milestone Report 2024.
54,5 %
Fehlender Alt-Text
Bilder ohne alt-Attribut sind für Screenreader unsichtbar. Laut WebAIM Milestone Report betrifft das mehr als die Hälfte aller Home-Pages.
81 %
Geringer Kontrast
Mindestens 4,5:1 für normalen Text, 3:1 für großen Text (≥ 18 pt / 14 pt fett). Häufigster Einzelfehler weltweit.
48,6 %
Fehlende Labels
Eingabefelder ohne explizites label-Element sind für Screenreader-Nutzer nicht zu identifizieren.
44,6 %
Leere Links
Links ohne beschreibenden Text (z. B. reine Icon-Links ohne aria-label) verwirren assistive Technologien.
~70 %
Kein :focus-visible Style
Tastatur-Nutzer sehen nicht, wo sie sich auf der Seite befinden. Seit WCAG 2.2 ist sichtbarer Fokus Level AA.
~60 %
Falsche Überschriften
Screenreader navigieren primär über Überschriften — H1 → H2 → H3, keine Ebenen überspringen.
Was seit Oktober 2023 hinzugekommen ist.
Drei neue Level-AA-Kriterien sind für die Praxis besonders relevant. Sie sind Pflicht im Rahmen von BFSG und EN 301 549.
Target Size Minimum — Level AA
Touch-Ziele müssen mindestens 24 × 24 CSS-Pixel groß sein (Empfehlung: 44 × 44 px für mobile).
/* WCAG 2.2 — 2.5.8 Target Size Minimum */
.btn,
a,
[role="button"] {
min-width: 24px;
min-height: 24px;
padding: 12px 16px; /* empfohlen: 44×44 px */
}
/* Touch-Fläche vergrößern ohne Layout-Änderung */
.icon-link {
padding: 12px;
}Focus Appearance — Level AA
Der Fokus-Indikator muss eine definierte Mindestfläche und einen Kontrast ≥ 3:1 zur Umgebung haben. Reines outline: none ist verboten.
/* WCAG 2.2 — 2.4.11 Focus Appearance (Level AA)
Fokus-Indikator muss ausreichend sichtbar sein:
- Bereich: ≥ Perimeter des Elements × 2 CSS-Pixel
- Kontrast: ≥ 3:1 zu Umgebung */
:focus-visible {
outline: 3px solid #EB5E28; /* Kontrast > 3:1 ✓ */
outline-offset: 3px;
/* outline-area ≈ 2px × Perimeter ✓ */
}Accessible Authentication — Level AA
Kein kognitiver Puzzle-Test (klassisches CAPTCHA) im Login-Prozess. Autocomplete und Passkeys sind die empfohlenen Alternativen.
<!-- WCAG 2.2 — 3.3.8: Kein kognitiver Puzzle-Test -->
<!-- Schlecht: CAPTCHA -->
<img src="/captcha.png" alt="">
<!-- Gut: Autocomplete erlauben -->
<input
type="password"
autocomplete="current-password">
<!-- Passkey / WebAuthn als beste Option -->
<button onclick="authenticate()">
Mit Passkey anmelden
</button>Was gilt wo — und seit wann.
Das BFSG gilt nicht für Kleinstunternehmen (unter 10 Mitarbeiter und unter 2 Mio. € Umsatz). Alle anderen sollten jetzt handeln — die Übergangsfrist ist abgelaufen.
Marktüberwachungsbehörden können seit dem 28. Juni 2025 prüfen. Erste Abmahnungen durch Verbraucherschutzverbände sind bereits dokumentiert.
| Land | Gesetz | Status | Geltungsbereich | Standard |
|---|---|---|---|---|
| Deutschland | BFSG | seit 28. Juni 2025 | Private Unternehmen: E-Commerce, Banking, Telekommunikation (> 10 MA oder > 2 Mio. € Umsatz) — in Kraft | WCAG 2.1 Level AA / EN 301 549 |
| Deutschland | BITV 2.0 | seit 2019 | Öffentlicher Sektor, Bundesbehörden | WCAG 2.1 Level AA |
| Österreich | WZG | seit 2019 | Bundesbehörden und öffentliche Stellen | WCAG 2.1 Level AA / EN 301 549 |
| Schweiz | BehiG / eCH-0059 | laufend | Öffentliche Stellen; EU-Markt-Tätige müssen EAA-konform sein | WCAG 2.1 Level AA |
Die richtigen Tools für den Job.
Automatisierte Tests decken etwa 30–40 % aller Probleme auf. Den Rest findet man nur mit echten Screenreadern und manuellen Tastatur-Tests — besonders Logik und Formulare.
Lighthouse
Chrome DevTools
VoiceOver
Screenreader (Mac/iOS)
CI/CD-Integration mit axe-core & pa11y
Accessibility-Regressions automatisch erkennen — bei jedem Commit.
# .github/workflows/accessibility.yml
name: Accessibility CI
on: [push, pull_request]
jobs:
a11y:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Build & serve
run: npx serve dist &
- name: axe-core (WCAG 2.2 AA)
run: |
npx @axe-core/cli \
--tags wcag2a,wcag2aa,wcag21aa,wcag22aa \
http://localhost:3000
- name: pa11y sitemap check
run: |
npx pa11y-ci \
--sitemap http://localhost:3000/sitemap.xmlWas du sofort umsetzen kannst.
Mit diesen sechs Punkten löst du die häufigsten Probleme — ohne großen Aufwand.
Alle -Elemente haben ein alt-Attribut (informativ: beschreibend, dekorativ: alt="")
Alle Eingabefelder haben ein explizites
Farbkontrast ≥ 4,5:1 für normalen Text — prüfen mit WebAIM Contrast Checker
Überschriftenstruktur H1 → H2 → H3 einhalten, keine Ebenen überspringen
:focus-visible Styles gesetzt, outline: none nirgends ohne Ersatz
Skip-Link am Seitenanfang implementiert, lang="de" im HTML-Element gesetzt
Hey, ich bin Tobi! 👋
Als der sympathische Macher hinter Tobeworks verwandle ich seit über zwei Jahrzehnten Kaffee in Code – und das ziemlich erfolgreich. Von meinem Hauptquartier in der Mainzer Altstadt aus baue ich Auftritte, die schnell laden, bei Google auftauchen und Besucher in Kunden verwandeln. Musik mache ich übrigens auch.
Meine Mission? Websites, die nicht nur gut aussehen, sondern auch richtig was drauf haben. Quasi der Dreiklang aus Form, Funktion und "Boah, endlich mehr Anfragen!" 🚀 Ob knackige Landingpage oder komplexer Webauftritt – ich bring dein Business ins digitale Rampenlicht.
Aber genug von mir: Du willst mehr Kunden über deine Website? Super! Du arbeitest direkt mit mir – nicht mit einem Account Manager, nicht mit einem Junior-Team. Klare Kommunikation, feste Preise, keine Überraschungen. Lass uns das anpacken!
Barrierefreie Website — richtig gemacht.
Ich baue Websites, die von Anfang an zugänglich sind — nicht als nachträgliches Audit. Semantisches HTML, saubere Struktur, WCAG 2.2-konform, BFSG-ready.