Barrierefreiheit im Web

Warum Barrierefreiheit alle betrifft – nicht nur Menschen mit Behinderung

Barrierefreiheit (englisch: Accessibility, abgekürzt a11y) wird oft als Nischenthema wahrgenommen. Tatsächlich profitieren alle davon:

• Ältere Menschen – die Schrift muss größer darstellbar sein, Kontraste müssen stimmen
• Menschen mit Sehschwäche – Screenreader müssen die Seite vorlesen können
• Menschen mit motorischen Einschränkungen – die Seite muss ohne Maus bedienbar sein
• Alle Nutzer in schwierigen Situationen – grelles Sonnenlicht, langsame Verbindung, kleines Display oder wenn man das Baby auf dem Arm hat

Und: Barrierefreie Websites sind fast immer auch besser für Suchmaschinen. Klare Überschriften, beschreibende Texte für Bilder, logische Seitenstruktur – das hilft sowohl Screenreadern als auch Google & Co.

Was fordert das Barrierefreiheitsstärkungsgesetz?

Das BFSG setzt die europäische Richtlinie über Barrierefreiheitsanforderungen (European Accessibility Act) in deutsches Recht um. Seit dem 28. Juni 2025 ist es verbindlich.

Im Kern fordert das Gesetz, dass digitale Produkte und Dienstleistungen für Menschen mit Behinderungen wahrnehmbar, bedienbar, verständlich und robust sein müssen – das sind die vier Grundprinzipien der WCAG (Web Content Accessibility Guidelines).

Wer ist betroffen?

Das BFSG gilt für Unternehmen, die Produkte oder Dienstleistungen für Verbraucher anbieten. Konkret betrifft das unter anderem:

• Online-Shops – die häufigste betroffene Gruppe
• Online-Banking und Finanzdienstleistungen
• Buchungsportale für Reisen und Transport
• E-Books und E-Book-Lesegeräte
• Telekommunikationsdienste

Eine Ausnahme gibt es für Kleinstunternehmen, die Dienstleistungen erbringen: Wer weniger als 10 Beschäftigte hat und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme aufweist, ist von den Anforderungen an Dienstleistungen befreit. Wichtig: Wer dagegen Produkte in den Verkehr bringt – etwa physische Geräte oder Software –, fällt unabhängig von der Unternehmensgröße unter das BFSG. Die Ausnahme gilt ausdrücklich nur für Dienstleistungen.

Aber auch wenn Ihr Unternehmen formal nicht unter das BFSG fällt – eine barrierefreie Website ist trotzdem eine gute Investition in Nutzererfahrung und Suchmaschinenoptimierung.

Was passiert bei Verstößen?

Die Marktüberwachungsbehörden der Bundesländer können bei Verstößen Bußgelder bis zu 100.000 Euro verhängen. Außerdem können sie anordnen, dass ein nicht barrierefreies Produkt oder eine Dienstleistung vom Markt genommen wird. Darüber hinaus wird diskutiert, ob BFSG-Verstöße auch wettbewerbsrechtlich abgemahnt werden können – etwa durch Mitbewerber oder qualifizierte Verbände. Rechtlich ist das noch nicht abschließend geklärt, aber das Risiko besteht.

WCAG: Die vier Grundprinzipien verständlich erklärt

Die WCAG (Web Content Accessibility Guidelines) sind der internationale Standard für Barrierefreiheit im Web. Das BFSG verweist auf die EN 301 549, die wiederum auf der WCAG basiert. Die vier Grundprinzipien:

1. Wahrnehmbar: Kann jeder die Inhalte sehen oder hören?

Inhalte müssen so aufbereitet sein, dass sie von allen wahrgenommen werden können – auch von Menschen, die nicht sehen oder nicht hören können. Die wichtigsten Anforderungen:

