Web Accessibility hat für mich leider zu Beginn meiner Design-Karriere keine Rolle gespielt. Als ich meinen Vorgesetzten auf das Thema ansprach, reagiert er wie folgt: „Erst will ich eine gute Usability garantieren und dann würde ich mich vielleicht um Barrierefreiheit kümmern. Aktuell hat das keine Prio für mich.” Er schien also indirekt davon auszugehen, dass unsere Nutzer nicht davon betroffen seien, Accessibility und Usability zwei separate Felder seien und eine barrierefreie Webseite etwas sei, dass man später, separat angehen könne.
Doch warum wird Accessibility im Web so oft vernachlässigt? Vermutlich denken viele Nicht-Betroffene schlichtweg nicht daran. Liegt es am gängigen Vorurteil, dass Menschen mit Behinderungen das Web nicht nutzen? Das Gegenteil ist der Fall. Barrierefreiheit nutzt allen Menschen und gehört zu einer guten Usability.
Was ist Barrierefreiheit im Web?
Das Ziel von Barrierefreiheit im Web ist es möglichst vielen Menschen die Teilhabe an digitalem Content und Applikationen zu ermöglichen. Also auch Menschen mit visuellen, motorischen, auditorischen, sprachlichen und kognitiven Behinderungen. Es ist eine Form der Inklusion.
In unserer physischen Welt haben wir bereits verstanden, dass ein inklusives Design, das mehr Menschen Zugang ermöglicht, den kommerziellen Anreiz erhöht. Leider ist dies im Web noch nicht der Fall.
Warum ist digitale Barrierefreiheit wichtig für alle?
Als Designer haben wir die Verantwortung sicherzustellen, dass jeder Zugang zu dem hat was wir kreieren, unabhängig von Fähigkeiten, Kontext und Situationen. Das Tolle ist, dass ein inklusives Design die User Experience für alle verbessert.
Oft vergessen wird auch, dass nahezu jeder Mensch irgendeine Form von Einschränkung hat und die meisten Behinderungen nicht angeboren sind. Die Spannweite ist enorm und reicht von einer leichten Sehschwäche über Lese-Schreib- oder Rechenschwäche zu chronischen Schmerzen, Farbenblindheit, Autismus oder ADHS. Manche Menschen sind auch nur temporär eingeschränkt, z.B. aufgrund einer Operation oder Therapie.
Barrierefreiheit ist also wichtig für alle Menschen, egal ob alt oder jung oder temporär eingeschränkt. Texte in Leichter Sprache nützen beispielsweise nicht nur Menschen mit Lernschwierigkeiten, sondern auch Menschen die eine fremde Sprache wenig oder kaum beherrschen. Wenn dir Barrierefreiheit egal ist, schließt du viele Menschen kategorisch aus.
Auch Menschen mit Behinderungen haben Interessen und möchten vielleicht deine Software benutzen, das Spiel spielen das du entwickelst oder deine Webseite besuchen.
Du kannst nicht davon ausgehen, dass deine Zielgruppe keine Behinderungen hat.
Studien haben ergeben, dass barrierefreie Webseite bessere Suchergebnisse erzielen, SEO-freundlich sind, schnellere Ladezeiten haben und im Allgemeinen eine bessere Usability aufweisen. (https://webaim.org/blog/web-accessibility-and-seo/)
Was kann ich als Designer tun?
Biete Alternativen an
Bei einer barrierefreien Gestaltung geht es meist darum Alternativen anzubieten. Gib deinen Usern zum Beispiel die Möglichkeit Werte nicht nur über einen Slider sondern auch durch ein simples Eingabefeld anzugeben.
Farben
Achte auf ausreichende Farbkontraste
Gute Farbkontraste zwischen Text und Hintergrund sind für einen barrierefreien Content essentiell. Zu geringe Kontraste schränken die Lesbarkeit stark ein. Dies gilt übrigens nicht nur für User mit Sehbehinderung, sondern z.B. auch wenn Sonnenlicht auf dem Bildschirm reflektiert.
Hier findest du zwei Beispiele die die Kontrast Guidelines in den Web Content Accessibility Guidelines (WCAG) nicht erfüllen:
Leider scheinen kontrastarme Texte im Trend zu liegen, denn nicht nur Dribbble ist voll davon sondern auch sehr viele Webseiten.
Nach den WCAG Guidelines sollte Text zumindest ein Konformitäts-Level von AA erfüllen. Dabei gilt: Dickere Schriften sind auch bei geringerem Kontrast besser lesbar als dünne. Kontraste kannst du hier checken: https://webaim.org/resources/contrastchecker/
Verlasse dich nicht nur auf Farben
Du solltest Farben nicht als einziges Mittel verwenden, um bestimmte Bedeutungen zu vermitteln. Menschen mit geringer Sehschärfe oder Farbblindheit können diese Bedeutungen sonst nicht nachvollziehen. Versuche einen zusätzlichen Indikator zu verwenden, wie z.B. Text Labels. Oft werden ausgefüllte Formularfelder daher noch mit einem Häkchen oder einem x versehen.
Das Problem existiert sehr häufig bei Links, die genauso aussehen wie der restliche Text und lediglich eine andere Schriftfarbe aufweisen.
Hier findest du ein paar Beispiele, wie man Links barrierefrei gestalten kann:
Nutze Labels oder Instruktionen in Formular- und Inputfeldern
Ein häufiger Fehler bei der Gestaltung von Formularfeldern ist die Verwendung von Placeholder-Texten. Warum? Sie sind oft aufgrund eines geringen Kontrasts schlecht lesbar.
Zudem verschwindet der Text sobald man in das Feld klickt, was dazu führen kann, dass man den Kontext vergisst. Menschen die Screenreader nutzen navigieren normalerweise mit der Tab-Taste. Leider überspringt diese Formularelemente ohne Labels, was bei Placeholder Text der Fall ist.
Wenn ein Designer Beschreibungen wie Labels zugunsten eines simplen Designs einfach weglässt, fehlen dem User wichtige Informationen zur Erfüllung seiner Aufgabe.
Fazit
Dies sind natürlich nur einige Beispiele, auf die du als Designer achten solltest. Du kannst auch in deinem Team helfen ein Bewusstsein für Accessibility zu schaffen. Empfehle deinen Entwickler-Kollegen beispielsweise die Verwendung von Siteimprove für Chrome. Vergiss nicht, dass für ein barrierefreies Web Produkt alle zusammenarbeiten müssen. Zudem ist das alles viel weniger Arbeit als es scheint und auch schon kleine Verbesserungen können viel bewirken. Also, gestalte deine digitalen Produkte so, dass möglichst alle etwas davon haben.
Quellen
- https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
- Titelbild von Ryoji Iwata auf Unsplash