July 19, 2021

Barrierefreiheit ist mehr als die „cherry on top“!

Ein Einstieg in die Barrierefreiheit

Wir haben heute eine kleine Challenge für dich! Du hast doch bestimmt gerade dein Smartphone griffbereit. Nimm es mal in die Hand und öffne den Homescreen. Schreibe jetzt diesen Text als Nachricht oder Notiz:

„Hey! Ich mache gerade diesen Test von NeverCodeAlone. Eine Nachricht zu schreiben, ist gar nicht so schwierig. 😂 “

Ging ganz gut von der Hand, oder? Jetzt Level 2: gehe zurück zum Homescreen und formuliere den Text mit geschlossenen Augen.

Stopp – probier’s erstmal aus, bevor du weiterliest…

• Wusstest du, wie du die App deiner Wahl startest?
• Hast du versucht blind zu schreiben oder die Sprachsteuerung benutzt?
• Wie viel von dem Text ist am Ende verständlich oder sogar fehlerfrei zu lesen?
• Wie würdest du die Fehler jetzt blind korrigieren?

Diese Situation ist für fast 350.000 Menschen in Deutschland Alltag. Sie haben eine eingeschränkte Sehkraft oder sind vollständig erblindet. Weitere 7,55 Millionen Menschen leben mit körperlichen oder kognitiven Einschränkungen. Die Nutzung von digitalen Produkten ist Alltag geworden – für all diese Menschen ist die Teilhabe allerdings schwieriger, als sie sein müsste. Denn Barrierefreiheit wird oft noch als Kirsche auf dem Kuchen verstanden. Etwas, was man ganz am Ende nach getaner Arbeit oben drauf steckt. Etwas, was man eigentlich auch weglassen kann…

Nicht für dich! Denn Accessibility und barrierefreie Angebote sind nicht nur die Aufgabe von UX-/UI-Designern, sondern liegen auch in der Verantwortung von Developern. Du weißt: Barrierefreiheit ist der Tortenboden – die Grundlage jedes digitalen Produkts. Und damit auch der Anfang deiner Arbeit. Ich habe euch heute ein Rezept mit drei Zutaten für einen geilen Accessibility-Teig mitgebracht. Und du kannst sie ab heute schon einsetzen…

(Das war’s auch jetzt mit der Torten-Metapher… versprochen!)

Mach die Texte lesbar!

Immer wieder setzen wir Schriften ein, die für Menschen schwer lesbar sind. Dabei ist es total einfach sich an die Empfehlungen zu halten.

1. Schriftarten unter 18,7 px sollten gefettet werden und einen Farbkontrast von mehr 4,5:1 haben.
2. Bei größeren Schriften sollst du mindest einen Farbkontrast von 3:1 haben.

Falls du Sketch nutzt, kannst du sogar den Color Contrast Analyser als Plugin einbinden. Für alle anderen gibt es auch unzählige Online-Tools.

Nutze das Keyboard zur Navigation

Viele Menschen müssen auf Grund ihrer Einschränkungen auf die Maus als Eingabegerät verzichten. Stattdessen nutzen sie die Tastatur, um von einem Element zum nächsten zu springen. Ihr könnt dies unterstützen, in dem ihr den Tabindex auf der Seite verwendet und euch klar macht, in welcher Reihenfolge der Inhalt durchlaufen werden soll.

Die Empfehlung ist, den Quelltext und Tabindex in Abhängigkeit zur visuellen Anordnung aufzubauen: also von oben nach unten zu ordnen.

Zeichne Überschriften sauber aus

Ich muss dir nicht erklären, wie Headlines ausgezeichnet werden… Was du jedoch wissen solltest: ein Screenreader durchläuft die Struktur, die du mit den Überschriften gegeben hast. Deswegen solltest du vier Aspekte beachten:

1. Es gibt nur eine <h1> pro Unterseite. Diese beschreibt, worum es auf der Seite geht.
2. Beachte den logischen Fluss: eine <h1> beinhaltet mehrere <h2>. Diese beinhaltet mehrere <h3> und so weiter…
3. Trenne deine strukturellen Überschriften von den Content-Headlines.
4. Wenn du Texte so stylst als wären sie Überschriften, müssen sie auch auch als Überschriften ausgezeichnet werden und in den logischen Fluss (s. Punkt 2) passen.

Was du sonst noch tun kannst…

• Die Lean DUS #24 mit Jan Hellbusch anschauen
• Deine Website selbst überprüfen

Wenn du heute nur eine Sache mitnimmst, dann bitte diese: Entwickler sind die ersten und letzten Personen, die Einfluss auf die Barriefreiheit von digitalen Angeboten haben. Setzt euch dafür ein, bereits in der Konzeption und Gestaltung Einfluss auf die Barrierefreiheit nehmen zu können. Denn sonst wird’s am Ende wieder nur die „Cherry on top!“