• Bilder brauchen Beschreibungen (WCAG 1.1.1): Jedes Bild braucht einen Alt-Text – eine kurze Beschreibung, die ein Screenreader vorlesen kann. Ohne diesen Text sind Bilder für blinde Menschen unsichtbar. Auch Suchmaschinen nutzen den Alt-Text, um Bilder zu verstehen – Barrierefreiheit und SEO gehen hier Hand in Hand.
• Die Seitenstruktur muss logisch sein (WCAG 1.3.1): Überschriften, Listen, Tabellen und Formularfelder müssen im Quellcode korrekt ausgezeichnet sein – nicht nur visuell. Wenn eine Überschrift zwar groß und fett aussieht, aber im Code kein H2-Tag ist, erkennt ein Screenreader sie nicht als Überschrift.
• Texte müssen lesbar sein: Kontraste (WCAG 1.4.3): Hellgrauer Text auf weißem Hintergrund sieht vielleicht elegant aus – ist aber für Menschen mit Sehschwäche kaum lesbar. Die WCAG fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text.
• Text muss vergrößerbar sein (WCAG 1.4.4): Besucher müssen die Schriftgröße auf 200 % vergrößern können, ohne dass Inhalte abgeschnitten werden oder die Seite unbenutzbar wird.

2. Bedienbar: Funktioniert die Seite auch ohne Maus?

Nicht alle Menschen können eine Maus benutzen. Manche navigieren ausschließlich mit der Tastatur, andere mit Sprachsteuerung oder speziellen Eingabegeräten. Daraus ergeben sich klare Anforderungen:

• Navigation muss überspringbar sein (WCAG 2.4.1): Stellen Sie sich vor, Sie müssten bei jedem Seitenaufruf erst durch 20 Menüpunkte navigieren, bevor Sie zum Inhalt gelangen. Für Tastatur-Nutzer ist das ohne einen „Zum Inhalt springen“-Link Realität.
• Jede Seite braucht einen Titel (WCAG 2.4.2): Der Seitentitel (Title-Tag) hilft nicht nur Suchmaschinen – er ist auch das Erste, was ein Screenreader vorliest. Ohne aussagekräftigen Titel wissen blinde Besucher nicht, auf welcher Seite sie sich befinden.
• Die Reihenfolge muss Sinn ergeben (WCAG 2.4.3): Wenn ein Tastatur-Nutzer mit der Tab-Taste durch die Seite navigiert, muss die Reihenfolge logisch sein: erst die Navigation, dann der Inhalt, dann die Seitenleiste – nicht wild durcheinander.
• Der Fokus muss sichtbar sein (WCAG 2.4.7): Viele Webdesigner entfernen den blauen Rahmen um fokussierte Elemente aus ästhetischen Gründen. Damit machen sie die Seite für Tastatur-Nutzer unbedienbar – denn ohne sichtbaren Fokus wissen sie nicht, wo sie sich gerade befinden.

3. Verständlich: Ist die Seite klar und vorhersehbar?

Eine barrierefreie Seite muss sich so verhalten, wie Nutzer es erwarten. Keine Überraschungen, keine versteckten Stolperfallen:

• Die Sprache der Seite muss angegeben sein (WCAG 3.1.1): Im Quellcode muss hinterlegt sein, in welcher Sprache die Seite geschrieben ist – zum Beispiel <html lang="de"> für Deutsch. Ohne diese Angabe wissen Screenreader nicht, mit welcher Aussprache sie den Text vorlesen sollen. Das Ergebnis: Eine deutsche Seite wird mit englischer Aussprache vorgelesen – und ist dadurch unverständlich.
• Formulare müssen Fehler erklären (WCAG 3.3.1): Wenn ein Nutzer ein Pflichtfeld übersieht oder eine ungültige E-Mail-Adresse eingibt, muss die Fehlermeldung klar sagen, was falsch ist und wo. Ein rotes Kästchen ohne Text hilft niemandem – schon gar nicht, wenn ein Screenreader die Seite vorliest.

4. Robust: Funktioniert die Seite mit verschiedenen Hilfsmitteln?

Websites werden nicht nur mit Chrome auf einem Laptop aufgerufen. Screenreader, Braillezeilen, Sprachsteuerung – all diese Hilfsmittel müssen mit dem Code zurechtkommen:

