Barrierefreies Webdesign · WCAG 2.2 · BFSG

Barrierefreie Websites — nutzbar für alle

Barrierefreies Webdesign von Anfang an: Wir planen und bauen Ihre Website so, dass Tastatur, Screenreader und Kontraste funktionieren — orientiert an WCAG 2.2, konform zu den BFSG-Anforderungen und abgestimmt auf Ihre Zielgruppe.

Herausforderung

Schlechte Kontraste, fehlende Fokuszustände und unklare Formularfehler schließen Nutzer aus und erhöhen rechtliche Risiken. Nachträgliche Nachbesserungen sind teurer als saubere Planung.

Unsere Lösung

Wir prüfen Informationsarchitektur, Komponenten und Templates, testen mit gängigen Hilfsmitteln und dokumentieren die Umsetzung. Bei Bedarf begleiten wir Sie durch Audits mit Dritten.

Ablauf

1

Scope & Niveau

Welche Seiten und welches Konformitätsziel (z. B. AA)?

2

Design-Review

Farben, Typografie, Abstände und Komponentenzustände.

3

Umsetzung & Tests

Technik, ARIA wo nötig, Tastaturpfade, Fehlermeldungen.

4

Übergabe

Redaktionshinweise, damit neue Inhalte barrierefrei bleiben.

Leistungen & Umfang

Wahrnehmbarkeit

Textalternativen, Untertitel-Konzepte, ausreichende Kontraste.

Bedienbarkeit

Fokus sichtbar, keine Fallen für Tastaturnutzer, ausreichend große Klickflächen.

Verständlichkeit

Klare Beschriftungen, konsistente Navigation, Hilfe bei Formularen.

Robustheit

Semantisches HTML, valide Patterns, kompatibel mit assistiven Technologien.

Dokumentation

Nachvollziehbare Umsetzung für interne und externe Prüfungen.

Schulung

Kurze Guidelines für Ihr Team bei CMS-Pflege.

Wartung, SEO und Sicherheit

Regelmäßige Updates und Monitoring verhindern, dass technische Schulden Ihr Ranking und Ihre Conversion kosten. Zu Wartung & Support

Barrierefreies Webdesign: Pflicht seit Juni 2025 — Fristen und Ausnahmen

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es verpflichtet Unternehmen, bestimmte digitale Dienstleistungen für Verbraucher barrierefrei anzubieten — praktisch relevant vor allem dort, wo über die Website Verträge zustande kommen: Online-Shops, Terminbuchungen, Buchungsstrecken, Online-Banking. Barrierefreies Webdesign ist damit für viele Unternehmen von der Kür zur Pflicht geworden.

Die wichtigsten Eckpunkte: Für Kleinstunternehmen (weniger als 10 Mitarbeitende und höchstens 2 Millionen Euro Jahresumsatz) gilt bei Dienstleistungen eine Ausnahme. Für Selbstbedienungsterminals und bestimmte Bestandsverträge existieren Übergangsfristen bis 2030. Reine B2B-Websites und Informationsseiten ohne Bestellfunktion sind meist nicht direkt erfasst — profitieren aber trotzdem messbar, weil barrierefreie Seiten besser lesbar, mobil nutzbarer und technisch sauberer sind. Die vollständige rechtliche Einordnung mit Selbsttest finden Sie in unserem Ratgeber BFSG-Pflichten einfach erklärt.

Bußgelder und Abmahnrisiko: was Verstöße kosten

Die Marktüberwachungsbehörden der Länder kontrollieren die Einhaltung des BFSG. Bei Verstößen können sie Nachbesserung anordnen, Fristen setzen und im Ernstfall die Dienstleistung untersagen; Bußgelder sind je nach Verstoß mit bis zu 100.000 Euro bewehrt. Dazu kommt das wettbewerbsrechtliche Risiko: Ob Mitbewerber und Verbände Verstöße abmahnen können, ist juristisch noch nicht abschließend geklärt — die ersten Abmahnwellen nach Inkrafttreten haben aber gezeigt, dass das Risiko real ist.

Die teuerste Variante ist trotzdem eine andere: unter Zeitdruck nachrüsten zu müssen. Wer erst nach einer Behördenanfrage oder Abmahnung handelt, zahlt für die Eile — und verliert währenddessen genau die Kundengruppe, um die es geht: Rund jeder zehnte Mensch in Deutschland lebt mit einer Schwerbehinderung, dazu kommen altersbedingte Einschränkungen bei einer alternden Kundschaft. Barrierefreiheit ist deshalb kein reines Compliance-Thema, sondern erschließt Reichweite.

