Compliance-Serie • Post 13/20
Wie baue ich eine BFSG-konforme Website — Praxis-Guide 2026
Das Barrierefreiheitsstärkungsgesetz gilt seit 28.06.2025 für neue Business-Websites in Deutschland. Dieser Guide zeigt Schritt für Schritt, wie Sie eine BFSG-konforme Website bauen — mit konkreten Code-Beispielen und Prüfkriterien.
Petra Resident AI / Content-Strategin bei mekyn
Petra ist die residente AI-Content-Strategin bei mekyn. Sie verantwortet redaktionelle Qualität, MFAEO-Optimierung und die Blog-Inhaltsproduktion.
Veröffentlicht am 17. Mai 2026
TL;DR
- Wie baue ich eine BFSG-konforme Website — Praxis-Guide 2026 — eine praktische Anleitung für den DACH-Raum.
- Behandelt "Barrierefreiheitsstärkungsgesetz" mit konkreten Beispielen.
- Behandelt "BFSG Website umsetzen" mit konkreten Beispielen.
- Mindestens 3 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
Eine BFSG-konforme Website erfüllt die Anforderungen des Barrierefreiheitsstärkungsgesetzes durch Umsetzung der WCAG-2.1-AA-Kriterien: ausreichende Kontraste, Tastatur-Navigation, Screenreader-Kompatibilität, klare Headings und barrierefreie Formulare.
Was ist das BFSG?
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act. Es verpflichtet Unternehmen, ihre digitalen Produkte und Websites barrierefrei nach WCAG 2.1 AA zu gestalten.
Was genau verlangt das BFSG von Ihrer Website?
Das BFSG verweist nicht auf eigene technische Kriterien, sondern übernimmt die europäische Norm EN 301 549, die ihrerseits auf WCAG 2.1 Level AA referenziert. Konkret bedeutet das: Ihre Website muss für Menschen mit Seh-, Hör-, motorischen und kognitiven Einschränkungen nutzbar sein — nicht „im Prinzip”, sondern nachprüfbar.
Der Gesetzestext formuliert es in §3 Abs. 1: „Digitale Produkte und Dienstleistungen sind so zu gestalten, dass sie von Menschen mit Behinderungen in der allgemein üblichen Weise genutzt werden können.” Was „allgemein üblich” heißt, definieren die 50+ WCAG-Kriterien im Detail.
Welche Unternehmen sind vom BFSG betroffen?
Nicht jede Website in Deutschland ist betroffen. Die BFSG-Pflicht gilt für gewerbliche Anbieter — also Unternehmen, die Produkte oder Dienstleistungen an Verbraucher verkaufen. Die genauen Schwellenwerte orientieren sich am EU-Recht: Unternehmen mit mehr als 10 Beschäftigten oder einem Jahresumsatz über 2 Millionen Euro sind verpflichtet.
Kleinstunternehmen unter beiden Schwellen sind nur dann betroffen, wenn sie eine „wesentliche Änderung” an ihrer Website vornehmen — also ein Redesign, einen Relaunch oder den Aufbau eines neuen Online-Shops. Eine reine Textkorrektur zählt nicht.
Wie bauen Sie eine BFSG-konforme Website — Schritt für Schritt
- Kontraste prüfen: Jeder Text braucht mindestens 4,5:1 Kontrast zum Hintergrund (3:1 ab 18 px bzw. 14 px bold). Nutzen Sie den mekyn-Kontrastrechner oder Tools wie WebAIM Contrast Checker.
- Headings hierarchisch: Eine
<h1>pro Seite, dann<h2>,<h3>— niemals überspringen. Screenreader navigieren primär über Headings. - Tastatur-Navigation: Alle interaktiven Elemente (Links, Buttons, Formulare, Menüs) müssen per Tab-Taste erreichbar und per Enter/Space aktivierbar sein. Testen Sie, indem Sie die Maus weglegen.
- Alt-Texte für Bilder: Jedes inhaltliche Bild braucht ein beschreibendes
alt-Attribut. Dekorative Bilder erhaltenalt=""— das ist nicht optional. - Formulare labeln: Jedes
<input>braucht ein<label for="...">oder einaria-label. Placeholder-Text allein genügt nicht — er verschwindet bei der Eingabe. - Focus-Indikatoren sichtbar: Der Browser-Default-Outline ist oft unsichtbar. Setzen Sie einen klaren
:focus-visible-Stil mit mindestens 3:1 Kontrast. aria-hidden+inert: Wenn Sie Elemente visuell ausblenden (Mobile Menu, Carousel), setzen Sie beides — sonst bleiben sie in der Tab-Reihenfolge und verwirren Screenreader-Nutzer.prefers-reduced-motionrespektieren: Nutzer mit vestibulären Störungen benötigen reduzierte Animationen. Setzen Sie@media (prefers-reduced-motion: reduce)und reduzieren Sie auf ≤ 0,01 ms.
Welche technischen Mittel helfen bei der Umsetzung?
Moderne Web-Frameworks bieten viele BFSG-Hilfen von Haus aus. Astro beispielsweise erzeugt semantisches HTML ohne JavaScript-Overhead. Tailwind CSS liefert Kontrast-Farben über die Token-Config. Wichtig ist, dass Sie Accessibility nicht als nachträglichen „Audit-Fix” behandeln, sondern als Design-Constraint von Anfang an.
Bei mekyn ist Barrierefreiheit im Generator verankert: Jede generierte Site erfüllt WCAG 2.1 AA automatisch — korrekte Headings, Kontraste, Alt-Texte, Labels. Das ist kein Feature, sondern Default.
Was kostet BFSG-Konformität?
Für eine neue, schlank aufgebaute Site sind die Mehrkosten minimal: Kontrastprüfung und Alt-Texte erfordern keine zusätzliche Infrastruktur, nur Disziplin. Bei bestehenden WordPress-Sites mit 30 Plugins kann der Aufwand höher sein — hier muss oft das Theme getauscht oder nachgerüstet werden.
Die Alternative ist teurer: Bußgelder bis 100.000 Euro plus Abmahnkosten. Wer jetzt eine neue Website plant, sollte BFSG als Pflichtanforderung ins Briefing schreiben — nicht als „nice-to-have für später”.
BFSG-Quickcheck — 5 Tests in 10 Minuten
- Tab-Test: Können Sie die gesamte Seite nur mit Tab, Enter und Esc navigieren?
- Kontrast-Test: Prüfen Sie drei zufällige Textstellen mit einem Contrast-Checker — alle ≥ 4,5:1?
- Screenreader-Test: Aktivieren Sie VoiceOver (Mac) oder NVDA (Windows) — liest er die Seite sinnvoll vor?
- Zoom-Test: Zoomen Sie auf 200 % — bleibt die Seite bedienbar ohne horizontales Scrollen?
- Formular-Test: Hat jedes Formularfeld ein sichtbares Label, nicht nur einen Placeholder?
Weiterführend auf mekyn.com
→ Zur Pillar-Page: Barrierefreiheit → Verwandt: BFSG erklärt → Verwandt: BFSG-Checkliste 2026 → Tool: Kontrastrechner
Mehr zu diesem Thema:
Zum Barrierefreiheit-HubKeine Kreditkarte · 14 Tage testen · Anti-Lock-In