Technik 10 Min. Lesezeit

Barrierefreies Webdesign 2026: Pflicht für Selbstständige?

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz. Klingt nach Behörde, betrifft aber konkret deine Website. Wer muss was, ab wann? Und was passiert, wenn du es ignorierst?

Symbolbild Barrierefreiheit im Webdesign

Was ist das BFSG eigentlich?

Das Barrierefreiheitsstärkungsgesetz, kurz BFSG, ist die deutsche Umsetzung des European Accessibility Act. Es soll dafür sorgen, dass digitale Produkte und Dienstleistungen für Menschen mit Behinderung nutzbar sind. Seit dem 28. Juni 2025 ist es gültig. Keine Übergangsfrist mehr. Keine Schonzeit.

Im Kern bedeutet das: Websites und Apps, die unter das Gesetz fallen, müssen die internationalen Standards der WCAG 2.2 auf Level AA erfüllen. Das ist keine deutsche Erfindung, sondern der weltweit anerkannte Maßstab für digitale Zugänglichkeit.

Klingt technisch. Ist es auch. Aber die Auswirkungen sind sehr praktisch.

Wer ist betroffen, wer nicht

Die wichtigste Frage zuerst: Betrifft mich das überhaupt?

Klar betroffen:

  • Online-Shops jeder Größe (außer Kleinstunternehmen, siehe unten)
  • Banking- und Zahlungsdienste
  • Buchungsportale (Reisen, Tickets, Termine)
  • Anbieter von E-Books und digitalen Lesemedien
  • Telekommunikationsdienste

Nicht direkt betroffen (Stand 2026):

  • Reine Informationswebsites (z. B. der klassische Friseur-Auftritt mit Kontaktformular)
  • Kleinstunternehmen mit unter 10 Mitarbeitern und unter 2 Mio. Euro Jahresumsatz. Aber nur, wenn sie keine B2C-Dienstleistung digital anbieten
  • B2B-Angebote (Verkauf ausschließlich an Gewerbetreibende)

Die Grauzone: Sobald du einen Termin online kostenpflichtig buchst (Coaching-Stunde, Workshop), einen digitalen Service anbietest (Online-Beratung, Mitgliederbereich) oder über deine Website verkaufst (auch nur ein E-Book), wird’s eng. Im Zweifel: Anwalt fragen, nicht Bauchgefühl.

Und unabhängig von der rechtlichen Pflicht: In Deutschland leben rund 8 Millionen Menschen mit Behinderung. Das sind potenzielle Kunden. Eine nicht zugängliche Website schließt sie aus. Auch das ist eine Entscheidung.

Die wichtigsten Anforderungen, ohne Paragrafen

Was bedeutet WCAG 2.2 AA in der Praxis? Das hier:

1. Kontraste müssen sitzen. Hellgrauer Text auf weißem Hintergrund ist schön, aber nicht erlaubt. Mindestens 4,5:1 zwischen Text und Hintergrund. Tools wie der WebAIM Contrast Checker prüfen das in Sekunden.

2. Alles muss mit der Tastatur bedienbar sein. Wer keine Maus benutzen kann, navigiert mit Tab und Enter. Jeder Button, jedes Menü, jedes Formular muss so erreichbar sein. Inklusive sichtbarem Fokus-Indikator.

3. Bilder brauchen Alt-Texte. Damit Screenreader vorlesen können, was zu sehen ist. Nicht „Bild123.jpg“, sondern „Friseur schneidet einer Kundin die Haare im Salon“.

4. Klare Struktur durch Überschriften. H1 einmal pro Seite, dann H2, dann H3. Nicht weil’s ordentlich ist, sondern weil Screenreader so durch die Seite springen.

5. Formulare müssen sprechen. Jedes Eingabefeld braucht ein Label, Fehlermeldungen müssen vorlesbar sein, Pflichtfelder erkennbar.

6. Keine Auto-Play-Videos mit Ton. Wer es trotzdem will: Pause-Button muss sofort erreichbar sein.

7. Animationen abschaltbar. Wer auf bewegte Inhalte empfindlich reagiert, muss eine Wahl haben. Im CSS gehört prefers-reduced-motion respektiert.

Das sind die großen Brocken. Insgesamt umfasst WCAG 2.2 AA rund 55 Erfolgskriterien. Aber wer die sieben oben sauber umsetzt, hat 80 Prozent abgedeckt.

Warum Overlay-Widgets Blödsinn sind

Es gibt Anbieter, die behaupten: „Einfach unser Skript einbauen, und deine Seite ist barrierefrei.“ Klingt verlockend. Ist aber gefährlich falsch.

Tools wie UserWay, AccessiBe oder EqualWeb überlagern deine Seite mit einem Widget, das Schrift vergrößert, Kontraste umkehrt und vermeintlich Screenreader-Unterstützung bietet. In der Praxis bestehen die meisten dieser Overlays WCAG-Tests nicht. Schlimmer: Sie blockieren teilweise echte Hilfstechnologien, die Nutzer ohnehin schon einsetzen.

In den USA gab es 2023 und 2024 hunderte Abmahnungen gegen Seiten mit Overlay-Tools. In Deutschland werden ähnliche Fälle bereits geführt. Wer Overlays einsetzt, kauft sich nicht Sicherheit, sondern verschiebt ein Risiko und trägt monatliche Kosten von 30 bis 500 Euro.

Es gibt nur einen Weg zu echter Barrierefreiheit: Im Code. Von Anfang an. Handgemacht.

