Barrierefreie Website: Grundlagen und 10 schnelle Verbesserungen

Eine barrierefreie Website (im Englischen oft kurz a11y) kann von allen Menschen genutzt werden – auch von Menschen mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen und von allen, die gerade in einer schwierigen Situation sind: grelles Sonnenlicht, ein gesprungenes Display oder nur eine freie Hand. Barrierefreiheit lohnt sich, weil sie Ihre Zielgruppe vergrößert, die Bedienbarkeit für alle verbessert, SEO unterstützt und in der EU zunehmend gesetzlich vorgeschrieben ist. Die gute Nachricht: Viele der wichtigsten Verbesserungen sind schnell und günstig umzusetzen.

Im Folgenden: wer profitiert, was der WCAG-Standard verlangt und zehn schnelle Maßnahmen, die Sie diese Woche auf Ihrer Website prüfen können.

#Wer profitiert von einer barrierefreien Website?

Barrierefreiheit ist kein Nischen-Feature für „ein paar Nutzer“. Man kann drei Gruppen unterscheiden:

• Dauerhaft: Menschen, die blind oder sehbehindert sind, gehörlos, mit eingeschränkter Handbeweglichkeit, Legasthenie oder anderen Beeinträchtigungen.
• Vorübergehend: ein gebrochener Arm, eine Augenentzündung, die Erholung nach einer Operation.
• Situativ: ein Smartphone in der Sonne, ein lauter Bus ohne Kopfhörer, ein Baby auf dem Arm, eine langsame Verbindung.

Menschen mit Behinderungen nutzen das Web mit assistiven Technologien: Screenreader, die die Seite vorlesen, Bildschirmlupen, Sprachsteuerung, reine Tastaturnavigation, Schaltersteuerungen. Ihre Website funktioniert entweder mit diesen Werkzeugen – oder sie sperrt Menschen stillschweigend aus.

#Warum Barrierefreiheit für Ihr Unternehmen zählt

#Mehr Kunden

Jeder Mensch, der eine Buchung oder einen Bestellvorgang nicht abschließen kann, ist ein verlorener Kunde – oft samt Familie. Ältere Menschen sind online eine große und wachsende Gruppe, und sie profitieren direkt von gut lesbarem Text, klarem Kontrast und einfachen Formularen.

#Bessere UX für alle

Barrierefreiheit und gute UX überschneiden sich stark: klare Beschriftungen, sichtbarer Fokus, logische Struktur, lesbarer Text und fehlertolerante Formulare helfen jedem Besucher. Das ist eines der Kernprinzipien in unserem Leitfaden So gelingt gutes UI/UX.

#Unterstützung für SEO

Suchmaschinen lesen Ihre Seite ganz ähnlich wie ein Screenreader: Überschriften, Linktexte, Alternativtexte für Bilder, eine saubere HTML-Struktur. Barrierefreiheit garantiert keine Rankings, aber dieselben Grundlagen, die assistiven Technologien helfen, helfen auch Google, Ihre Inhalte zu verstehen – viele davon stehen auf unserer SEO-Checkliste vor dem Launch.

#Gesetzliche Anforderungen

Der European Accessibility Act (Europäischer Rechtsakt zur Barrierefreiheit) gilt seit dem 28. Juni 2025 für eine Reihe von Produkten und Dienstleistungen, die Verbrauchern in der EU angeboten werden – darunter E-Commerce, Bankdienstleistungen, E-Books und Personenbeförderung. Kleinstunternehmen, die Dienstleistungen erbringen (weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Bilanzsumme), sind ausgenommen. Websites öffentlicher Stellen in der EU unterliegen schon seit Jahren eigenen Barrierefreiheitsregeln. Wenn Sie an Kunden in der EU verkaufen, prüfen Sie, welche Vorschriften für Sie gelten – dieser Artikel ist keine Rechtsberatung.

#WCAG in einer Minute

Die Web Content Accessibility Guidelines (WCAG) des W3C sind der internationale Standard. Aktuell ist WCAG 2.2 (W3C-Empfehlung seit Oktober 2023); sie baut auf WCAG 2.1 auf, auf die sich die europäische Norm EN 301 549 bezieht. Die meisten Gesetze und Richtlinien verweisen auf die Stufe AA. Der Standard beruht auf vier Prinzipien – kurz POUR:

Den kompletten Standard müssen Sie nicht auswendig kennen. Die WCAG-Kurzreferenz und der Accessibility-Kurs auf web.dev sind gute Einstiegspunkte für Ihren Entwickler.

#10 schnelle Verbesserungen für mehr Barrierefreiheit

#1. Ausreichender Farbkontrast

Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text und UI-Elemente wie Eingabefeld-Rahmen und Icons mindestens 3:1. Hellgrauer Text auf Weiß ist der häufigste Fehler. Prüfen lässt sich das mit den DevTools Ihres Browsers oder einem beliebigen Kontrast-Checker.

#2. Nicht nur auf Farbe setzen

„Rot markierte Felder sind Pflichtfelder“ funktioniert nicht für Menschen mit Farbenblindheit. Ergänzen Sie Text, Icons oder Muster: ein Sternchen plus das Wort „Pflichtfeld“, ein Fehler-Icon neben der Meldung.

#3. Alternativtext für aussagekräftige Bilder

Beschreiben Sie, was am Bild wichtig ist: alt="Blaue Keramiktasse, 350 ml" bei einem Produktfoto. Dekorative Bilder bekommen ein leeres alt="", damit Screenreader sie überspringen.

#4. Echte Überschriften in der richtigen Reihenfolge

