Inklusives Design – Barrierefreiheit Richtlinien für Designer

Design für alle, Universal Design, Inklusive Design, Barrierefreies Design
… alle diese Begriffe können so interpretiert werden, dass die Designer an ALLE Menschen denken, und ihre Bedürfnisse berücksichtigen, egal welches Alter, Geschlecht, Herkunft, Beeinträchtigung (permanent, temporär oder situativ) sowie in welchen Kontext (physisch und sozial) sie sich befinden.

Solche Konzepte mit so großen Ansprüchen sind manchmal schwer in der Praxis zu konkretisieren. Das werden wir in diesem Artikeln versuchen.

Frühzeitig die übergeordnete Überschriften-Struktur der Seite planen

Überschriften beschreiben das Thema oder den Zweck der Seite und müssen einer logischen Hierarchie folgen. Jede Webseite hat nur eine H1 (Überschrift 1), die Hierarchie geht vom Header 1 bis Header 6.

Eine abweichende graphische Darstellung der jeweiligen Überschrift ist möglich, wenn es keine Probleme der Lesbarkeit verursacht. Die graphische Darstellung der Überschrift muss aber konsistent und wiedererkennbar bleiben.

z.B. H1 < H2 < H3-H3-< H3-H4 > < H3 <H4-H5>>> <H2>

Falsch: H1 < H3 <H2-H3>> <H2 < H4-H3>>

Leserichtung berücksichtigen

Die Leserichtung sollte der visuellen Ordnung entsprechen. (UX) Designer entscheiden über die Leserichtung, z.B. horizontal vs. vertikal.

 

 

 

Designer können durch die Darstellung der Leserichtung Entwicklern bei der Implementierung der Tastatursteuerung unterstützen. Beide Beispiele können auf verschiedene Weise implementiert werden:

 

 

 

 

Einen gutes Kontrastverhältnis bieten

Die Inhalte sollten leicht wahrgenommen werden können und die Unterscheidung zwischen Vorder- und Hintergrund sollte leicht sein.

Nicht nur unter optimalen (kontrollierten) Bedingungen, sondern auch in verschiedenen Nutzungskontexten muss ein ausreichender Farbkontrast berücksichtigt werden, z.B. Bildschirm in der Sonne, Auflösung/Größe des Bildschirmes, alte Monitore, etc.

Die Wahrnehmung des Inhalts und die Unterscheidung zwischen Vorder- und Hintergrund sollte so weit wie möglich erleichtert werden.

Diese Ressourcen können hilfreich sein:

• Minimum Kontrast WCAG – BITV
• Kontrast Checker plugin für Sketch (auf Enlisch)
• Web AIM Kontrast checker (auf Enlisch)
• Mozilla WCAG Contrast checker
• Google Developer Guidelines for Accessible Styles (auf Englisch)

Reinen Text verwenden, wo immer dies möglich ist

Statt Texte in form von Bildern auszugeben, sollte reiner Text genutzt werden. So kann der Text verkleinert und vergrößert werden (Responsivität), dazu lädt er schneller und ist einfacher zu übersetzen. Reine Texte können auch von Screenreadern einfach vorgelesen werden. Es müssen keine zusätzlichen alternative Texte für die Bildern hinterlegt werden.

Bei der Verwendung von GROSSBUCHSTABEN aufpassen

REINE GROSSBUSCHABEN SIND VIEL SCHWIERIGER UND LANGSAMER ZU LESEN.

Dazu können Sätze aus Großbuchstaben falsch von Screenreadern vorgelesen werden.

Die Beachtung der Groß- und Kleinschreibung ist außerdem notwendig, um den Inhalt des Textes korrekt wiederzugeben.

Beispiele:

• Die Spinnen vs. die spinnen
• die Nackte sucht vs. die nackte Sucht
• er wäre nur Dichter vs. er wäre nur dichter

Eine angemessene Schriftgröße benutzen

16 Pixel (12 PT) ist der minimale Standard. Die gewählte Schriftart ist natürlich auch wichtig, da manche Schriftarten schwieriger zu lesen sind.

Die Empfehlung dazu wäre den Text je nach Bildschirmgröße anzupassen (Responsive Design) und Schrift in der Programmierung nicht in Pixel anzugeben.

An die Zeilenlänge denken

