Barrierefreiheit

Barrierefreiheit – im Englischen Accessibility, oft als a11y abgekürzt – beschreibt die Gestaltung digitaler Angebote so, dass sie von allen Menschen genutzt werden können, unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. In Deutschland hat das Thema mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025 eine neue Dringlichkeit bekommen. Das Gesetz setzt die europäische Richtlinie European Accessibility Act (EAA) in deutsches Recht um und verpflichtet Unternehmen im B2C-Bereich, ihre digitalen Produkte und Dienstleistungen barrierefrei anzubieten. Laut dem Statistischen Bundesamt leben in Deutschland rund 7,9 Millionen Menschen mit einer anerkannten schweren Behinderung. Die tatsächliche Zielgruppe ist deutlich größer: Auch Menschen mit temporären Einschränkungen, ältere Nutzer oder Personen in ungünstigen Nutzungssituationen (grelles Sonnenlicht, laute Umgebung) profitieren von barrierefreiem Webdesign.

Rechtliche Grundlagen in Deutschland

Das Barrierefreiheitsstärkungsgesetz (BFSG)

Das BFSG betrifft Unternehmen, die Produkte oder Dienstleistungen an Verbraucher verkaufen. Dazu gehören E-Commerce-Shops, Bankdienstleistungen, Telekommunikation, E-Books und Personenbeförderungsdienste. Die Pflicht erstreckt sich auf Websites, mobile Apps und andere digitale Schnittstellen. Kleinstunternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz unter 2 Millionen Euro sind ausgenommen – für Dienstleistungen gilt diese Ausnahme allerdings nicht.

Bei Verstößen drohen Bußgelder von bis zu 100.000 Euro. Die Marktüberwachungsbehörden der Bundesländer sind für die Durchsetzung zuständig. Auch Verbraucherschutzverbände können abmahnen.

WCAG als technischer Standard

Die Web Content Accessibility Guidelines (WCAG) des W3C sind der international anerkannte Standard. Die aktuelle Version WCAG 2.2 (Oktober 2023) definiert Erfolgskriterien in drei Stufen:

Das BFSG referenziert die harmonisierte europäische Norm EN 301 549, die wiederum auf WCAG 2.1 Level AA aufbaut. In der Praxis orientieren sich die meisten Unternehmen an WCAG 2.2 AA.

Die vier WCAG-Prinzipien

Die WCAG organisiert ihre Anforderungen nach vier Grundprinzipien, die unter dem Akronym POUR bekannt sind:

Wahrnehmbar (Perceivable)

Inhalte müssen über mindestens einen Sinneskanal wahrnehmbar sein. Bilder brauchen Alternativtexte, Videos brauchen Untertitel, Audioinhalte brauchen Transkripte. Farbe allein darf keine Information tragen – ein roter Fehlerhinweis muss auch durch Text oder ein Icon erkennbar sein.

Bedienbar (Operable)

Alle Funktionen müssen per Tastatur erreichbar sein. Nutzer, die keine Maus verwenden können, navigieren mit Tab, Enter und Pfeiltasten. Zeitlimits müssen verlängerbar sein. Animationen, die Anfälle auslösen könnten (mehr als drei Blitze pro Sekunde), sind verboten.

Verständlich (Understandable)

Die Sprache der Seite muss im HTML-Attribut lang deklariert sein, damit Screenreader die korrekte Aussprache wählen. Formulare brauchen sichtbare Labels. Fehlermeldungen müssen beschreiben, was schiefgelaufen ist und wie man es korrigiert. Die Navigation soll konsistent und vorhersehbar sein.

Robust (Robust)

Inhalte müssen von verschiedenen Technologien – Browsern, Screenreadern, Vergrößerungssoftware – zuverlässig interpretiert werden können. Semantisch korrektes HTML ist die Basis: <nav> für Navigation, <main> für den Hauptinhalt, <button> für klickbare Aktionen statt <div onclick>.

Praktische Umsetzung

Semantisches HTML als Fundament

