BFSG · WCAG 2.1 AA · Seit 28.06.2025
Webseiten, die jeder benutzen kann.
Wir bauen Webseiten, die den WCAG 2.1 AA Standard erfüllen, BFSG-konform sind und trotzdem modern aussehen. Zum Beispiel diese hier.
Warum Barrierefreiheit jetzt zählt
Barrierefreiheit ist kein Nice-to-Have. Sie ist die Grundlage.
Jeder Mensch soll ihre Webseite nutzen können — unabhängig von Seh-, Hör-, Motorik- oder kognitiver Einschränkung. Das ist kein Luxus. Das ist Handwerk.
Menschen mit Beeinträchtigung in Deutschland
Statistisches Bundesamt
BFSG ist in Kraft. Ausreden: keine.
Bundesgesetzblatt
aller Top-1M-Websites haben WCAG-Fehler
WebAIM Million 2024
01 — Struktur, die Maschinen verstehen
Semantisches HTML
Screenreader, Suchmaschinen und Assistenztechnologien navigieren über Landmarks und Überschriften. Ohne saubere Struktur bleibt alles nur ein Klumpen div.
- Landmark-Elemente: header, nav, main, article, aside, footer
- Eindeutige Heading-Hierarchie ohne Sprünge
- ARIA nur dort, wo HTML nicht ausreicht
- Listen, Tabellen und Formulare mit nativen Elementen
02 — Jede Funktion ohne Maus
Keyboard-Navigation
Rund 15 % aller Nutzer navigieren ohne Maus — motorisch eingeschränkt, per Screenreader oder schlicht am Laptop unterwegs. Jede Interaktion muss mit Tab, Enter und Leertaste funktionieren.
- Logische Tab-Reihenfolge entlang des Leseflusses
- Sichtbare Focus-Indikatoren (kein outline:none)
- Skip-Links für schnelle Navigation
- Keine Keyboard-Traps in Modals und Dropdowns
03 — Lesbar für alle Augen
Ausreichende Kontraste
Mindestens 4,5:1 für normalen Text, 3:1 für große Schrift und grafische Elemente. Im Light- und im Dark-Mode. Im Sonnenlicht wie im Flugzeug.
- 4,5:1 Mindest-Kontrast Body-Text
- 3:1 für Headlines ≥ 24 px und Icons
- Getestet in Light- und Dark-Mode
- Kontrast auch bei Hover- und Focus-Zuständen
04 — Bilder, die man hören kann
Alternative Texte
Screenreader lesen alt-Attribute vor. Ein gutes Alt beschreibt, was zu sehen ist — nicht das Dateiformat. Dekorative Bilder bekommen ein leeres alt="" und verschwinden aus der Vorlesen-Spur.
- Beschreibende Alt-Texte für Inhaltsbilder
- Leeres alt="" für rein dekorative Grafiken
- Komplexe Grafiken mit Langbeschreibung
- Icons mit aria-label oder sr-only-Text
alt="Astronaut im Raumanzug schwebt"
05 — Von 320 px bis 4K
Responsive & zoombar
Über 60 % der Besucher sind mobil. Viele zoomen zudem den Text. Die Seite muss bis 200 % Zoom ohne horizontales Scrollen funktionieren — auf jedem Viewport.
- Mobile-First-Layout ab 320 px
- Volle Funktion bei 200 % Zoom
- Relative Einheiten (rem, em, %) statt fester Pixel
- Keine Inhalte hinter horizontalem Scroll
06 — Fehler, die man versteht
Formulare mit Klarheit
Formulare sind der Conversion-Flaschenhals. Ohne verbundene Labels, klare Fehler und aria-Attribute werden sie für viele unbedienbar — und verlieren bares Geld.
- Label per for/id fest mit jedem Feld verbunden
- Fehlermeldungen via aria-describedby + aria-invalid
- Erforderliche Felder mit required und sichtbarem Hinweis
- Autocomplete-Attribute für schnelleres Ausfüllen
07 — Animationen mit Respekt
Reduced Motion
Menschen mit vestibulären Störungen reagieren auf starke Bewegungen mit Übelkeit. Wer das System-Setting „Bewegung reduzieren“ aktiviert hat, bekommt bei uns eine statische Seite — ohne Funktionsverlust.
- prefers-reduced-motion: reduce wird respektiert
- Keine auto-playenden Parallax- oder Scroll-Effekte
- Statische Alternativen für bewegte Inhalte
- Animationen unter 5 Sekunden oder pausierbar
Probier's aus — das ist das gleiche Prinzip wie prefers-reduced-motion.
08 — Niemals nur Farbe
Farb-unabhängig
Rund 9 % aller Männer haben eine Farbfehlsichtigkeit. Informationen dürfen nie ausschließlich über Farbe kommuniziert werden — immer zusätzlich über Icon, Text oder Muster.
- Status-Indikatoren mit Icon + Text + Farbe
- Fehler nicht nur rot, sondern mit Symbol
- Diagramme mit Schraffuren oder Beschriftung
- Getestet mit Farbfehlsichtigkeits-Simulator
- Server A
- Server B
- Server C
- Server A Offline
- Server B Warnung
- Server C OK
Klick probiert Rot-Grün-Schwäche — links verschmelzen die Farben, rechts bleibt alles lesbar.
Schnelltest
Wie barrierefrei ist Ihre Webseite?
Beantworten Sie 8 Fragen ehrlich. Am Ende wissen Sie, wo Sie stehen.
Unser Vorgehen
Vier Schritte zur konformen Webseite.
- 01
Audit
Automatisierte Tests (axe, Lighthouse) + manuelle Keyboard- und Screenreader-Prüfung. Ergebnis: strukturierter Report mit allen Fundstellen.
- 02
Priorisierung
Wir gewichten nach Impact und Aufwand, gruppieren nach Komponenten und geben Ihnen einen realistischen Maßnahmenplan inklusive Aufwandsschätzung.
- 03
Umsetzung
Barrierefreiheit wird in Sprints abgearbeitet. Sie sehen den Fortschritt Sprint für Sprint — ohne monatelange Blackbox.
- 04
Verifikation
Abschlusstest mit allen Tools plus manuelle Kontrolle. Zum Schluss liefern wir die Erklärung zur Barrierefreiheit für Ihre Webseite.
Die Zahlen
Fakten, die keine Diskussion zulassen.
Menschen mit anerkannter Behinderung in Deutschland
≈ 16 % der Bevölkerung
BFSG gültig — keine Übergangsfrist mehr
Bundesgesetzblatt I Nr. 28
aller Top-1M-Websites mit WCAG-Verstößen
WebAIM Million Report 2024
mögliches Bußgeld bei BFSG-Verstößen
§ 37 BFSG
BFSG & Barrierefreiheit — Häufige Fragen
Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28.06.2025 und verpflichtet Unternehmen im B2C-Bereich, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten. Betroffen sind insbesondere Online-Shops, Buchungssysteme, Banken-Apps, Streaming-Dienste und andere Dienstleistungen für Endverbraucher.
Reine B2B-Angebote sind vom BFSG ausgenommen. Sobald eine Webseite jedoch auch an Endverbraucher verkauft oder diese als Zielgruppe adressiert, fällt sie unter das Gesetz. Im Zweifel prüfen wir das gerne gemeinsam mit Ihnen.
Verstöße gegen das BFSG können mit Bußgeldern von bis zu 100.000 € geahndet werden. Im Extremfall kann die Marktüberwachungsbehörde die Einstellung des Angebots anordnen. Zusätzlich drohen Abmahnungen und Reputationsschäden.
WCAG 2.1 AA ist der weltweit anerkannte Standard für barrierefreie Webseiten und die Basis für das BFSG. AAA stellt noch strengere Anforderungen (z. B. Kontrast 7:1 statt 4,5:1), ist aber oft nicht für ganze Seiten umsetzbar. Wir zielen standardmäßig auf AA — punktuell auf AAA, wo sinnvoll.
Wir prüfen Ihre Webseite in vier Schritten: automatisierte Tests mit axe DevTools und Lighthouse, manuelle Keyboard- und Screenreader-Tests, Kontrast- und Zoom-Analyse sowie eine priorisierte Maßnahmenliste. Das Ergebnis erhalten Sie als PDF-Report mit konkreten Handlungsempfehlungen.
Für unter das BFSG fallende Angebote ist eine öffentlich zugängliche Erklärung zur Barrierefreiheit Pflicht. Sie dokumentiert den Stand der Umsetzung, bekannte Einschränkungen und einen Feedback-Kanal. Wir liefern die Erklärung als Bestandteil unserer Audits.
Wenn Barrierefreiheit von Anfang an mitgedacht wird, entstehen kaum Mehrkosten — sie ist Teil sauberen Handwerks. Teuer wird es erst, wenn man nachträglich reparieren muss. Deshalb bauen wir seit Jahren alle unsere Webseiten standardmäßig WCAG 2.1 AA-konform.
Ja. Wir führen ein Audit durch, priorisieren die Fundstellen nach Impact und Aufwand und setzen sie in Sprints um. Bei stark veralteten Seiten ist ein kompletter Relaunch oft günstiger als das Nachrüsten — das ergibt sich aus dem Audit.
Webseite barrierefrei machen?
Wir prüfen Ihre Webseite und erstellen einen priorisierten Maßnahmenplan — kostenlos und unverbindlich.
Kostenloses Audit anfragen