Barrierefreie Website: WCAG & Accessibility

07.11.2025 Tim Bauer Webdesign 13 Min. Lesezeit

Barrierefreie Website: Warum Accessibility 2025 Pflicht wird

Ab Juni 2025 müssen viele Websites barrierefrei sein – das Barrierefreiheitsstärkungsgesetz (BFSG) macht ernst. Aber Barrierefreiheit ist nicht nur Pflicht, sondern auch Chance: Du erreichst mehr Menschen und verbesserst nebenbei dein SEO. In diesem Guide erfährst du, was auf dich zukommt und wie du deine Website zugänglich machst.

Warum Barrierefreiheit wichtig ist

Die Zahlen:

  • 7,8 Millionen schwerbehinderte Menschen in Deutschland
  • 15-20% der Bevölkerung haben eine Form von Einschränkung
  • 100% der Menschen profitieren von guter Zugänglichkeit

Es betrifft mehr als du denkst:

  • Sehbehinderungen: Blindheit, Farbenblindheit, Sehschwäche
  • Hörbehinderungen: Gehörlosigkeit, Schwerhörigkeit
  • Motorische Einschränkungen: Zittern, eingeschränkte Feinmotorik
  • Kognitive Einschränkungen: Leseschwäche, Konzentrationsprobleme
  • Temporäre Einschränkungen: Gebrochener Arm, grelles Sonnenlicht

Das BFSG 2025: Was auf dich zukommt

Wer ist betroffen?

Ab 28. Juni 2025 müssen diese Anbieter barrierefrei sein:

  • Online-Shops (E-Commerce)
  • Banken und Finanzdienstleister
  • Telekommunikationsanbieter
  • Streaming-Dienste
  • E-Book-Anbieter

Ausnahmen:

  • Kleinstunternehmen (unter 10 Mitarbeiter UND unter 2 Mio. € Umsatz)
  • Reine B2B-Angebote ohne Verbraucher-Kontakt
  • Unverhältnismäßiger Aufwand (muss begründet werden)

Konsequenzen bei Verstößen:

  • Abmahnungen durch Verbände
  • Bußgelder bis 100.000€
  • Reputationsschaden

Die WCAG-Richtlinien verstehen

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard. Es gibt drei Stufen:

Stufe A: Mindestanforderungen

  • Textalternativen für Bilder
  • Untertitel für Videos
  • Keine reinen Farbcodes für Informationen
  • Tastatur-Bedienbarkeit

Stufe AA: Standard (vom BFSG gefordert)

  • Ausreichende Farbkontraste (4,5:1)
  • Zoom bis 200% ohne Funktionsverlust
  • Konsistente Navigation
  • Fehlererkennung in Formularen

Stufe AAA: Höchste Anforderungen

  • Gebärdensprache für Videos
  • Höchste Kontrastwerte (7:1)
  • Leichte Sprache

Praktische Barrierefreiheit umsetzen

1. Bilder und Medien

  • Alt-Texte: Beschreibe, was auf dem Bild zu sehen ist
  • Dekorative Bilder: Leerer alt-Text (alt="")
  • Videos: Untertitel und Transkripte
  • Audio: Textversion bereitstellen

2. Farbkontraste

  • Text auf Hintergrund: mindestens 4,5:1
  • Große Schrift (18px+): mindestens 3:1
  • Tool: WebAIM Contrast Checker

3. Tastatur-Navigation

  • Alle Funktionen per Tab erreichbar
  • Sichtbarer Fokus-Indikator
  • Logische Tab-Reihenfolge
  • Keine Tastatur-Fallen

4. Formulare

  • Labels für alle Eingabefelder
  • Klare Fehlermeldungen
  • Eingabehilfen (z.B. Datumsformat zeigen)
  • Ausreichend Zeit zum Ausfüllen

5. Struktur und Semantik

  • Korrekte Überschriften-Hierarchie (H1-H6)
  • Semantische HTML-Elemente (nav, main, footer)
  • Aussagekräftige Link-Texte (nicht "hier klicken")
  • Listen für Aufzählungen