• Interaktive Elemente müssen korrekt beschrieben sein (WCAG 4.1.2): Buttons, Links und Formularfelder müssen im Quellcode so ausgezeichnet sein, dass Screenreader und andere Hilfsmittel sie korrekt interpretieren können. Ein <div>, das wie ein Button aussieht, aber kein <button>-Element ist, funktioniert für sehende Nutzer – aber nicht für Screenreader und nicht für die Tastaturnavigation.
• Statusänderungen müssen kommuniziert werden (WCAG 4.1.3): Wenn ein Warenkorb aktualisiert wird, ein Formular erfolgreich abgeschickt wurde oder eine Fehlermeldung erscheint – dann müssen auch Screenreader das mitbekommen. Ohne ARIA-Live-Regionen oder vergleichbare Techniken passieren solche Änderungen für blinde Nutzer lautlos im Hintergrund.

Checkliste: Die wichtigsten Sofortmaßnahmen

1. Sprache setzen: <html lang="de"> im Quellcode Ihrer Seite
2. Alt-Texte ergänzen: Jedes Bild braucht eine beschreibende Alternative
3. Kontraste prüfen: Mindestens 4,5:1 für normalen Text
4. Überschriften-Hierarchie: H1 → H2 → H3, keine Sprünge, genau eine H1 pro Seite
5. Tastatur-Navigation testen: Versuchen Sie, Ihre Website nur mit der Tab-Taste zu bedienen
6. Fokus-Stile beibehalten: Den blauen Rahmen um fokussierte Elemente nicht entfernen
7. Formularfelder beschriften: Jedes Eingabefeld braucht ein zugehöriges Label
8. Automatisiert prüfen: Tools wie exatics erkennen viele häufige Probleme automatisch

Übergangsfristen: Was Sie jetzt noch tun können

Das BFSG ist seit dem 28. Juni 2025 verbindlich. Für bestimmte Produkte, die vor diesem Stichtag rechtmäßig in den Verkehr gebracht wurden, gibt es eine Übergangsfrist bis zum 27. Juni 2030 (§ 38 BFSG).

Achtung: Für Websites und Online-Shops gilt diese Übergangsfrist nicht. Sie zählen zu den Dienstleistungen – und für die gelten die Barrierefreiheitsanforderungen seit dem 28. Juni 2025. Wer einen Online-Shop betreibt, muss also jetzt handeln, nicht erst 2030.

Unser Rat: Die Umstellung braucht Zeit, und eine barrierefreie Website ist ohnehin ein Wettbewerbsvorteil – für Ihre Nutzer und für Ihr Ranking in Suchmaschinen.

Barrierefreiheit und Suchmaschinenoptimierung: Warum beides zusammengehört

Viele Maßnahmen für Barrierefreiheit verbessern gleichzeitig Ihre Sichtbarkeit in Suchmaschinen:

• Alt-Texte helfen Screenreadern und der Bildersuche
• Klare Überschriften helfen blinden Besuchern und Suchmaschinen, die Seitenstruktur zu verstehen
• Seitentitel werden vom Screenreader vorgelesen und in den Suchergebnissen angezeigt
• Sprachauszeichnung (lang-Attribut) hilft Screenreadern und Suchmaschinen, die Sprache korrekt zu erkennen

Wer Barrierefreiheit ernst nimmt, macht seine Website automatisch auch besser für Suchmaschinen. Das ist kein Zufall – beides zielt darauf ab, Inhalte für Maschinen verständlich zu machen.

Was prüft exatics bei der Barrierefreiheit?

Der exatics-Audit prüft automatisch 13 WCAG-Kriterien nach den vier Grundprinzipien:

Die Ergebnisse werden nach Schweregrad sortiert angezeigt – von kritisch bis geringfügig – zusammen mit konkreten Hinweisen, was Sie tun können. exatics nutzt dafür die bewährte Prüfbibliothek axe-core, die auch von großen Organisationen eingesetzt wird.

Weiterführende Artikel

• Barrierefreiheit und SEO: Warum beides zusammengehört
• SEO-Grundlagen: Was Suchmaschinen wirklich bewerten
• Core Web Vitals: Wie schnell muss eine Website sein?
• Glossar: WCAG (Web Content Accessibility Guidelines)
• Glossar: BFSG (Barrierefreiheitsstärkungsgesetz)
• Glossar: Was ist ein Screenreader?
• Glossar: ARIA (Accessible Rich Internet Applications)
• Glossar: Alt-Text (Alternativtext)