Wie kann man eine Website barrierefrei gestalten?

Ab Mitte 2025 werden barrierefreie Webseiten Pflicht. Was sind die wichtigsten Kriterien, die ein Webdesigner beachten muss, wenn er eine barrierefreie und robuste Webseite erstellt? 

Wichtige Kriterien für barrierefreie Webseiten

Eine barrierefreie Website zu gestalten ist kompliziert, viele Aspekte sollten bedacht werden. Menschen haben unterschiedliche Beeinträchtigungen. Zum Beispiel beim Sehen, Hören, Bewegungen ausführen oder Informationen begreifen. Eine Webseite ist barrierefrei, wenn alle Menschen sie ohne Probleme nutzen können. Hier sind einige wichtige Merkmale für Webseiten.

 
 
Personen arbeiten an barrierefreien Webdesign

Schriftart und Schriftgröße

Die Art, Farbe und Größe der Schrift haben großen Einfluss auf die Lesbarkeit. Buchstaben sollten nicht zu eng aneinander stehen und auch der Zeilenabstand ist sehr wichtig.

Kontrast und Farben

Der Kontrast zwischen Schrift und Hintergrund ist essenziell und wird von den Testtools oft bemängelt. 8 bis 10 %  der Menschen sind farbenblind oder haben eine Rot-grün-Schwäche.

Navigation und Struktur

Eine gut lesbare, durchgängige und logische Navigation ist immer wichtig gewesen. Unerfahrene oder beeinträchtigte Besucher müssen sich auf größeren Webseiten gut zurechtfinden.

Animationen

Animationen können ablenken und bei Nutzern mit Epilepsie sogar Anfälle auslösen. Der Einsatz ist eine Gratwanderung, auf jeden Fall darf der Screenreader nicht gestört und der Inhalt muss auch ohne Navigation verstanden werden.

Ohne Maus, mit Tastatur.

Nicht jeder kommt mit der Computer-Maus klar, das kann an einer Sehschwäche oder an einer Mobilitätsstörung liegen. Die Seite muss also per Tastatur bedienbar sein. Hier ist eine logische Reihenfolge der Seitensektionen notwendig.

Alternativtexte

Wer sich den Inhalt vorlesen lassen muss, kann keine Bilder sehen. Das kann durch aussagefähige und individuelle Alt-Texte behoben werden. Diese alternativen Texte beschreiben das Bild und der Screenreader kann das vorlesen.

Einfache Sprache

Vermeiden Sie unbedingt Fachchinesisch und bauen Sie keine Hürden durch Fremdwörter und komplizierte Formulierungen auf. Wenn Sie Fachbegriffe verwenden müssen, dann erklären Sie das gut. Zwischenüberschriften machen jeden Text leichter lesbar.

Links, Schaltflächen

Buttons oder Links mit dem Wort „weiter“ geben keinen Hinweis, wohin die Reise geht. Deshalb sollten diese interaktiven Elemente immer eindeutig bezeichnet werden. Das gilt noch mehr, wenn ein Symbol oder Bild mit einem anderen Inhalt verlinkt ist.

Was ist ein Screenreader?

Alle hier genannten Maßnahmen sind ohne Screenreader sinnlos, wenn der User stark sehbehindert ist. Ein Screenreader ist ein Programm, das den Inhalt eines Bildschirms laut vorliest und weitere individuelle Einstellungen ermöglicht.

Wie kann man die Barrierefreiheit prüfen bzw. testen?

Neben manuellen Tests von Mitarbeitern, externen Experten oder Betroffenen finden Sie auch online Hilfe. Es gibt diverse Tools, um barrierefreie Webseiten während der Gestaltung und danach zu testen. Hier sind ein paar Links dazu.

 
webdesigner testet Barrierefreiheit
Z

Siteimprove:

Bietet einen schnellen Überblick über die Barrierefreiheit.

Z

Accessibility Insights for Web:

Die Chromeerweiterung versorgt Sie mit einer detaillierten Analyse.

Z

Lighthouse:

Integriert in Chrome, liefert einen umfassenden Bericht

Z

WCAG Contrast Checker:

Prüft den Farbkontrast zwischen Text und Hintergrund.

Wir sind als Agentur auf WordPress spezialisiert. Wenn Sie Fragen haben oder Beratung zur Erstellung von barrierefreien Webseiten mögen, sind wir für Sie da. Hier finden Sie Einzelheiten zum BFSG-Barrierefreiheitsstärkungsgesetz.

Autor ist Gilbert Röhrborn.
Inhaber und Gründer der Berliner Webagentur wtm-online. Ausgebildeter SEO Professional & SEM Manager und Webanalyst.