10 Tipps für eine barrierefreie Website

„The future is accessible.“, sagt Stefan Farnetani auf einem Vortrag über Barrierefreiheit im Internet. Damit beschreibt er nicht nur die Zukunft, die Menschen mit Behinderungen durch Barrierefreiheit (Accessibility) offensteht. Er impliziert auch: Modern ist, wer eine barrierefreie Website hat.
Annett Farnetani, Expertin für barrierefreie Medien bei Mindscreen, verrät uns 10 Tipps und Tricks, mit denen auch du deine Website barrierefrei machst:

1. Doppelte Informationen

Mache alle wichtigen Informationen auf deiner Seite über mindestens zwei Kanäle zugänglich. Das kann zum Beispiel in Form eines Videos mit Transkript oder eines Bildes mit Alternativtext sein. Achte dabei darauf, dass alle relevanten Informationen auch über den alternativen Kanal zu erreichen sind. So versteht der Nutzer eines Screenreaders deinen Inhalt genauso gut, wie jemand, der sich das Bild oder Video ansieht.

2. Starke Kontraste

Kontrast (Illustration: A. Schumacher)

Kräftige Farben und starke Kontraste helfen visuell eingeschränkten Personen, aber auch Menschen ohne Einschränkung. Besonders wichtig ist das Kontrastverhältnis zwischen Schrift und Hintergrund. Ideal ist ein Verhältnis von 3:1 oder größer. So ist dein Text gut lesbar und ermüdet die Augen nicht. Auf Websites wie Contrast Checker oder Contrast Ratio kannst du online deine Farbwahl überprüfen und Kombinationen ausprobieren.

3. Klare Strukturen

Gib klare Anweisungen. Lass die Nutzer wissen, wo sie sich in einem Prozess oder auf der Website befinden. Das hilft gerade Menschen, die sich aufgrund von Einschränkungen oder aus anderen Gründen in der digitalen Welt nicht sicher fühlen. Breadcrumbs sind eine von vielen Möglichkeiten, das umzusetzen.

4. Richtige Kennzeichnung

Achte nicht nur äußerlich auf klare Strukturen, sondern auch auf der HTML-Ebene. Kennzeichne Überschriften, Links und Listen richtig und halte die Hierarchien ein. So sind diese auch für Nutzer eines Screenreaders als solche erkennbar.

5. Gewohnter Aufbau

Navigation (Illustration: A. Schumacher)

Benutze einen einheitlichen Aufbau und allgemein gewohnte Strukturen, damit Nutzer, die im Internet (noch) nicht zu Hause sind, sich gut auf deiner Seite zurechtfinden. Darunter fällt zum Beispiel der Navigations-Button links oder der Suchen-Button rechts oben im Bild.

6. Aussagekräftige Links

Gib deinen Links aussagekräftige Namen. Ein Screenreader verfügt über verschiedene Vorlese-Optionen. Unter anderem kann der Nutzer von Überschrift zu Überschrift oder von Link zu Link springen. Wenn der Leser so auf Links wie hier oder weitere Infos dazu stößt, versteht er nicht, wo dieser Link hinführt.

7. Erkennbare Links

Kennzeichne Links (und auch andere Elemente) immer mit mehr als einem Erkennungsmerkmal. Für gewöhnlich sind Links farbig und unterstrichen. Vor allem Farbe als alleiniges Unterscheidungsmerkmal ist für Menschen mit Achromasie schwer zu erkennen. Und denke immer an die Kontraste!

8. Vergrößerbare Seite

Vergrößerung (Illustration: A. Schumacher)

Achte darauf, dass deine Website auch bei vielfacher Vergrößerung noch lesbar ist und gut aussieht. Auf diese Weise finden sich Personen mit visuellen Einschränkungen immer noch gut zurecht und erleben eine positive User-Experience.

9. Tastatur-Steuerung

Motorisch beeinträchtigten Menschen fällt es oft schwer, eine Maus zu benutzen, um auf der Seite zu navigieren. Für sie ist es notwendig, auch über die Tastatur steuern zu können. Achte darauf, dass der Cursor gut sichtbar und schnell findbar ist.

10. Informiere dich!

Informiere dich über neue Entwicklungen, teste deine Seite und halte sie aktuell.
Tritt in Kontakt mit beeinträchtigten Menschen und erweitere deinen Horizont um neue Blickwinkel.

Mit diesen 10 Tipps erstellst du schnell und einfach deine barrierefreie Website und schaffst eine positive User Experience für alle Nutzer.

Quellenverzeichnis: Interview mit Annett Farnetani
Vorträge von Stefan und Annett Farnetani auf dem Tag der Barrierefreiheit der Technsichen Universität München