Accessibility für Designer

Ein Design barrierefrei starten

Die Zugänglichkeit oder Barrierefreiheit von Anfang an zu beachten, ist besser als das Design nachträglich darauf zu überprüfen. Es hilft dabei, die große Bandbreite der Leute zu berücksichtigen, die die Produkte und Services nutzen.

In diesem Blog-Artikel geht es um die 3 Schritte, mit denen man mit einem zugänglichen Design starten kann.

„Shifting left“ ist das Stichwort: die Zugänglichkeit/Barrierrefreiheit sollte in Projekten so weit nach vorne geschoben werden wie möglich. Indem schon das Design auf Barrierefreiheit untersucht wird, können vor dem Start der Entwicklung Dinge aufgedeckt werden, die ansonsten übersehen würden.

Designs einer Barrierefreiheits-Prüfung zu unterziehen hilft Designern, barrierefreier zu denken und Entwicklern, barrierefreier zu implementieren.

Es ist hilfreich, wenn schon der Designer kommentiert, was man auf einer Seite semantisch und barrierefrei erreichen will (wenn das verwendete Programm Kommentare zulässt, sollte das genutzt werden, ansonsten sollte es auf anderem Weg kommuniziert werden. Das wichtigste ist, klar und eindeutig zu sein.)

Viele Design-Aspekte sind wichtig

Beim Design gibt es viele Aspekte, die die Barrierefreiheit betreffen, zum Beispiel im Hinblick auf Farben und Kontraste. Sind die Helligkeitskontraste von Schriften und Bedienelementen ausreichend? Hierzu gibt es konkrete Vorgaben durch die WCAG.

Können auch farbfehlsichtige Menschen die Seite wahrnehmen? Sind z.B. Links im Fließtext oder ausgewählte Menüoptionen neben einem Farbwechsel zusätzlich hervorgehoben? 

Denken Sie außerdem daran, nicht nur den Mausfokus, sondern auch  die Fokushervorhebung bei Tastaturbedienung zu gestalten. Die Entwickler setzen das um, was Sie hier vorgeben. Eine gute Hervorhebung ist die Voraussetzung, dass sich Tastaturnutzer bei der Navigation orientieren können.

Quelle: Barrierefreiheit in den Workflow einbinden (öffnet neuen Browser-Tab)

Überblick: Aspekte der Barrierefreiheit, die bereits in der Designphase relevant sind, beinhalten:

• Struktur und Navigation
• Farben und Kontraste (auch für funktionale Grafiken)
• Alpha-Transparenz (in Verbindung mit Text und wechselnden Hintergründen)
• Schriftgrößen (Schriftvergrößerung)
• Schriftarten und Schriftauszeichnung (Lesbarkeit)
• Pseudoklassen :hover, :focus, :active (Tastatursteuerung)
• Reihenfolge der Inhalte (auf verschiedenen Endgeräten)
• (Übersprung-)Navigations-Mechanismen & Brotkrumenpfad
• Slider (Besonderheit zeitgesteuerter Inhalte)
• Bilder mit Bildunterschriften, Überschriften und umgebenden Text (und dessen Bedeutung für Alternativtexte)
• Formulare und Fehlermeldungen
• HTML5 Semantik (vorausgedacht)

aus: Accessibility Design Screenguide (pdf, öffnet neuen Browser-Tab) von Anatom5

Leitfaden:

