Barrierefreiheit im Web: warum sie wichtig ist und wie du anfängst

Rund jeder sechste Mensch weltweit lebt mit einer erheblichen Behinderung. Viele weitere haben vorübergehende oder situative Einschränkungen: einen gebrochenen Arm, einen kleinen Handybildschirm in grellem Sonnenlicht oder müde Augen am Ende des Tages. Eine barrierefreie Website funktioniert für sie alle – und meist auch für alle anderen besser.

Warum Barrierefreiheit für dein Unternehmen wichtig ist

• Mehr Kunden: Wenn Menschen auf deiner Website nicht lesen, navigieren oder kaufen können, gehen sie zur Konkurrenz.
• Besseres SEO: Klare Überschriften, aussagekräftige Links und Bildbeschreibungen helfen Suchmaschinen, deine Seiten zu verstehen.
• Rechtliche Anforderungen: In vielen Ländern, etwa in der EU durch den European Accessibility Act (in Deutschland das Barrierefreiheitsstärkungsgesetz) und in den USA durch den ADA, wird zunehmend erwartet, dass Websites, die an Verbraucher verkaufen, barrierefrei sind.
• Eine stärkere Marke: Eine inklusive Website zeigt, dass dir jeder Kunde wichtig ist.

Der Standard, an dem du dich orientierst

Die Web Content Accessibility Guidelines (WCAG) sind die internationale Referenz. Die meisten Unternehmen streben WCAG 2.1 oder 2.2 auf Stufe AA an. Die Richtlinien basieren auf vier Prinzipien: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein.

Schnelle Verbesserungen, die du heute prüfen kannst

1. Textalternativen: Jedes aussagekräftige Bild hat eine kurze Beschreibung (Alt-Text). Dekorative Bilder haben einen leeren Alt-Text, damit Screenreader sie überspringen.
2. Farbkontrast: Text hebt sich dunkel genug vom Hintergrund ab, um gut lesbar zu sein. Vermeide Hellgrau auf Weiß.
3. Überschriften in der richtigen Reihenfolge: Eine Hauptüberschrift pro Seite, dann logische Abschnittsüberschriften, damit Screenreader-Nutzer durch die Seite springen können.
4. Aussagekräftige Links: „Preisliste herunterladen“ statt „hier klicken“.
5. Bedienung per Tastatur: Jedes Menü, jeder Button und jedes Formular lässt sich mit Tab und Enter bedienen, mit sichtbarer Fokusmarkierung.
6. Formulare mit Beschriftungen: Jedes Feld hat eine sichtbare Beschriftung, und Fehlermeldungen erklären, wie sich das Problem beheben lässt.
7. Zoom und Textgröße: Die Seite funktioniert auch bei 200 Prozent Zoom noch.
8. Untertitel: Videos haben Untertitel, und Audioinhalte haben ein Transkript.

Häufige Fehler

• Text in Bildern, den Screenreader nicht lesen können und der nicht mitskaliert.
• Pop-ups, in denen Tastaturnutzer feststecken oder die sich nicht schließen lassen.
• Buttons, die nur aus einem Icon bestehen und keinen zugänglichen Namen haben.
• Informationen nur über Farbe vermitteln, etwa Rot für einen Fehler ohne Fehlermeldung.
• Auf „Accessibility-Overlay“-Widgets setzen, statt die Website selbst zu verbessern. Sie lösen die eigentlichen Probleme nur selten.

So testest du deine Website

Beginne mit kostenlosen Tools wie Google Lighthouse oder WAVE, um offensichtliche Probleme zu finden. Teste deine Website dann nur mit der Tastatur und mit dem Screenreader, der in dein Smartphone oder deinen Computer integriert ist. Automatisierte Tools finden etwa ein Drittel der Probleme, deshalb lohnt sich für wichtige Seiten wie Checkout und Kontaktformulare eine manuelle Prüfung durch jemanden mit Erfahrung.

Mach sie zum festen Teil des Prozesses

Barrierefreiheit ist am einfachsten, wenn sie von Anfang an eingeplant wird: im Design, im Code und in jeder neuen Seite, die du veröffentlichst. Nachträglich ist sie auch möglich, kostet aber mehr.