Barrierefreiheit testen

Automatische Tests:

  • WAVE: Kostenloses Browser-Plugin
  • axe DevTools: Detaillierte Analyse
  • Lighthouse: In Chrome integriert

Manuelle Tests:

  • Website nur mit Tastatur bedienen
  • Zoom auf 200% – funktioniert alles?
  • Screenreader testen (VoiceOver, NVDA)
  • Farben in Graustufen anzeigen

FAQ: Häufige Fragen zur Barrierefreiheit

Muss ich als kleines Unternehmen meine Website barrierefrei machen?

Wenn du unter 10 Mitarbeiter und unter 2 Mio. € Umsatz hast, gilt das BFSG nicht für dich. Aber: Barrierefreiheit ist trotzdem sinnvoll – für mehr Kunden und besseres SEO.

Wie teuer ist Barrierefreiheit?

Bei neuen Websites: Kaum Mehrkosten, wenn von Anfang an berücksichtigt. Bei bestehenden Websites: Je nach Umfang 1.000-10.000€ für Anpassungen.

Reicht ein Barrierefreiheits-Plugin?

Nein! Overlay-Plugins, die einen "Barrierefreiheits-Button" hinzufügen, lösen die grundlegenden Probleme nicht. Sie können sogar zusätzliche Barrieren schaffen.

Was ist der Unterschied zwischen Barrierefreiheit und Usability?

Usability = Benutzerfreundlichkeit für alle. Barrierefreiheit = Nutzbarkeit auch für Menschen mit Einschränkungen. Beides überschneidet sich stark.

Hilft Barrierefreiheit bei SEO?

Ja! Alt-Texte, gute Struktur, semantisches HTML, schnelle Ladezeiten – alles, was barrierefrei macht, hilft auch bei Google.

Muss ich eine Barrierefreiheitserklärung haben?

Öffentliche Stellen: Ja. Private Unternehmen unter BFSG: Auch eine Art Erklärung zum Stand der Barrierefreiheit.

Kann ich verklagt werden, wenn meine Website nicht barrierefrei ist?

In Deutschland sind Abmahnungen durch Verbände möglich. In den USA gibt es bereits viele Klagen – der Trend kommt auch nach Europa.

Was ist ARIA?

Accessible Rich Internet Applications – zusätzliche Attribute für HTML, die Screenreadern mehr Kontext geben. Wichtig für komplexe Widgets.

Glossar: Wichtige Begriffe erklärt

WCAG: Web Content Accessibility Guidelines – der internationale Standard für Barrierefreiheit im Web.

BFSG: Barrierefreiheitsstärkungsgesetz – deutsches Gesetz, das ab 2025 Barrierefreiheit für bestimmte Produkte und Dienstleistungen vorschreibt.

Screenreader: Software, die Bildschirminhalte vorliest. Wichtig für blinde und sehbehinderte Nutzer.

Alt-Text: Alternativtext für Bilder, der von Screenreadern vorgelesen wird und bei Ladeproblemen angezeigt wird.

Kontrastverhältnis: Der Helligkeitsunterschied zwischen Text und Hintergrund. WCAG AA fordert mindestens 4,5:1.

Semantisches HTML: HTML-Elemente nach ihrer Bedeutung verwenden (header, nav, main, article), nicht nur nach Aussehen.

Fokus-Indikator: Visuelle Hervorhebung des aktuell per Tastatur ausgewählten Elements.

Website barrierefrei machen

TwoPixels prüft deine Website auf Barrierefreiheit und setzt die nötigen Anpassungen um – bevor das BFSG greift. Lass dich nicht von Abmahnungen überraschen.

Wir machen Websites zugänglich für alle – und verbessern dabei oft auch die Nutzererfahrung für jeden Besucher.

Barrierefreiheits-Check anfragen

Haben Sie Fragen zu diesem Thema?

Wir beraten Sie gerne persönlich und unverbindlich

Kontakt aufnehmen Weitere Artikel lesen
Jetzt anrufen