• Seitentitel: Ist der Seitentitel einmalig, und über dem Hauptinhalt? Beschreibt er knapp und präzise den Seiteninhalt?
• Immer eine Top Level Headline (h1) vorsehen auf jeder Seite
• Überschriften-Hierarchie muss passen (keine h4 vor einer h2 z. B.). Werden Überschriften dazu verwendet, Inhalte auf logische Art und Weise aufzuteilen? Kann ein User den Content überfliegen, indem er die Headlines scannt? Haben wichtige Sektionen Überschriften? Ist Text einfach nur groß und ohne verwandten Content darunter? -> Mache Inhalte scanbar durch das Benutzen von Überschriften.
• Link-Kennzeichnung: Links dürfen nicht nur durch Farbänderung gekennzeichnet sein. Sie müssen mindestens ein weiteres Merkmal haben (Fett, mit Icon, unterstrichen, andere Schriftart….)
• Sagt jeder Link aus, wohn er verweist, wo es hingeht, wenn man ihn klickt? Beschreibt jeder Button deutlich, was er auslöst?
• Wo Links oder Buttons denselben Text auf einer Seite haben, wird ein längerer zugänglicher (barrierefreier) Text mit angegeben? Z. B.: Statt „Details ansehen“ -> „Details zu Thema sounso ansehen“
• Farbkontrast: Hintergrund- und Vordergrundfarben brauchen einen ausreichenden Farbkontrast zueinander
• Kein Text auf Bildern: Also nicht reingerendert. Als HTML-Text ist es ok.
• Habe alle Bilder (auch Icons) eine Text-Alternative über das alt Attribut? (Weiterführender Link dazu und was ein guter alt-Text ist)
• Wenn das Bild dekorativ ist, ist es auch so ausgezeichnet (leeres alt Attribut: alt=““). Ist es sicher nur dekorativ?
• Formulare: Absende Button nötig, Input-Felder sollten labels haben (geht aber auch ohne, aber dann muss man beim Entwickeln mit aria-label arbeiten). Dies ist ein guter Artikel zum Design von Formlaren auf der Website der Aktion Mensch. Auch hier im Blog haben wir einige Infos zu Formularen, auf der Seite „Accessibility für Entwickler“ – von denen die meisten auch für das Design gelten. Bitte lesen!
• Wenn der Name eines Formular-Elementes nicht sichtbar ist, wird er in einem Kommentar erwähnt?
• Haben gruppierte Formular-Elemente einen Namen (z. B. Multiple Choice Fragen)? Der Name sollte Kontext für die individuellen Fragen in der Gruppe geben. Hier ein Artikel mit 2 Beispiel Herangehensweisen.
• Handelt es sich um Standard-Komponenten (z. B. select, radio, checkbox) sofern möglich? Wenn nicht, könnte man einen Standard-Komponente verwenden?
• Sind Fehlermeldungen klar und hilfreich? Sagen die Meldungen was schief gelaufen ist und wie man es richtig macht? Wird der Fehler nicht nur über Farbe gekennzeichnet?
• Checklist Design: Eine gute Seite, auf der man nach Elementen sortiert Checklisten findet, die man abhaken kann: Checklist Design – A collection of the best design practices

Designe für alle!

Zugänglichkeit (Barrierefreiheit) ist kein Hindernis für Innovation. Man sollte die Richtlinien so verinnerlichen, wie man das mit jeder andere Auflage, Regel oder Restriktion im Bereich Design tut. Sie sind ein Teil der Herausforderung, etwas Tolles zu schaffen, und als Chance to sehen, neue Ideen zu entwickeln, die am Ende zu einem besseren Produkt für alle Nutzer führen.

Designe für das diverse Publikum, das mit deinen Produkten (Websites) interagiert.

1. Zugänglichkeit ist keine Barriere für Innovartion.
2. Nutze Farbe nicht als einzigen visuellen Weg um Informationen zu vermitteln.
3. Stelle sicher, dass zwischen Text und Hintergrund genug Kontrast ist.
4. Biete einen guten visuelllen Fokus-Indikator für Tastatur-Fokus.
5. Sei sorgfältig bei Formularen.
6. Vermeide Identitäts-Krisen bei Komponenten (hier geht es um Design-Pattern, die eine bestimmte HTML-Semantik haben, deren Tastatur-Verhalten und dem Benutzen der ARIA-Attribute)
7. Zwinge die Nutzer nicht zum Hovern um Dinge zu finden.

Mehr dazu und ausführliche Informationen im sehr guten Artikel 7 Things Every Designer Needs to Know about Accessibility. Der Artikel kann auch als pdf heruntergeladen werden.

Wichtige Punkte, die im Bereich Design beachtet werden müssen:

Kontrast, Farben, Struktur (Überschriften und Landmarks wie Header, Main, Footer), Sprache, Text-Ausrichtung, Großschreibung, Bilder, Icons, Linktext, Link Aussehen, Fokus, Button vs. Link

