Ab dem 28. Juni 2025 verpflichtet der European Accessibility Act (EAA) viele Unternehmen in der EU, ihre digitalen Angebote barrierefrei zu gestalten. Das betrifft Online-Shops, Bankdienstleistungen, E-Books und zahlreiche weitere digitale Produkte. Wer jetzt nicht handelt, riskiert Abmahnungen und Bußgelder. Hier erkläre ich, was das für Ihre Website konkret bedeutet.
Was ändert sich ab Juni 2025?
Der European Accessibility Act (Richtlinie (EU) 2019/882) wird in Deutschland durch das Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt und gilt ab dem 28. Juni 2025. Betroffen sind Unternehmen, die Produkte und Dienstleistungen für Verbraucher anbieten — also praktisch jeder Online-Shop und jede Dienstleistungsplattform.
Ein paar wichtige Einschränkungen: Kleinstunternehmen mit weniger als 10 Mitarbeitern und unter 2 Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen. Aber Vorsicht — das gilt nur für Dienstleistungen, nicht für Produkte. Ein kleiner Online-Shop, der physische Produkte verkauft, fällt unter Umständen trotzdem unter die Regelung.
In meiner Agentur haben wir seit Anfang 2024 systematisch alle aktiven Kundenprojekte auf Barrierefreiheit geprüft. Das Ergebnis war ernüchternd: Über 80 % hatten mindestens 5 kritische Probleme nach WCAG 2.1 AA. Und das sind keine exotischen Anforderungen.
Was sind die WCAG 2.1 AA Standards?
WCAG (Web Content Accessibility Guidelines) ist der internationale Standard für barrierefreie Webinhalte, entwickelt vom W3C. Die Stufe AA ist das Niveau, das der EAA als Mindestanforderung vorsieht. Das umfasst vier Grundprinzipien:
Wahrnehmbar: Alle Inhalte müssen für jeden wahrnehmbar sein — auch für Menschen mit Seh- oder Hörbehinderungen. Das bedeutet: Alt-Texte für Bilder, Untertitel für Videos, ausreichende Farbkontraste.
Bedienbar: Die Website muss vollständig per Tastatur bedienbar sein. Kein Element darf nur per Mausklick erreichbar sein. Und: Nutzer müssen genug Zeit haben, Inhalte zu lesen und zu bedienen. Auto-Scrolling-Karusselle ohne Pause-Funktion? Problematisch.
Verständlich: Navigation und Bedienung müssen vorhersehbar sein. Formulare brauchen klare Labels und verständliche Fehlermeldungen. Die Sprache der Seite muss im HTML-Code deklariert sein (lang-Attribut).
Robust: Die Website muss mit verschiedenen Technologien funktionieren — einschließlich Screenreadern und anderen assistiven Technologien. Das erfordert sauberes, semantisches HTML.
Welche konkreten Anforderungen muss meine Website erfüllen?
Die häufigsten Probleme lassen sich in 8 Kategorien einteilen. Hier ist meine Checkliste, sortiert nach Häufigkeit in Kundenprojekten:
1. Farbkontraste — Mindestkontrastverhältnis von 4,5:1 für normalen Text, 3:1 für großen Text (ab 18pt oder 14pt fett). Laut einer WebAIM-Studie von 2024 haben 83,6 % aller Homepages unzureichende Textkontraste. Das ist der häufigste Fehler überhaupt — und einer der einfachsten zu beheben.
2. Alt-Texte für Bilder — Jedes Bild braucht einen beschreibenden Alt-Text. Dekorative Bilder bekommen ein leeres alt=““ Attribut, damit Screenreader sie überspringen. In WordPress: Beim Hochladen eines Bildes immer das Feld „Alternativer Text“ ausfüllen. Bei meinen Audits fehlt der Alt-Text bei durchschnittlich 40 % aller Bilder.
3. Tastaturnavigation — Jedes interaktive Element (Links, Buttons, Formularfelder, Menüs) muss per Tab-Taste erreichbar und per Enter/Space bedienbar sein. Testen Sie es selbst: Legen Sie die Maus beiseite und navigieren Sie nur mit der Tastatur durch Ihre Website. Kommen Sie überall hin? Sehen Sie, wo der Fokus gerade ist?
4. Fokus-Indikatoren — Der aktive Tastatur-Fokus muss visuell sichtbar sein. Viele Themes entfernen den Standard-Fokusring aus ästhetischen Gründen (outline: none). Das ist ein schwerer Barrierefreiheits-Fehler. Ersetzen Sie es durch einen gut sichtbaren, individuellen Fokus-Stil.
5. Semantisches HTML — Überschriften in korrekter Reihenfolge (H1, H2, H3 — keine Ebenen überspringen), Listen als ul/ol, Navigationen als nav-Element, Hauptinhalt als main. Screenreader nutzen diese Struktur, um Nutzern einen Überblick zu geben. Ein div mit font-size: 24px ist keine Überschrift.
6. Formulare — Jedes Eingabefeld braucht ein zugeordnetes label-Element (mit for-Attribut). Pflichtfelder müssen gekennzeichnet sein — nicht nur farblich, sondern auch textlich. Fehlermeldungen müssen konkret beschreiben, was falsch ist und wie es korrigiert werden kann.
7. ARIA-Labels — Für interaktive Elemente, die keinen sichtbaren Text haben (Icon-Buttons, Hamburger-Menüs), brauchen Sie aria-label oder aria-labelledby Attribute. Ein Button, der nur ein Hamburger-Icon zeigt, muss aria-label=“Hauptmenü öffnen“ haben.
8. Bewegte Inhalte — Animationen, Karusselle und Auto-Play-Videos müssen pausierbar sein. Nutzer mit vestibulären Störungen können durch unkontrollierte Bewegungen Schwindel bekommen. CSS: prefers-reduced-motion Media Query berücksichtigen.
Welche Tools helfen bei der Barrierefreiheits-Prüfung?
WAVE (Web Accessibility Evaluation Tool) ist mein Standardwerkzeug für schnelle Audits. Es ist kostenlos, läuft als Browser-Extension und markiert Probleme direkt auf der Seite — farbkodiert nach Schweregrad.
Meine Tool-Empfehlungen:
- WAVE (wave.webaim.org) — Browser-Extension für Chrome/Firefox, kostenlos, visueller Report direkt auf der Seite
- axe DevTools (Deque) — Genauere technische Analyse, integriert sich in Chrome DevTools, findet Probleme, die WAVE übersieht
- Google Lighthouse — Accessibility-Audit als Teil des Performance-Audits, Score von 0-100, in Chrome eingebaut
- Contrast Checker (webaim.org/resources/contrastchecker) — Prüft Farbkontraste nach WCAG-Kriterien
- Screenreader-Test — NVDA (Windows, kostenlos) oder VoiceOver (Mac, eingebaut). Kein Tool ersetzt den echten Test mit einem Screenreader.
Ein Hinweis, weil ich den Fehler bei einem Kollegen gesehen habe: Automatische Tools finden nur etwa 30-40 % aller Barrierefreiheits-Probleme (Deloitte, 2023). Der Rest erfordert manuelle Prüfung. Sich nur auf Lighthouse zu verlassen, reicht nicht.
Lohnt sich Barrierefreiheit auch wirtschaftlich?
Ja — und zwar über den reinen Compliance-Aspekt hinaus. In Deutschland leben rund 7,8 Millionen schwerbehinderte Menschen (Destatis, 2023). Dazu kommen Millionen mit situativen Einschränkungen: gebrochener Arm, Sonnenlicht auf dem Bildschirm, langsame Internetverbindung. Barrierefreie Websites funktionieren für alle besser.
Die Click-Away-Pound-Studie (UK, 2019) hat gezeigt, dass 69 % der Nutzer mit Behinderungen eine Website verlassen, wenn sie Probleme bei der Bedienung haben — und 86 % davon würden mehr ausgeben, wenn die Seite zugänglich wäre. Der geschätzte Umsatzverlust durch nicht barrierefreie Websites: 17,1 Milliarden Pfund pro Jahr allein in Großbritannien.
Und dann ist da noch der SEO-Effekt. Barrierefreie Websites sind strukturell gut aufgebaut — semantisches HTML, beschreibende Texte, klare Hierarchien. Genau das, was auch Suchmaschinen bevorzugen. Alt-Texte helfen nicht nur Screenreadern, sondern auch der Google-Bildersuche. Korrekte Überschriftenstruktur hilft Google, den Inhalt zu verstehen. Das ist kein Zufall.
Wie fange ich an?
Starten Sie mit einem Audit Ihrer aktuellen Website. Installieren Sie die WAVE-Extension, prüfen Sie Ihre 5 wichtigsten Seiten und dokumentieren Sie die gefundenen Fehler. Priorisieren Sie nach Schweregrad: Farbkontraste und fehlende Alt-Texte lassen sich oft an einem Nachmittag korrigieren. Tastaturnavigation und ARIA-Labels erfordern mehr Aufwand.
Wenn Sie WordPress nutzen, prüfen Sie auch Ihr Theme: Manche Themes (GeneratePress, Astra) haben Barrierefreiheit als Grundprinzip. Andere setzen sie stiefmütterlich um. Ein Theme-Wechsel kann manchmal effektiver sein als wochenlange Nachbesserung.
Falls Sie sich fragen, wie Barrierefreiheit und Performance zusammenhängen — ja, sie tun es. Semantisches HTML ist leichter als div-Suppe. Optimierte Bilder mit korrekten Alt-Texten sind die Grundlage für beides. Lesen Sie dazu meinen Artikel über Website-Performance und den CMS-Vergleich WordPress vs. Webflow, in dem ich auch auf die jeweiligen Barrierefreiheits-Features eingehe.
Barrierefreiheit ist kein Projekt, das Sie einmal abschließen und dann vergessen. Es ist ein laufender Prozess — wie Sicherheitsupdates oder Content-Pflege. Aber der erste Schritt ist der wichtigste. Und der kostet meistens weniger, als Sie denken.