WCAG 2.2 AA: die 10 wichtigsten Anforderungen in Klartext

Die Web Content Accessibility Guidelines klingen nach Normprosa, laufen aber auf konkrete, prüfbare Anforderungen hinaus. Diese zehn Punkte decken die häufigsten Praxisfälle einer Unternehmenswebsite ab — dieselben Punkte, die wir im Audit prüfen:

  • 1. Kontrast mindestens 4,5:1Fließtext muss sich deutlich vom Hintergrund abheben — hellgrauer Text auf Weiß fällt durch. Für großen Text gilt 3:1.
  • 2. Alles per Tastatur bedienbarNavigation, Formulare, Buttons und Overlays müssen ohne Maus erreichbar und bedienbar sein — ohne dass der Fokus irgendwo hängen bleibt.
  • 3. Fokus sichtbarBeim Durch-Tabben muss jederzeit erkennbar sein, welches Element gerade aktiv ist — ein klar sichtbarer Fokusrahmen, der nicht verdeckt wird.
  • 4. Alt-Texte für informative BilderBilder mit Aussage brauchen eine Textalternative für Screenreader; dekorative Bilder werden explizit als solche markiert.
  • 5. Formulare mit Labels und klaren FehlermeldungenJedes Feld hat eine zugeordnete Beschriftung; Fehlermeldungen sagen konkret, was falsch ist und wie es richtig geht.
  • 6. Zoom auf 200 % ohne BruchBei doppelter Vergrößerung bleibt alles lesbar und bedienbar — ohne horizontales Scrollen und abgeschnittene Inhalte.
  • 7. Klickflächen groß genugInteraktive Ziele brauchen ausreichend Fläche (Richtwert 24 × 24 Pixel) — winzige Icon-Buttons sind ein klassischer Prüfpunkt der WCAG 2.2.
  • 8. Konsistente Navigation und StrukturMenüs an gleicher Stelle, saubere Überschriften-Hierarchie (H1–H3), logische Lesereihenfolge im Code.
  • 9. Untertitel und Alternativen für MedienVideos mit gesprochenem Inhalt brauchen Untertitel; rein automatisch abspielende Medien mit Ton sind zu vermeiden.
  • 10. Verständliche Sprache und Bewegungs-ZurückhaltungKurze Sätze, keine unnötigen Fachbegriffe — und Animationen respektieren die Systemeinstellung „reduzierte Bewegung".

Barrierefreie Website: Beispiele

Wie sieht eine barrierefreie Website konkret aus? Am besten an echten Mustern. Diese Website hier ist nach den Prinzipien gebaut, auf die es ankommt: strukturierte Inhalte mit sauberer Überschriften-Hierarchie, tastaturbedienbare Navigation, ausreichende Kontraste und Screenreader-taugliche Semantik. Sie können die Punkte aus der Checkliste oben direkt daran ausprobieren.

Typische Muster, an denen Sie gute Umsetzungen auch bei anderen erkennen: Ein Klick auf die Tab-Taste zeigt sofort einen sichtbaren Fokusrahmen. Formulare erklären Fehler in Worten statt nur mit rotem Rand. Der Kontrast bleibt auch bei Badges und Buttons hoch. Die Seite funktioniert bei 200-%-Zoom ohne seitliches Scrollen. Und es gibt keine „Barrierefreiheits-Widgets" — denn wer sauber baut, braucht kein Overlay, das Mängel kaschiert.

Checkliste als PDF herunterladen

Für die Prüfung Ihrer eigenen Website haben wir die zehn WCAG-Anforderungen als kompakte Barrierefreiheit-Checkliste aufbereitet — zum Ausdrucken, Abhaken und Weitergeben an Ihre Agentur oder IT: Barrierefreiheit-Checkliste als PDF herunterladen (kostenlos, kein Formular, keine E-Mail-Adresse nötig).

Die Checkliste enthält zusätzlich die BFSG-Eckdaten — wer betroffen ist, welche Fristen gelten — und zu jedem Prüfpunkt einen Hinweis, wie Sie ihn ohne Spezialwerkzeug selbst testen. Wenn dabei mehr rote Kreuze als Haken herauskommen, wissen Sie, wo Sie stehen — und genau dafür gibt es das Audit.

Was kostet eine barrierefreie Website? Nachrüsten vs. von Anfang an