Auf der Website A11y-1010.com findet man einen guten Guide zum Einstieg ins Thema.

Warum hinterher fixen, wenn man es gleich richtig machen kann?

Viele Webseiten wurden nicht mit Barrierefreiheit im Kopf designed und entwickelt und Designer denken oft, dass „Zugänglichkeit der Job von Entwickler-Team ist“. Das macht es schwierig, hinterher etwas zu korrigieren und deshalb muss das Bewusstsein für Barrierefreiehit früher ins Projekt gebracht werden. Gute Leitlinien und Dokumentation helfen dabei, Probleme mit der Barrierefreiheit früh im Projekt zu identifizieren und anzugehen. So wird Barrierefreiheit zu einem Teil des normalen Design- und Entwicklungs-Prozesses.

Im Artikel „A Designer’s Guide to Documenting Accessibility & User Interactions“ von Stéphanie Walter geht es sehr ausführlich darum, wie man als Designer für Barrierefreiheit dokumentieren kann und was man alles beachten sollte.

Es git auch ein YouTube-Video zu einem Talk auf der Inclusive Design 24 conference, der die Grundlage zu dem Artikel war.

Inclusive Design Principles

Lerne die inklusiven Design Prinzipien kennen. Sie gelten für uns alle: für Menschen mit dauerhaften, zeitlich beschränkten, der Situation geschuldeten oder sich ändernden Einschränkungen. Mit Postern zum an die Wand hängen! 🙂

Zugänglichkeit als Designer dokumentieren

Für die Umsetzung des Designs ist es sehr hilfreich, wenn Aspekte zur Zugänglichkeit/Barrierefreiheit im Design dokumentiert werden.

Wenn man sich früh im Design-Prozess mit den Entwicklern in Bereichen wie Tastatur-Verhalten, Labels und Semantik sowie Hierachien austauscht, verbessert das die Zugänglichkeit der Website. Es hilft auch den Designern, im Umgang mit Barrierefreiheit sicherer zu werden und mehr an Szenarien zu denken, die eventuelle Einschränkungen der Nutzer einschließen.

Guidelines sind:

• Generell: Tastatur-Verhalten definieren und semantische Labels spezifieren
• Alle interaktiven Elemente müssen per Tastatur erreichbar sein, die Reihenfolge muss Sinn machen und konsistent sein. Man sollte bewerten, ob sich die Benutzung insgesamt stimmig anfühlt. Hat man irgendwelche besonderen Elemente auf der Seite, sollten hierfür das Tastaturverhalten dokumentiert werden
• Die Labels sind für assistive Techologien wichtig. Es muss klar sein, was das Element ist und wie damit interagiert werden kann. Dokumentiert werden kann, indem man jedes Element der Seite vornimmt und festhält: Was ist es (Typ)? Wie heißt es (Label)? Hat es andere Eigenschaften, die wichtig zu verstehen sind (Status und Werte)?

Quelle: How to document accessibility as a UX designer

Weitere Tipps

SVGs aus Illustrator in SVG-HTML-Tag – Wiederholte IDs

Beim Exportieren von svgs aus Illustrator müssen die IDs (die aus Layers/Ebenen-Namen generiert werden) in einem Editor überprüft werden. Hintergrund: IDs dürfen nicht wiederholen, sie müssen einzigartig bleiben.

Anlegen und Testen von barrierefreien SVGs: Making and Testing an Accessible SVG

Kontrast-Checker

PolyPane Contrast Checker (Kontrast Checker mit Vorschlägen)

Überprüft und checkt Farben auf das vom WCAG geforderten Kontrast-Verhältnis.

Color contrast checker

Kontrast Checker von Deque

Hier ist ein Tool zum Ermitteln des Farbkontrasts (das Verhältnis unterscheidet sich auch in kleinem und großem Text)

Text elements must have sufficient color contrast against the background (Deque)

Sonstige Links

WAI (Web Accessibility Initiative) – Ressources for Designers

Ein guter Startpunkt, um sich mit barrierefreiem Designen zu beschäftigen, inbesondere diese Seite: Tips for Getting Started Designing for Web Accessibility

Accessibility Poster Set (deutsch, pdf)