Dazu gibt es in der FI ein definiertes Vorgehen, um die Anforderungen an die Barrierefreiheit bei der Entwicklung von Anfang an mitzudenken und umzusetzen. Das spiegelt sich auch in den sogenannten Accessibility-Tests wider, dazu später mehr.
Für die Entwicklung neuer Anwendungen setzt die FI auf ein Designsystem und einen Multikanal-Styleguide. Grundlegend dafür sind die Web Content Accessibility Guidelines (WCAG) und die Barrierefreie-Informationstechnik-Verordnung (BITV). Während es sich bei den WCAG um den internationalen Standard für digitale Barrierefreiheit handelt, stellt die BITV die Grundlage für die deutsche gesetzliche Umsetzung für digitale Barrierefreiheit dar.
Web Content Accessibility Guidelines (WCAG)
Webinhalte müssen laut WCAG nach vier Prinzipien gestaltet sein:
- Wahrnehmbarkeit: Inhalte müssen für alle erkennbar sein.
- Bedienbarkeit: Die Nutzung muss zum Beispiel auch ohne Maus möglich sein.
- Verständlichkeit: Die Struktur soll klar, die Sprache einfach sein.
- Robustheit: Die Anwendung funktioniert mit verschiedenen Geräten und Technologien.
Neben diesen Vorgaben sieht der Prozess in der FI auch regelmäßige Accessibility-Tests mit Menschen vor, die von visuellen, kognitiven, auditiven, motorischen oder sprachlichen Einschränkungen betroffen sind. Lesen Sie dazu auch das Interview mit Aytekin Demirbas, Mitarbeiter im Umsetzungsteam Barrierefreiheit von der Braunschweigischen Landessparkasse.
Anpassungen zur Barrierefreiheit in den Anwendungen der FI
Ein Blick auf die Änderungen des roten Farbtons der Sparkassen zeigt, welche umfangreichen Auswirkungen das BFSG konkret haben kann. Sparkassen nutzen das „Sparkassen-Rot“ als Farbmarke bereits seit 1972. Um den Kontrast vor weißem Hintergrund zu verbessern, wurde die Markenfarbe angepasst. Da die Farben technisch über ein Token-System abgebildet werden, war dies vergleichsweise einfach zu bewerkstelligen: Der Farbwert wird einmal geändert und die Änderung wirkt sich auf alle Anwendungen aus, die das Token-System nutzen.
Tokensystem
Die einzelnen Farbwerte sind in ein Tokensystem (aus dem englischen Wort token für „Zeichen“, „Marke“) integriert, was eine globale Anpassung dieser erleichtert. Hierfür werden die Farbwerte Farbpaletten zugewiesen. Diese Farbpaletten sind sogenannten Themes zugeordnet, um die Farbdarstellung ändern zu können (z. B. anderes Institut, hell, dunkel, kontrastreich). Tokens sind Farbnamen, denen institutsspezifische HEX-Werte zugeordnet sind. Ein Hex-Farbcode (hexadezimaler Code) ist eine sechsstellige Kombination aus Zahlen und Buchstaben, die im Webdesign verwendet wird. Er beschreibt exakt, wie sich eine Farbe aus den drei Grundfarben Rot, Grün und Blau (RGB) zusammensetzt.
Bei der Gestaltung von Klickflächen ist im wahrsten Sinne des Wortes mehr Fingerspitzengefühl gefragt. Sind die Abstände zu klein, kommt es beispielsweise bei der Nutzung im Bus, der über ein Schlagloch fährt, schnell zum ungewollten Klick. Von einer benutzerfreundlichen Gestaltung mit ausreichend großen Abständen profitieren daher alle Nutzerinnen und Nutzer, egal ob sie von permanenten, vorübergehenden oder situativen Einschränkungen betroffen sind.
Ist die Klickfläche kleiner als die Mindestgröße, müssen Abstände (hier in rot) gewährleistet sein.
In der Internet-Filiale (IF) wurde die mobile Navigation für die Barrierefreiheit angepasst. Sie kommt nun ohne horizontales Scrollen aus. Dafür wurde ein Menü hinzugefügt, mit dem sich alle Einträge ausklappen lassen. So wird gewährleistet, dass die Nutzerinnen und Nutzer nur in eine Richtung scrollen müssen. Auch Desktop-User der Internet-Filiale (IF) profitieren von der neuen Left-Hand-Navigation. Darunter versteht man ein vertikales Hauptmenü, das am linken Rand eines User-Interfaces oder einer Website platziert ist. Sie setzt auf Übersichtlichkeit und zeigt die hierarchische Struktur der Navigationseinträge deutlich auf – ein klarer Mehrwert für alle Userinnen und User.
Mit der Left-Hand-Navigation (neu) wird die hierarchische Struktur auf einen Blick sichtbar.
Auch „unter der Oberfläche“ einiger Anwendungen besteht Anpassungsbedarf. So wurden beispielsweise Alternativtexte (Alt-Texte) für informative Bilder und Grafiken hinterlegt. Sie machen Informationen aus Bildern für sehbehinderte oder blinde Menschen zugänglich. Nur mit sinnvoll belegten Alt-Texten können Screenreader die Inhalte auslesen. Rein dekorative Grafiken, wie zum Beispiel ein Einkaufswagen-Symbol, erhalten dabei bewusst keine Alt-Texte, um sehbehinderte Anwenderinnen und Anwender nicht zu verwirren. Für Menschen wiederum, die Lernschwierigkeiten haben, ist das Vorhandensein des Icons eine Erleichterung bei der Benutzung.
Beispiel Card Control: Rein dekorative Elemente erhalten keine Alternativtexte.
Dieses Beispiel zeigt, wie wichtig es ist, Inhalte und Anwendungen von Expertinnen und Experten im Bereich der digitalen Barrierefreiheit überprüfen zu lassen. Die Bedürfnisse der einzelnen User-Gruppen können bisher nicht oder nur unzureichend automatisch über Tools getestet werden.
Praxis schlägt Theorie
Dass der Teufel manchmal im Detail steckt, zeigt dieses Beispiel aus der Praxis. Sollen etwa sensible Daten wie eine Kartennummer nicht vollständig lesbar sein, werden sie maskiert. Dies geschieht durch die Anzeige der Buchstabenfolge XXX statt der Ziffern. Bei einem Test zusammen mit einer Person, die Screenreader nutzt, fiel auf, dass der Screenreader diese XXX als römische Zahlen ausliest. Somit wurde die Maskierung nicht erkannt und eine falsche Kartennummer ausgegeben. Durch diese Erfahrungen wächst das Verständnis, wie einzelne Nutzergruppen mit den digitalen Anwendungen der FI interagieren, und theoretische Annahmen können durch die Praxis bestätigt oder widerlegt werden. Von diesem stetig wachsenden Erfahrungswissen profitieren alle Folgeprojekte und vor allem die Nutzerinnen und Nutzer.
So funktioniert ein Screenreader
Screenreader übersetzen Bildschirminhalte für blinde und sehbehinderte Menschen, indem sie diese vorlesen und mit Hilfe einer sogenannten Braillezeile ausgeben. Die Brailleschrift ist ein Punktschriftsystem, das 1825 von Louis Braille für blinde und sehbehinderte Menschen entwickelt wurde. Dieses Schriftsystem ermöglicht das Lesen durch Tasten und Schreiben via Punktschriftmaschine oder über Braillezeilen am Computer. Kleine Stifte, die auf- und abfahren, machen den Text für die Fingerspitzen tastbar.
Podcast-Tipp: ON BOARD #14 Barrierefreiheit
Wer noch mehr über Barrierefreiheit erfahren möchte, wird im Podcast ON BOARD in der 14. Folge fündig. Podcast-Host Anja Bolle spricht mit Leandra Kettig. Sie ist UX-Designerin im Team der FI und berichtet über die Chancen und Hürden bei der Durchsetzung digitaler Barrierefreiheit.