Der wichtigste Schritt zur Barrierefreiheit kostet nichts und erfordert keine speziellen Tools: semantisch korrektes HTML schreiben. Ein <h1> gefolgt von <h2> und <h3> gibt dem Screenreader eine navigierbare Dokumentstruktur. Ein <button> ist per Tastatur fokussierbar und klickbar – ein gestyltes <div> nicht. ARIA-Attribute (Accessible Rich Internet Applications) ergänzen die Semantik, wo natives HTML nicht ausreicht, etwa bei benutzerdefinierten Dropdowns oder Tabs.

Kontrast und Typografie

Der Mindestkontrast für Fließtext beträgt 4,5:1 (WCAG AA). Für großen Text (ab 18pt oder 14pt fett) reicht 3:1. Tools wie der WebAIM Contrast Checker prüfen Farbkombinationen in Sekunden. Schriftgrößen sollten in relativen Einheiten (rem, em) statt in Pixeln definiert werden, damit Nutzer die Browserschrift vergrößern können, ohne dass das Layout bricht.

Formulare und Interaktionen

• Labels sichtbar halten: Placeholder-Text allein reicht nicht – er verschwindet beim Tippen
• Fehlermeldungen inline platzieren: Neben dem betroffenen Feld, nicht nur als Banner oben
• Fokus-Indikatoren nicht entfernen: Der blaue Fokusring ist für Tastaturnutzer unverzichtbar
• Autocomplete-Attribute setzen: autocomplete="email" oder autocomplete="street-address" helfen Nutzern mit motorischen Einschränkungen

Bilder und Medien

Jedes informative Bild braucht einen Alt-Text, der den Bildinhalt beschreibt – nicht das Dateiformat. Dekorative Bilder bekommen ein leeres alt="", damit Screenreader sie überspringen. Videos brauchen Untertitel (Captions), idealerweise als WebVTT-Datei. Für rein visuelle Inhalte wie Infografiken ist eine textliche Beschreibung oder eine barrierefreie Datentabelle als Alternative nötig.

Testing und Audit

Automatisierte Tests

Tools wie axe DevTools, Lighthouse (in Chrome integriert) und WAVE decken etwa 30–40 % der WCAG-Kriterien automatisiert ab. Sie finden fehlende Alt-Texte, mangelnde Kontraste und fehlerhafte ARIA-Attribute. Was sie nicht können: beurteilen, ob ein Alt-Text tatsächlich sinnvoll ist, ob die Tab-Reihenfolge logisch ist oder ob ein komplexes Widget für Screenreader verständlich funktioniert.

Manuelles Testing

Für eine vollständige Prüfung braucht es manuelle Tests:

• Tastaturnavigation: Gesamte Seite nur mit Tab, Enter, Escape und Pfeiltasten bedienen
• Screenreader-Test: NVDA (Windows, kostenlos), VoiceOver (macOS/iOS, integriert) oder JAWS (Windows, kommerziell)
• Zoom auf 200 %: Prüfen, ob Layout und Inhalte lesbar bleiben
• Nutzertests mit Betroffenen: Der wertvollste Input kommt von Menschen, die täglich auf Barrierefreiheit angewiesen sind

Barrierefreiheit und SEO

Die Überschneidungen zwischen Barrierefreiheit und SEO sind erheblich. Google crawlt Webseiten ähnlich wie ein Screenreader: ohne visuelle Darstellung, basierend auf HTML-Struktur und Semantik. Saubere Überschriftenhierarchien, aussagekräftige Link-Texte, Alt-Texte und performante Ladezeiten verbessern sowohl die Zugänglichkeit als auch das Ranking. Eine Semrush-Studie zeigt, dass 73 % der häufigsten Accessibility-Fehler gleichzeitig SEO-Probleme sind.

Barrierefreiheit ist kein Nischenthema mehr. Mit dem BFSG wird sie für die meisten Unternehmen in Deutschland zur Pflicht. Wer sie nicht als lästige Vorschrift, sondern als Qualitätsmerkmal begreift, verbessert nicht nur die Zugänglichkeit für 7,9 Millionen schwerbehinderte Menschen, sondern die Nutzbarkeit für alle. Ein barrierefrei gestaltetes CMS, sauberer Code und durchdachtes UX-Design sind die Grundpfeiler – und zahlen sich langfristig in besserer Nutzerzufriedenheit, höherer Reichweite und weniger Rechtsrisiko aus.