Verwenden Sie eine H1 und danach H2, H3 in einer logischen Gliederung – keinen fetten Text, der nur so aussieht wie eine Überschrift. Screenreader-Nutzer springen von Überschrift zu Überschrift, um eine Seite zu überfliegen – genau wie sehende Nutzer.

#5. Alles funktioniert mit der Tastatur

Testen Sie Ihre Website nur mit den Tasten Tab, Shift+Tab, Enter und Leertaste. Erreichen Sie jeden Link, können Sie das Menü öffnen, das Formular ausfüllen und Pop-ups schließen? Sehen Sie, wo Sie sich gerade befinden?

#6. Sichtbarer Fokus

Entfernen Sie niemals den Fokusrahmen, ohne ihn zu ersetzen. Ein deutlicher Fokus-Stil ist nur ein kleines Stück CSS:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

currentColor übernimmt die Textfarbe des Elements, sodass der Rahmen auf hellen wie dunklen Hintergründen sichtbar bleibt. Wenn Sie stattdessen eine Markenfarbe wählen, achten Sie auf mindestens 3:1 Kontrast zum Hintergrund.

#7. Beschriftungen für jedes Formularfeld

Ein Platzhalter ist keine Beschriftung – er verschwindet, sobald jemand tippt. Jedes Eingabefeld braucht ein sichtbares, damit verknüpftes <label>, und Fehlermeldungen sollten direkt am Feld erklären, wie sich das Problem beheben lässt.

#8. Buttons und Links, die sagen, was sie tun

„Hier klicken“ und „Mehr erfahren“ bedeuten ohne Kontext nichts. „Preisliste herunterladen (PDF)“ oder „Mehr zur Lieferung“ funktioniert für alle. Verwenden Sie echte <button>- und <a>-Elemente statt klickbarer <div>s.

#9. Ausreichend große Touch-Flächen

WCAG 2.2 (Kriterium 2.5.8, Stufe AA) verlangt Zielflächen von mindestens 24×24 CSS-Pixeln oder genügend Abstand um kleinere Elemente; Apple empfiehlt 44×44 Punkt und Googles Material Design 48×48 dp für bequemes Tippen. Am wichtigsten ist das auf dem Smartphone – siehe unseren Leitfaden zu Mobile-First-Design.

#10. Nutzereinstellungen respektieren

Lassen Sie Text mitwachsen, wenn jemand die Schriftgröße erhöht, sorgen Sie dafür, dass das Layout bei 200 % Zoom nicht zerbricht, geben Sie die Seitensprache an (<html lang="de">), damit Screenreader richtig aussprechen, und reduzieren Sie Animationen für Menschen, die „Bewegung reduzieren“ aktiviert haben.

#Barrierefreiheit selbst testen

1. Tastaturtest: Ziehen Sie für fünf Minuten die Maus ab und versuchen Sie, die wichtigste Aufgabe zu erledigen.
2. Zoomtest: Stellen Sie den Browser-Zoom auf 200 % und prüfen Sie, ob sich nichts überlappt oder verschwindet.
3. Automatische Prüfung: Starten Sie Lighthouse in den Chrome DevTools (Bereich Accessibility). Es findet häufige Probleme wie fehlende Alternativtexte oder zu geringen Kontrast – aber nicht alles.
4. Screenreader-Test: Probieren Sie VoiceOver (in Mac und iPhone integriert), TalkBack (Android) oder das kostenlose NVDA (Windows) ein paar Minuten lang auf Ihrer wichtigsten Seite aus. Das öffnet die Augen.
5. Echte Nutzer fragen: Beziehen Sie, wenn möglich, jemanden in Ihre Tests ein, der assistive Technologien nutzt.

#FAQ

#Ist eine barrierefreie Website gesetzlich vorgeschrieben?

Das hängt von Branche und Land ab, und die Regeln entwickeln sich weiter – klären Sie die Details für Ihren Fall mit einem Anwalt. Wenn Sie an Verbraucher in der EU verkaufen, kann der European Accessibility Act für Sie gelten, selbst wenn Ihr Unternehmen außerhalb der EU registriert ist, etwa in Moldau. So oder so ist WCAG 2.2 AA das sichere, weithin anerkannte Ziel.

#Sieht eine barrierefreie Website langweilig aus?

Nein. Barrierefreie Websites können mutig, farbenfroh und modern sein – diese Website kombiniert einen Acid-Lime-Akzent mit einem fast schwarzen Hintergrund, und ihr Text liegt deutlich über dem Minimum von 4,5:1. Barrierefreiheit schränkt schlechte Entscheidungen ein, nicht die Kreativität.

#Ist Barrierefreiheit teuer?

Wenn sie von Anfang an eingeplant wird, kostet sie kaum mehr – im Kern geht es darum, HTML, CSS und Design sauber umzusetzen. Eine alte, nicht barrierefreie Website nachträglich umzubauen, ist teurer – ein weiterer Grund, früh daran zu denken.

#Reichen Accessibility-Overlay-Widgets aus?

Nein. Toolbar-Plugins, die „Barrierefreiheit mit einer Zeile Code“ versprechen, können fehlende Beschriftungen, kaputte Tastaturnavigation oder schlechte Struktur nicht reparieren und verschlimmern die Lage manchmal sogar. Echte Lösungen entstehen im Code und im Design.

#Eine Website, die für alle funktioniert

Barrierefreiheit ist Teil von Qualität, kein Extra. Wenn Sie Ihr Projekt im Konfigurator skizzieren, gehören Kontrast, Tastaturbedienung, semantisches Markup und barrierefreie Formulare für mich ganz selbstverständlich zur Website-Entwicklung – damit mehr Menschen tatsächlich nutzen können, was Sie aufgebaut haben.