Eine barrierefreie Website funktioniert für Menschen mit Sehschwäche, Farbenblindheit, motorischen Einschränkungen oder einem Screenreader. Und sie funktioniert für alle anderen besser: für jemanden im grellen Sonnenlicht, für jemanden, der in einer vollen Bahn mit einer Hand bedient. Diese fünf Checks machen wir vor dem Launch auf jeder Seite.

Barrierefreiheit von Websites klingt nach einem langen technischen Standard, und der vollständige ist das auch. Aber die meisten Probleme, die wir auf echten Websites finden, laufen auf dieselben fünf Dinge hinaus, und jeder kann sie an einem Nachmittag prüfen, ohne besondere Werkzeuge.

1. Kontrast

Fließtext braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1. Hellgrauer Text auf Weiß fällt oft durch und ist draußen schwer zu lesen.

Zum Prüfen nimmst du Text- und Hintergrundfarbe und gibst sie in den Kontrastprüfer von WebAIM ein. Prüf auch Buttons, Platzhaltertext in Formularen und Text auf Fotos: Die fallen am häufigsten durch.

2. Fokus

Alles, was man anklicken kann, muss auch mit der Tastatur funktionieren, und das fokussierte Element braucht einen klar sichtbaren Rahmen. Wer den Rahmen aus optischen Gründen entfernt, lässt Tastaturnutzer im Stich.

3. Überschriften

Eine Hauptüberschrift pro Seite, dann die Überschriften in Reihenfolge. Screenreader-Nutzer springen von Überschrift zu Überschrift, um eine Seite zu überfliegen, so wie sehende Besucher mit den Augen.

4. Alt-Text

Bilder mit Bedeutung bekommen eine kurze Beschreibung dessen, was sie zeigen. Dekorative Bilder bekommen eine leere Beschreibung, damit Screenreader sie überspringen.

Guter Alt-Text beschreibt, was auf dem Bild für diese Seite wichtig ist. Bei einem Produktfoto sind das das Produkt und seine Farbe, bei einem Teamfoto, wer darauf zu sehen ist. Fang nicht mit „Bild von“ an: Screenreader sagen bereits, dass es ein Bild ist.

5. Touch-Flächen

Buttons und Links müssen groß genug und weit genug auseinander sein, um sie mit dem Daumen zu tippen. Eine angenehme Fläche ist etwa 44 mal 44 Pixel groß.

Barrierefreiheit ist keine Zusatzfunktion. So sollte eine Website funktionieren.

Barrierefreiheit über die fünf Prüfungen hinaus

Die fünf Prüfungen finden die häufigsten Probleme. Wenn sie sitzen, lohnen sich noch ein paar weitere:

Formulare: Jedes Feld hat eine sichtbare Beschriftung, nicht nur einen Platzhalter, und Fehlermeldungen sagen, was schiefging und wie man es behebt.
Links: Der Linktext sagt, wohin er führt. „Unsere Preise ansehen“ funktioniert auch ohne Kontext, „hier klicken“ nicht.
Zoom: Die Seite funktioniert noch, wenn der Text auf 200 % vergrößert wird, ohne dass Inhalte abgeschnitten werden.
Bewegung: Animationen respektieren die Einstellung „Bewegung reduzieren“ auf dem Gerät des Besuchers, und nichts blinkt.
Video: Untertitel für Gesprochenes, damit das Video auch ohne Ton funktioniert.

Der vollständige Standard sind die Web Content Accessibility Guidelines (WCAG) 2.2. Stufe AA ist das übliche Ziel für Unternehmenswebsites. Die einfachen Prüfungen des W3C sind ein guter nächster Schritt nach den fünf oben.

Warum es gut fürs Geschäft ist

Barrierefreie Websites sind meist für alle leichter zu bedienen, also erledigen mehr Menschen, wofür sie gekommen sind. Viele Grundlagen der Barrierefreiheit überschneiden sich mit den Best Practices für Suchmaschinen, etwa klare Überschriften, aussagekräftige Links und Alt-Texte. Und es gehört einfach dazu, etwas ordentlich zu bauen, so wie sicherzustellen, dass die Haustür aufgeht.

Fragen, die oft gestellt werden

Ist Barrierefreiheit von Websites in Indonesien gesetzlich vorgeschrieben?

Das indonesische Recht erkennt die Rechte von Menschen mit Behinderung an, einschließlich des Zugangs zu Informationen, auch wenn die konkreten technischen Anforderungen an private Websites weniger detailliert sind als in manchen Ländern. Wenn du ins Ausland verkaufst, prüf die Regeln in diesen Märkten. So oder so sind die Prüfungen oben gute Praxis.

Kann ein Barrierefreiheits-Plugin oder Overlay alles beheben?

Nein. Overlays können fehlende Beschriftungen, eine schlechte Struktur oder unlesbare Farben im Design selbst nicht beheben. Barrierefreiheit muss in Design und Code eingebaut werden.

Wie testen wir mit einem Screenreader?

Jedes Handy hat einen eingebaut: VoiceOver auf dem iPhone und TalkBack auf Android. Schalt ihn ein, schließ die Augen und versuch, deine Kontaktdaten zu finden. Das macht demütig und ist sehr aufschlussreich.

Barrierefreiheit gehört dazu, wie wir in unserem Webdesign-Service jede Website gestalten und bauen. Sie hängt auch mit Tempo und Schrift zusammen: siehe warum sich eine Website auf dem Handy langsam anfühlt und Schriftwahl für zwei Sprachen.