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 Tobias!
Seit über zwei Jahrzehnten verwandle ich Kaffee in Code, von meinem Hauptquartier in der Mainzer Altstadt aus. In der Zeit hat sich viel geändert, WordPress kam und ich bin fast wieder raus, jetzt kommt KI dazu, der Kern bleibt aber: Systeme, die schnell laden, gefunden werden und Besucher wirklich in Kunden verwandeln.
Was das heute alles umfasst, ist breiter geworden. Klassische Websites und Landingpages, klar. Aber auch mal KI-generierten Code auf Sicherheit und DSGVO checken, Barrierefreiheit nach WCAG 2.1 (Bankensektor lässt grüßen), und SEO, das inzwischen genauso für ChatGPT und Perplexity funktionieren muss wie für Google.
Aber genug von mir: Du willst mehr Anfragen über deine Website, einen KI-gebauten Prototypen absichern lassen, oder einfach wissen, wo du stehst? Sag Bescheid. Du redest dabei immer mit mir, nicht mit einem Account Manager, nicht mit einem Junior-Team.
Bereit für
ein Gespräch?
Völlig unverbindlich, kein perfektes Briefing nötig. Drei Sätze reichen.
Den Rest sortieren wir gemeinsam.
Du musst weder Budget noch Termin schon kennen. Ich sage dir im ersten Gespräch ehrlich, ob und wie ich helfen kann.