Zwischenstopp in der Barrierefreiheit – Meilensteine der Maßnahmen 2021

Im Wesentlichen hat sich unsere Entwicklung auf zwei elementare Grundpfeiler der Barrierefreiheit fokussiert: Und zwar die Bedienbarkeit der WebApp mittels Tastatur bzw. den Verzicht auf die Maus sowie die Screenreader-Funktion. Sind alle Bedienelemente der WebApp mit der Tabulatortaste erreichbar? Ist deutlich sichtbar, welches Bedienelement gerade aktiv ist? Lassen sich „kleinere“ Bedienelemente ohne Probleme treffen? Und ist die gesamte Oberfläche mit hinterlegten Texten beschrieben, sodass ein Screenreader die Seite lückenlos vorlesen kann?

Hier finden Sie eine Zusammenfassung aller Arbeitsschritte der vergangenen sechs Monate:

Juli 2021

Tastaturbedienbarkeit der Start-, Login- und Registrierungsseite: Auf dem Weg zu einer barrierefreien App wurden die ersten Schritte geebnet, indem die Start-, Login- und Registrierungsseite tastaturbedienbar gemacht wurden. Auf diese Weise können sich User mittels Tab-Taste durch das Angebot navigieren. Sowohl motorisch eingeschränkte Nutzer als auch Screenreader-User sind darauf angewiesen, sich ohne Maus auf der Seite zu bewegen. Dafür wurden einzelne Elemente hierarchisch neu angeordnet, umstrukturiert und Buttons bzw. Navigationselemente haben einen visuellen Fokus bekommen.

August 2021

Screenreader-Lesbarkeit der Startseite: Den nächsten Meilenstein auf den Weg zur Barrierefreiheit nimmt die Startseite unserer WebApp, indem blinde bzw. seheingeschränkte User durch ihren Screenreader die Seite „sehen“ können. Der Screenreader liest dem Nutzer die Startseite so vor, dass dieser Texte, Bereiche und Schaltflächen, wie Navigationselemente und Buttons, unterscheiden kann.

September 2021

Screenreader-Lesbarkeit der Registrierungsseite: Im September folgt die Lesbarkeit der Registrierungsseite durch den Screenreader. Blinde bzw. seheingeschränkte User werden in die Lage versetzt, sich zu registrieren und durch die Registrierungsseite zu navigieren. Mittels Sprachausgabe ist es nun auch möglich, Elemente wie Inputfelder, Checkboxen, Texte und Links zu „sehen“.

Oktober 2021

Klickbereiche der Registrierungsseite: Die Benutzeroberfläche ist einfacher zu verwenden, wenn Steuerungselemente enthalten sind, die leichter zu sehen und zu tippen sind. Deshalb wurden auf der Registrierungsseite Klickbereiche zu den jeweiligen Checkboxen definiert, die die Treffsicherheit erhöhen. Links, die sich innerhalb der Texte befinden, sind weiterhin benutzbar und führen zum gewünschten Ziel.

Komponente Inputfeld der Registrierungsseite: Die Neuausrichtung der Komponenten-Architektur wurde für die Inputfelder umgesetzt. Die Texte bekommen eine neue Schriftgröße und anstatt mit festen Pixeln wird mit der flexibleren Einheit REM gearbeitet. Hierzu ein kurzer Exkurs ins Webdesign: REM ist eine relative Einheit, die sich auf die Root-Schriftgröße bezieht, ein wenig vergleichbar mit Prozentangaben. Alle Elemente beziehen sich auf eine Standardgröße von beispielsweise 16px = 1rem, so entspricht die Überschrift H1 = 48px = 3rem. Für alle, die folglich darauf angewiesen sind, die Grundschriftgröße zu ändern, indem sie den Text zoomen, wird der gesamte Text proportional skaliert, ohne dadurch die Harmonie oder Hierarchie des Schriftbildes zu beeinträchtigen.

November 2021

Komponente Checkbox der Registrierungsseite: Motorisch eingeschränkte Personen können mitunter Probleme haben, die Box einer Checkbox genau zu treffen. Deshalb wurde zudem der Beschreibungstext klickbar gemacht. Die visuelle Markierung der fokussierten Checkbox wird zudem nochmal deutlicher hervorgehoben. Außerdem haben die Labels der Checkboxen eine neue Schriftgröße erhalten und alle Abstände sowie Größen der Registrierungsseite wurden entsprechend angepasst.

Dezember 2021

Bug-Fixing und Style Korrekturen: Durch die Umbaumaßnahmen und das intensivere Testen sind uns Bugs aufgefallen, deren Fehlerbehebung zum Jahresende im Vordergrund standen. So konnten sowohl visuelle Anpassungen und Korrekturen in der Darstellung auf dem Smartphone vorgenommen als auch der Feinschliff am Styling, wie der Verzicht auf Hover-Effekte bei Checkboxen, vorangebracht werden.