FONIC Innovation durch Barrierefreiheit

Motivation

„Barrierefreiheit im Web betrifft nur wenige User“ ist eine verbreitete Annahme. Dabei leben laut Zahlen der WHO rund 15 % der Bevölkerung mit einer Einschränkung und sind so auf barrierefreie Webinhalten angewiesen oder profitieren stark davon. Dazu gehören Menschen mit dauerhaften Einschränkungen, aber auch Menschen mit temporären oder situationsbedingten Beeinträchtigungen wie einem gebrochenen Arm, einer verlorenen Brille, geminderter Konzentrationsfähigkeit durch Kinderbetreuung zu Hause, oder grelles Sonnenlicht beim Arbeiten im Garten. Spätestens im Alter bleiben die wenigsten von einer Verschlechterung des Seh- und Hörvermögens sowie der Beweglichkeit verschont.

Hinzu kommen Gesetze, wie der European Accessibility Act, die vorschreiben, dass Produkte und Dienstleistungen, einschließlich digitaler Angebote, ab dem 28. Juni 2025 barrierefrei angeboten werden müssen.

Für FONIC gab es damit neben dem Nutzen für Kund:innen auch konkrete rechtliche Verpflichtungen, eine barrierefreie Lösung zu entwickeln.

Positive Synergieeffekte

Ein Nebeneffekt der angestrebten Accessibility-Maßnahmen ist, dass sich die Qualität der Web-Inhalte nicht nur für die User verbessert, sondern sich auch positiv auf das Suchmaschinen-Ranking auswirkt. Viele Accessibility-Maßnahmen, wie eine korrekte Überschriften-Reihenfolge, Responsive Design, aussagekräftige Alternativtexte, sprechende Labels und Beschreibungen, gehen Hand in Hand mit SEO-Maßnahmen (Search Engine Optimizations).

Umsetzung

Um das Kundenportal für alle Nutzer:innen zugänglicher zu machen und kommenden Gesetzesänderungen Rechnung zu tragen, haben inovex und FONIC das Portal nach den vier Prinzipien der Accessibility umgebaut. Das FONIC-Portal musste wahrnehmbar (perceivable), bedienbar (operable), verständlich (understandable) und robust (POUR) werden.

Im Projekt wurde zunächst abgewogen, welche Änderungen sich leicht implementieren lassen und mit wenig Aufwand große Auswirkungen haben. Im Anschluss an diese „Quick Wins“ wurden dann die aufwändigeren Verbesserungen umgesetzt.

Eine wesentliche Herausforderung des Projekts war die Abhängigkeit von verschiedenen Drittanbietern für Consent Management und Trusted Shops. Hier muss sichergestellt sein, dass die UI-Elemente der Dienste barrierefrei zu bedienen sind. Einige Anbieter haben bereits auf Anfrage barrierefreie Varianten zur Verfügung gestellt; andere UI-Elemente hat inovex durch eigene Lösungen ersetzen müssen.

Für eine Zwischenevaluierung hat inovex den BITV-Test von BIK eingesetzt. Das umfangreiche Accessibility-Audit involviert auch betroffene User und offenbart letzte Barrieren, die es noch zu beseitigen gilt.

Um sicherzustellen, dass das FONIC-Portal auch in Zukunft barrierefrei bleibt, auch bei der Umsetzung neuer Anforderungen und Features, hat inovex Web-Accessibility-Praktiken fest im Entwicklungsprozess bei FONIC verankert. Automatisierte Accessibility-UI-Tests mit einer Kombination aus Cypress und Testing Library sorgen dafür, dass Features wie eine reibungslose Tastaturnavigation langfristig erhalten bleiben.

Das Projekt im Detail

Technisch gesehen ist das FONIC-Kundenportal eine Single Page Application, entwickelt mit dem Framework VueJS.

Bereits mit einfachen Mitteln konnten die Zugänglichkeit und Barrierefreiheit des Portals verbessert werden. So konnten durch die Implementierung von Textalternativen für Bilder und Grafiken sowie die Verwendung von semantischem HTML alle visuell dargestellten Informationen in Textform übertragen werden. Dies macht die Anwendung auch für Hilfstechnologien wie Screenreader und alternative Eingabegeräte zugänglich.

Die visuelle Darstellung hat inovex durch die Anpassung von Farbkontrasten und die Einführung eines High-Contrast Modes optimiert. Zudem wurde sichergestellt, dass das Responsive Design mit beliebigen Zoom-Leveln umgehen kann. Inhalte wurden besser strukturiert und auch für problemlose Navigation mit der Tastatur haben inovex und FONIC gesorgt, durch erkennbares Fokus-Highlighting und eine klare Fokus-Reihenfolge.

Spezialkomponenten, die (noch) nicht durch natives HTML abgebildet werden konnten, wurden von inovex mithilfe von ARIA-Rollen und -Attributen (Accessible Rich Internet Applications) barrierefrei implementiert.

Komplexe CSS-Visualisierungen, die sich den jeweiligen Nutzerdaten anpassen, hat inovex um dynamische Textalternativen ergänzt. Zudem wurde die Formularvalidierung optimiert, inklusive barrierefreier Fehlermeldungen, und den Nutzer:innen wurde es ermöglicht, (Schrift-)Farben und Größen ganz ihren Bedürfnissen anzupassen.

Fazit

Die erfolgreiche Umgestaltung des FONIC-Kundenportals zu einer barrierefreien Webanwendung zeigt, dass die schrittweise und integrierte Umsetzung in laufende, tagesaktuelle Themen und Anforderungen möglich ist. Noch besser und deutlich effizienter ist es jedoch, Web Accessibility von Anfang an zu berücksichtigen. Eine Web-Accessibility-Schulung verschafft Designer:innen und Entwickler:innen das nötige Know-how, um Design und Code direkt barrierefrei zu gestalten. Quick Wins, wie der Einsatz von semantischem HTML und die Verwendung ausreichender Kontraste, können so von Anfang an mit kaum Mehraufwand umgesetzt und nachhaltig in den Entwicklungsprozess integriert werden.