„Barrierefrei sieht doch immer langweilig aus“

Vorurteil. Schau dir die Websites von Apple, Microsoft, BBC, Stripe oder GOV.UK an. Alle barrierefrei. Alle gut.

Gute Barrierefreiheit zwingt zu Dingen, die ohnehin gutes Design ausmachen:

  • Ehrliche Kontraste statt grauer Pastell-Tristesse
  • Klare Hierarchie statt zugemüllter Layouts
  • Lesbare Schriftgrößen statt 11 px Schönschrift
  • Sinnvolle Animationen statt Effekt-Feuerwerk
  • Strukturierter Code statt Div-Suppe

Wenn dein Designer behauptet, Barrierefreiheit verhindert ein gutes Design, hat er keinen Plan von Design. So einfach.

Was kostet eine barrierefreie Website?

Wenn von Anfang an mitgedacht: kaum Mehrkosten. Wir bauen unsere Websites grundsätzlich barrierefrei. Das ist Handwerk, kein Add-on. Du zahlst nicht extra für ein semantisch sauberes <button>-Element, das auch mit der Tastatur funktioniert.

Wenn nachträglich umgebaut: Aufpreis 30 bis 60 Prozent. Weil viele Entscheidungen tief in Markup, Komponenten und CSS sitzen. Eine Slideshow ohne Pause-Button lässt sich nicht durch ein Häkchen reparieren. Sie muss neu gebaut werden.

Wenn extern auditiert: Ein professionelles Accessibility-Audit kostet zwischen 800 und 2.500 Euro. Das lohnt sich, wenn du im rechtlichen Risiko stehst oder öffentlich nachweisen musst, dass du WCAG 2.2 AA erfüllst.

Bei KindPixel ist Barrierefreiheit auf Level WCAG 2.2 AA in jedem Paket enthalten. Egal ob Starter, Business oder Individuell. Mehr zu den Paketpreisen findest du hier.

Was du jetzt tun solltest

Drei Schritte. In dieser Reihenfolge.

Schritt 1: Prüf, ob du betroffen bist. Bist du Kleinstunternehmer mit reiner Informationswebsite, kannst du erst mal durchatmen. Bietest du irgendetwas digital an, was Geld kostet, auch indirekt über Termine, Buchungen oder Online-Beratung, sprich mit jemandem, der sich auskennt.

Schritt 2: Mach einen ehrlichen Schnelltest. Öffne deine Website. Navigiere ausschließlich mit der Tab-Taste durch die Seite. Prüf, ob du jeden Link, jeden Button, jedes Formularfeld erreichst und siehst, wo du gerade bist. Wenn nicht, hast du ein Problem.

Schritt 3: Plan die Umsetzung. Nicht hektisch nachrüsten, sondern bei der nächsten größeren Überarbeitung mitdenken. Bei einem kompletten Relaunch ist Barrierefreiheit fast geschenkt. Bei einer 8 Jahre alten Wordpress-Seite mit 14 Plugins manchmal nicht mehr machbar. Dann lieber neu bauen als flicken.

Und vergiss die Overlays. Wirklich.

Häufig gestellte Fragen zum BFSG

Bin ich als Friseur, Kosmetikstudio oder Handwerker vom BFSG betroffen?

In der Regel nein. Das BFSG gilt für digitale Dienstleistungen und E-Commerce-Angebote, die online verkauft werden. Eine reine Informationswebsite mit Kontaktformular fällt aktuell nicht darunter. Sobald du aber online verkaufst, Termine kostenpflichtig buchst oder Online-Beratung anbietest, kann das anders aussehen.

Was passiert, wenn meine Website nicht barrierefrei ist?

Wenn du unter das BFSG fällst und die Anforderungen nicht erfüllst, drohen Abmahnungen, Bußgelder bis zu 100.000 Euro und im Extremfall ein Vertriebsverbot. Außerdem schließt du etwa 8 Millionen Menschen in Deutschland mit Behinderung von deiner Seite aus.

Was kostet eine barrierefreie Website mehr?

Wenn von Anfang an mitgedacht: kaum Mehrkosten. Wenn nachträglich umgebaut: 30 bis 60 Prozent Aufpreis auf die ursprüngliche Entwicklung. Deshalb lohnt es sich, das Thema beim Erstgespräch direkt anzusprechen.

Macht barrierefreies Design die Website hässlich?

Nein. Apple, Microsoft und die BBC zeigen das Gegenteil. Gute Barrierefreiheit zwingt zu klarer Hierarchie, ehrlichen Kontrasten und sauberer Typografie. Das sind dieselben Qualitäten, die auch ein gutes Design ausmachen. Schlechtes Design ist nicht zugänglich. Gutes meistens schon.

Reicht ein Overlay-Tool wie UserWay oder AccessiBe?

Nein. Diese Widgets versprechen Barrierefreiheit per Knopfdruck, liefern sie aber nicht. Sie bestehen WCAG-Tests in den meisten Fällen nicht, blockieren teilweise sogar Screenreader und werden in den USA bereits aktiv abgemahnt. Echte Barrierefreiheit entsteht im Code, nicht durch ein nachträgliches Skript.

Bereit loszulegen?

Du hast genug gelesen.
Lass uns über deine Website reden.

Kostenloses Erstgespräch, keine Verpflichtung. Wir bauen ohnehin barrierefrei. Auch wenn du nicht musst.

Erstgespräch buchen