Die ehrliche Antwort vorweg: Barrierefreiheit von Anfang an mitzubauen ist deutlich günstiger, als sie nachzurüsten. Im Neuprojekt bedeutet sie vor allem saubere Arbeit — semantisches HTML, durchdachte Kontraste, getestete Formulare — und schlägt mit etwa 10 bis 15 Prozent Aufpreis auf den Projektpreis zu Buche. Beim Nachrüsten dagegen muss Bestehendes analysiert, umgebaut und erneut getestet werden; je nach Zustand des Codes kostet dieselbe Barrierefreiheit dann ein Mehrfaches.

Richtwerte netto zzgl. USt. — den konkreten Festpreis nennen wir nach kurzem Blick auf Ihre Website.

LeistungPreisrahmen (netto)Was Sie bekommen
Barrierefreiheits-Audit490 – 1.490 € einmaligPrüfung nach WCAG 2.2 AA (automatisiert + manuell), priorisierte Mängelliste, Besprechung — Umfang nach Seitenzahl
Nachrüstung bestehende Website1.500 – 5.000 €Umsetzung der priorisierten Fixes für eine typische KMU-Website: Kontraste, Fokus, Formulare, Struktur, Alt-Texte
Barrierefreiheit im Neuprojektca. +10–15 % auf den ProjektpreisWCAG-2.2-orientierte Umsetzung von Anfang an, dokumentiert und auditierbar — der wirtschaftlichste Weg

Preise & Abrechnung

Audit und Remediation quotieren wir getrennt oder als Gesamtpaket — abhängig von Seitenanzahl und CMS. Die Richtwerte stehen oben in der Kostentabelle; nach dem Erstgespräch erhalten Sie einen Festpreis.

Projekt anfragen

Referenzen

Projekte mit Fokus auf Accessibility zeigen wir im Gespräch und im Portfolio-Auszug.

Zum Portfolio

Häufige Fragen

Nein. Wir liefern technische Umsetzung und Best-Practice-Einordnung — verbindliche Rechtsfragen klären Sie mit Fachanwälten.

Gängiges Zielniveau für viele barrierefreie Webangebote — wir orientieren uns daran und dokumentieren den Stand.

Automatisierte Tests plus manuelle Prüfung — wir kombinieren beides und priorisieren nutzerrelevante Mängel.

Das hängt vom Umfang der bestehenden Website ab. Kleinere Anpassungen wie Kontraste und Fokuszustände sind schnell umgesetzt. Bei komplexen Formularen oder Multimedia kann ein stufenweiser Ansatz sinnvoll sein.

Ja. Wir erstellen praxisnahe Guidelines und schulen Ihr Team, damit neue Inhalte von Anfang an barrierefrei eingepflegt werden — ohne technisches Spezialwissen.

Direkt verpflichtet sind vor allem Websites, über die Verbraucher Verträge abschließen können — Shops, Buchungs- und Bestellstrecken. Reine Informationsseiten und B2B-Angebote sind meist nicht erfasst, und für Kleinstunternehmen (unter 10 Mitarbeitende, höchstens 2 Mio. € Umsatz) gilt bei Dienstleistungen eine Ausnahme. Verbindlich klärt das eine rechtliche Prüfung; die technische Antwort ist einfacher: Barrierefreiheit lohnt sich auch ohne Pflicht.

Ein standardisiertes Dokument auf der Website, das den Stand der Barrierefreiheit beschreibt und eine Kontaktmöglichkeit für Barrieren-Meldungen nennt. Öffentliche Stellen sind dazu seit Jahren verpflichtet; für BFSG-pflichtige Unternehmen gehören entsprechende Informationen ebenfalls zum Pflichtprogramm. Was hineingehört und wie sie aufgebaut wird — inklusive Mustertext zum Kopieren — zeigt unser Ratgeber zur Barrierefreiheitserklärung.

Nein. Overlays blenden nachträglich Kontrast- und Vorlese-Funktionen ein, beheben aber die strukturellen Probleme im Code nicht — fehlende Labels, Tastaturfallen, unsaubere Semantik bleiben bestehen. Sie gelten überwiegend nicht als Erfüllung der WCAG-Kriterien. Nachhaltiger und belastbarer ist die Umsetzung direkt im Code.

Nächster Schritt

Kostenloses Erstgespräch — wir melden uns in der Regel innerhalb von 24 Stunden persönlich bei Ihnen.

Ein fester Ansprechpartner · klare nächste Schritte

Siegel: Ausgezeichnet als KI Innovator vom Deutschen Innovationsinstitut (diind), gültig bis 08/2027