Zu lange Textzeilen lassen sich nur mühsam lesen. Heutzutage werden vielerorts riesige Monitore verwendet, was zur Darstellung sehr langer Zeilen führen kann. Dies muss berücksichtigt werden, da unsere Zielgruppe sonst den Kopf viel zu viel bewegen muss und viel mehr Zeit braucht, um die gleichen Inhalte zu lesen.

Best Practice sind 80 Buchstaben pro Zeile.

Sicherstellen, dass Hyperlinks wahrnehmbar sind

Links – oder Hyperlinks – müssen sich leicht vom Text unterscheiden lassen, ohne dass man mit der Maus oder Tastatur navigiert. Das am besten etablierte Merkmal hierfür ist unterstrichener Text.

Erkennungsmerkmale für wichtige Hyperlinks gestalten

Tastatur-Benutzer sollten auch visuell einen fokussierten Hyperlink identifizieren können. Hier ist das Focus:0 Problem besonders relevant. Entwickler und Designer müssen die Fokus Styles berücksichtigen, statt diese einfach zu löschen, damit die Tastaturbenutzer die Seite auch bedienen können. Hier kann man ein Beispiel für unterschiedliche Fokus Styles finden.

Einen „Skip to Main Content“-Hyperlink erstellen

Für Tastatur-Benutzer sollte sich ein Link für einen Sprung in die Navigation oben auf der Seite befinden. Wir können diesen Link vor Maus-Benutzern verstecken, er sollte aber bei der Verwendung der Tastatur-Navigation wieder sichtbar sein.

Sicherstellen, dass die Hyperlinks für sich genommen Sinn machen

Wir müssen Sätze wie „Hier klicken“, „Hier“, „Mehr“, „Mehr Informationen“, „Weiterlesen“ und „Weiter“ vermeiden. Ein guter Trick ist hier, den Titel des Ziels für den Link-Text zu benutzen: z.B. Arbeitskreis Barrierefreiheit der German UPA besuchen.

Animationen, Videos und Audiokommentare maßvoll benutzen

Bei Animationen, Videos und Audiokommentaren müssen wir vorsichtig sein: ein Play/Pause -Button sollte man anbieten, damit die „langsamen Benutzer“ mit ihrem Rhythmus unsere Seite nutzen können.

Wenn man Audio-Elemente anbietet, sollte man an die Textalternative für Gehörlose denken (oder für alle, die ihre Kopfhörer in der U-Bahn vergessen haben).

Blinkenden oder blitzende Inhalte sollte man immer vermeiden: Diese können zu Anfällen führen (Stichwort: Epilepsie).

Sich nicht nur auf die farbliche Gestaltung  verlassen

wie bei z.B. Ampeln-ähnlichen Icons oder Fehlermeldungen:

 

 

 

 

 

 

 

Bild 1 besteht erstens nicht den Kontrasttest für Farbenblinde und bietet zweitens keinen alternativen Weg, die Bedeutung des Icons zu erahnen.

Bild 2 spielt mit Kontrasten und Inhalten: dunkler Hintergrund mit hellen Buchstaben, heller Hintergrund mit dunkleren Buchstaben, und heller Hintergrund mit Rand und Buchstaben in dunkler Farbe. Leider bietet aber ein Buchstabe nicht genug Informationen, ein Tooltip wie in Bild 3 wäre notwendig.

Bild 4 verfügt über einen Text (Hoch, Mittel, Niedrig), der ohne Zweifel erklärt worum es geht; das farbige Icon ist nur begleitend.

 

Bei Fehlermeldungen ist nur eine Farbänderung ebenfalls nicht ausreichend, stattdessen muss ein extra Hinweis angezeigt werden, wie z.B. ein Text mit einer Erklärung des Fehlers:

vs

 Zugängliche Steuerelemente für Formulare gestalten

Steuerelemente für Formulare sollten über aussagekräftige Beschreibungen und Anweisungen verfügen.

Die Beschriftungen (Labels) sollten verständlich sein. Wenn spezielle Fachbegriffe notwendig sind, sollte eine alternative Erklärung zur Verfügung stehen.

Fehlermeldungen beim Ausfüllen des Formulars sollten genau erklären, worin genau das Problem besteht und die Fehlerbehebung unterstützen.

Beispiele: „Bitte E-Mail-Format überprüfen“, „Bitte eine Zahl eingeben“, „Bitte Datum Format dd.mm.jjjj berücksichtigen“, etc.