It’s fun to stay at the Y.M.C.A.
It’s fun to stay at the Y.M.C.A.
sing
Hast du die Melodie im Kopf? Gut.
Dann jetzt alle zusammen:
It’s fun to work with the WCAG
It’s fun to work with the WCAG
Was es mit digitaler Barrierefreiheit auf sich hat, habe ich in meinem ersten Blogbeitrag angerissen. Wenn du also ganz frisch in dem Thema bist, dann starte gerne dort:
Hier geht’s zum Blogbeitrag über digitale Barrierefreiheit
Dir liegt das Thema digitale Barrierefreiheit am Herzen und du möchtest deine nächste Website oder App nun barrierefrei bzw. barrierearm gestalten? Super! Dann bist du vielleicht schon über diese ominösen WCAG-Kriterien und Prüfschritte gestolpert – also im wahrsten Sinne des Wortes. Denn im ersten Moment wirken all diese Punkte die es zu beachten gibt wie Stolpersteine.
Die gute Nachricht:
Je öfter du den Pfad der barrierefreien Gestaltung gehst, desto weniger kommst du ins Stolpern und Straucheln.
Am Anfang denkst du dir vielleicht „Oh, wie soll ich mir denn all das merken?“ oder „Ich fühle mich in meinem kreativen Prozess jetzt total eingeengt wegen dieser kack Regeln!“ – trust me, das legt sich. Je öfter du mit den Prüfschritten im Hinterkopf deine Designs konzipierst und umsetzt, desto mehr gehen dir die Punkte in Fleisch und Blut über. Das ist kein Hexenwerk, also lass uns diese besagten WCAG-Kriterien zusammen entzaubern. Wir gehen dabei Schritt für Schritt vor, ok?
Ich schließe nun aus Gründen der Vereinfachung von mir auf dich: ich fühle mich von einem Wust an Informationen schnell überfordert und reagiere dann im schlimmsten Fall mit Unlust und Ablehnung. Mir hilft es enorm komplexe Themen in kleine Häppchen zu zerstückeln. Also her mit der Axt. Mein Pro-Tipp 🔥 im allerersten Schritt picke ich mir gerne die Punkte heraus, die mich am meisten ansprechen, um mein Interesse am Thema lebendig zu halten und mehr erfahren zu wollen.
Meine ersten Berührungspunkte mit Barrierefreiheit im digitalen Kontext hatte ich als Designerin, also starte ich meine a11y Basics mit den Punkten, die in der Gestaltung zum Tragen kommen.
A: Was kommt dir hier als erstes in den Sinn?
B: Farben? Kontraste? Und Typografie!
A: Genau!
Gute Gestaltung muss sichtbar sein, also tatsächlich gesehen und erkannt werden können. Das klingt logisch, oder? Es ist schon viel gewonnen wenn wir uns beim Gestalten immer wieder daran erinnern, dass es Menschen gibt mit:
- Sehbehinderungen
- Sehschwäche
- Farbfehlsichtigkeiten
- Leseschwierigkeiten
Farben und Kontraste
Das ist fast selbsterklärend. Damit Texte gut lesbar und grafische Elemente erkennbar sind, braucht es einen guten Kontrast. Was hierbei „gut“ heißt, ist in den WCAG-Kriterien festgelegt.
1.4.3 Kontraste von Texten
Text müssen einen Mindestkontrast zum Hintergrund haben:
- 4,5:1 (normaler Text)
- 3:1 (großer Text ab 18pt bzw. 14pt fett)
1.4.11 Kontraste von Grafiken und grafischen Bedienelementen
UI-Elemente (Formulare, Buttons, Icons, Grafiken, Fokus-Rahmen usw.) müssen sich mit mindestens 3:1 vom Hintergrund abheben.
Bekanntlich geht Probieren ja über Studieren. Wenn du jetzt also ganz fix ein Gefühl für gute Kontraste bekommen möchtest, kannst du zum Beispiel hiermit ein bisschen spielen: Color A11Y
Typografie
Dass Text groß genug sein müssen, damit man ihn gut lesen kann, versteht sich auch von selbst. Die WCAG geben hier keine feste Größe vor, weil das im Web sehr individuell ist: Auf welchem Gerät lese ich? Habe ich mir eine größere Standardschrift eingestellt oder zoome ich doll heran?
Hier ist es wichtig zu gewährleisten, dass der Text auch dann noch lesbar ist, wenn er bis zu 200 % vergrößert wird. Und zwar ohne horizontales Scrollen. So stehts in Kriterium 1.4.4
Dazu gehört laut Kriterium 1.4.12 auch, dass genügend Zeilen- und Absatzabstände vorhanden sind oder eingestellt werden können. Denn wer zum Beispiel Dyslexie (Leseschwierigkeit) hat oder mit einer Sehschwäche liest, braucht mehr „Luft“ zwischen den Zeilen. Empfohlen wird ein mindestens 1,5-facher Zeilenabstand.
Zum Schluss habe ich noch ein Guzerl für dich. Aus Gründen der Lesbarkeit, sollte auf reine Großbuchstaben in längeren Texten verzichtet werden. Das steht so zwar nicht in den WCAG-Kriterien, aber aus der Leseforschung weiß man: Großbuchstaben sind deutlich schwerer zu erfassen, weil die typischen Wortformen verloren gehen. Wir lesen Wörter nämlich nicht Buchstabe für Buchstabe, sondern wir erkennen Wörter an ihrer Form. Außerdem gibt es Schriftarten die besser lesbar sind als andere, aber dazu mehr beim nächsten Mal.
