Inklusives Design: 7 Tipps für eine barrierefreie Webseite

Was ist Barrierefreiheit?

Die Barrierefreiheit von Webseiten bezieht sich auch die digitale „Zugänglichkeit“ von Inhalten. Dabei geht es darum, dass auch Nutzer mit unterschiedlichsten Einschränkungen oder Behinderungen eine Webseite bedienen können. Das Thema wird von vielen Webseiten vernachlässigt, obwohl mit einer barrierefreien Webseite ein breitere Zielgruppe angesprochen kann. 

Die häufigsten Beeinträchtigungen von Nutzern im Internet sind:

• Visuell: Blindheit, Sehschwäche, Farbenblindheit
• Motorisch: Schwierigkeiten eine Maus zu benutzen, langsamere Reaktionszeit
• Kognitiv: Probleme sich auf grosse Mengen von Informationen zu konzentrieren
• Auditiv: Taubheit, Schwerhörigkeit

‍

1. Strukturierung von Inhalten

Einer der wichtigsten Methoden, um die Barrierefreiheit einer Webseite zu verbessern, ist eine klare Strukturierung der Inhalte. Dadurch können Nutzer Informationen leichter aufnehmen. Versuche also deine Inhalte logisch zu gruppieren und eine visuelle Hierarchie zu verwenden. Mit sinnvollen Überschriften kannst du die Inhalte deiner Seite in Abschnitte gliedern. 

Jede Seite deiner Webseite sollte eine H1-Überschrift als Hauptüberschrift besitzen. Danach kannst du deine Abschnitte mit H2, H3- und H4-Überschriften unterteilen. Durch diese Strukturierung fällt es auch Screenreadern leichter, Texte zu erfassen und sie zum Beispiel blinden Nutzern vorzulesen.

‍

2. Alt-Texte für Bilder

Alternativtexte oder Alt-Tags sind textliche Beschreibungen von Bildern. Sie werden von Screenreadern vorgelesen und ermöglichen so auch blinden oder sehbehinderten Nutzern den Zugang zu Websiteinhalten. Auch Suchmaschinen nutzen Alternativtexte, um Inhalte und Bilder einzuordnen. Achte also darauf, dass jedes Bild auf deiner Webseite einen passenden Alternativtext hat. Beschreibe dabei in einem kurzen Satz, was konkret auf dem Bild zu sehen ist.

‍

3. Richtige Farb- und Kontrastwahl

Die richtige Farbwahl im Webdesign hat einen hohen Einfluss auf die Lesbarkeit. Gerade Menschen mit Seh- oder Farbschwächen können Probleme haben, einen Text mit geringen Kontrast vom Hintergrund zu unterscheiden. Auch zu grelle Farben können Probleme beim lesen verursachen. Mit Tools wie Adobe Color kannst du die Farbkontraste deiner Webseite überprüfen.

‍

4. Beschreibung von Links

Bei Verlinkungen auf deiner Webseite sollte es klar sein, auf welche Seite sie führen. Mit einer genaue Beschreibung verstehen Nutzer genauer, wohin ein Link führt, bevor sie diesen klicken. Das erleichtert Personen mit kognitiven Beeinträchtigungen, das Navigieren auf der Webseite und verbessert die Usability. Vermeide also Allgemeine Begriffe wie „Mehr erfahren“. Nutze stattdessen „Mehr über das Thema XY erfahren“. Das gleiche gilt für die Website-Navigation. 

In dem Artikel: „Beispiele und Tipps für eine intuitive Website-Navigation“ findest du detailliertere Anleitung, wie du eine klare Navigation erstellst.

‍

5. Barrierefreie Formulare

Kontaktformulare auf deiner Webseite sollten ebenfalls so gestaltet sein, dass sie leicht bedienbar sind. Achte als erstes auf eine klare Beschriftung der Eingabefelder. Ebenso sollte das Label der Eingabefelder immer sichtbar sein. Als interaktives Element sollte es auch die Möglichkeit geben, die Eingabefelder per Tastatur anzusteuern. Wenn Nutzer ein Feld falsch ausfüllen, sollte es eine klare Meldung & Hinweise zur Fehlerbehebung geben. 

‍

6. Bedienbarkeit mit der Tastatur

Manche Nutzer haben Probleme, eine Maus zu bedienen. Webseiten können aber auch per Tastatur bedient werden. Das Hauptwerkzeug dafür ist die Tabulator-Taste. Mit ihr kann man zwischen verschiedenen Elementen springen und sie so fokussieren. Besonders hilfreich ist deshalb eine optische Veränderung der fokussierten Elemente. So kann ein Nutzer sehen, welches Element gerade angewählt ist und eine somit Interaktion auslösen.

‍

7. Videos mit Untertitel und Transkripte

Heutzutage sind auf Webseiten auch viele Videos zu finden. Damit auch gehörlose oder schwerhörige Nutzer die Videos erfassen können, sollten diese barrierefrei eingebunden sein. Mit Untertitel und Transkripte können die gesprochenen Worte oder Töne im Video textlich dargestellt werden.

‍

8. Teste die Barrierefreiheit deiner Webseite

Wie barrierefrei deine Webseite schon ist, kannst du mit verschiedenen Tools testen. Eines der bekanntesten Tools ist der WAVE-Web Accessibility-Evaluator. Das Tool prüft verschiedene Faktoren und identifiziert mögliche Probleme. Probier es am besten doch einfach mal aus.