WCAG 2.2 für eine barrierefreie Finanz-Webanwendung mit React
Accessibility-Modernisierung für einen führenden Finanzdienstleister aus Deutschland
Bei der Modernisierung bestehender Web-Anwendungen entstehen häufig Fragen zu gesetzlichen Anforderungen, WCAG 2.2, technischer Umsetzung und nachhaltiger UI-Standardisierung. Hier beantworten wir die wichtigsten Fragen.
Das Barrierefreiheitsstärkungsgesetz ist das deutsche Gesetz zur Umsetzung des European Accessibility Act. Es gilt in Deutschland seit dem 28. Juni 2025 und regelt Barrierefreiheitsanforderungen für bestimmte Produkte und Dienstleistungen. Dazu gehören je nach Anwendungsfall auch verbrauchernahe digitale Angebote, unter anderem im Finanzumfeld.
WCAG 2.2 ist die aktuelle Version der Web Content Accessibility Guidelines des W3C. Sie erweitert WCAG 2.1 um zusätzliche Erfolgskriterien und dient Unternehmen als moderner Orientierungsrahmen für barrierefreie digitale Produkte. Da WCAG 2.2 auf WCAG 2.1 aufbaut, unterstützt sie sowohl bessere Nutzererlebnisse als auch eine zukunftssichere Accessibility-Strategie.
WCAG unterscheidet zwischen den Konformitätsstufen A, AA und AAA.
AA ist in vielen Projekten die zentrale Zielgröße, weil diese Stufe ein hohes und praxistaugliches Accessibility-Niveau beschreibt. AAA geht in einzelnen Bereichen noch weiter und kann ergänzend sinnvoll sein, wenn besonders hohe Anforderungen an Nutzbarkeit und Inklusion bestehen.
Typischerweise beginnt man mit einer strukturierten Analyse der größten Barrieren, also semantischem HTML, Tastaturbedienbarkeit, Fokuszuständen, Kontrasten, Formularlogik, Screenreader-Verhalten und konsistenten Komponenten. Danach werden die wichtigsten Nutzerflüsse priorisiert und schrittweise refaktoriert. Gerade in Bestandsprojekten ist ein pragmatisches Vorgehen oft erfolgreicher als ein kompletter Neuaufbau.
Wenn Accessibility nur punktuell auf einzelnen Screens verbessert wird, tauchen dieselben Probleme später oft wieder auf. Eine Komponenten-Bibliothek mit klar dokumentierten React-Komponenten sorgt dafür, dass barrierefreie Muster wiederverwendbar werden. Das reduziert Inkonsistenzen, beschleunigt Entwicklung und verbessert die Wartbarkeit langfristig.
WCAG unterscheidet zwischen den Konformitätsstufen A, AA und AAA.
AA ist in vielen Projekten die zentrale Zielgröße, weil diese Stufe ein hohes und praxistaugliches Accessibility-Niveau beschreibt. AAA geht in einzelnen Bereichen noch weiter und kann ergänzend sinnvoll sein, wenn besonders hohe Anforderungen an Nutzbarkeit und Inklusion bestehen.
Typischerweise beginnt man mit einer strukturierten Analyse der größten Barrieren, also semantischem HTML, Tastaturbedienbarkeit, Fokuszuständen, Kontrasten, Formularlogik, Screenreader-Verhalten und konsistenten Komponenten. Danach werden die wichtigsten Nutzerflüsse priorisiert und schrittweise refaktoriert. Gerade in Bestandsprojekten ist ein pragmatisches Vorgehen oft erfolgreicher als ein kompletter Neuaufbau.
Typischerweise beginnt man mit einer strukturierten Analyse der größten Barrieren, also semantischem HTML, Tastaturbedienbarkeit, Fokuszuständen, Kontrasten, Formularlogik, Screenreader-Verhalten und konsistenten Komponenten. Danach werden die wichtigsten Nutzerflüsse priorisiert und schrittweise refaktoriert. Gerade in Bestandsprojekten ist ein pragmatisches Vorgehen oft erfolgreicher als ein kompletter Neuaufbau.
Das Barrierefreiheitsstärkungsgesetz ist das deutsche Gesetz zur Umsetzung des European Accessibility Act. Es gilt in Deutschland seit dem 28. Juni 2025 und regelt Barrierefreiheitsanforderungen für bestimmte Produkte und Dienstleistungen. Dazu gehören je nach Anwendungsfall auch verbrauchernahe digitale Angebote, unter anderem im Finanzumfeld.
WCAG 2.2 ist die aktuelle Version der Web Content Accessibility Guidelines des W3C. Sie erweitert WCAG 2.1 um zusätzliche Erfolgskriterien und dient Unternehmen als moderner Orientierungsrahmen für barrierefreie digitale Produkte. Da WCAG 2.2 auf WCAG 2.1 aufbaut, unterstützt sie sowohl bessere Nutzererlebnisse als auch eine zukunftssichere Accessibility-Strategie.
WCAG unterscheidet zwischen den Konformitätsstufen A, AA und AAA.
AA ist in vielen Projekten die zentrale Zielgröße, weil diese Stufe ein hohes und praxistaugliches Accessibility-Niveau beschreibt. AAA geht in einzelnen Bereichen noch weiter und kann ergänzend sinnvoll sein, wenn besonders hohe Anforderungen an Nutzbarkeit und Inklusion bestehen.
Typischerweise beginnt man mit einer strukturierten Analyse der größten Barrieren, also semantischem HTML, Tastaturbedienbarkeit, Fokuszuständen, Kontrasten, Formularlogik, Screenreader-Verhalten und konsistenten Komponenten. Danach werden die wichtigsten Nutzerflüsse priorisiert und schrittweise refaktoriert. Gerade in Bestandsprojekten ist ein pragmatisches Vorgehen oft erfolgreicher als ein kompletter Neuaufbau.
Wenn Accessibility nur punktuell auf einzelnen Screens verbessert wird, tauchen dieselben Probleme später oft wieder auf. Eine Komponenten-Bibliothek mit klar dokumentierten React-Komponenten sorgt dafür, dass barrierefreie Muster wiederverwendbar werden. Das reduziert Inkonsistenzen, beschleunigt Entwicklung und verbessert die Wartbarkeit langfristig.
Typischerweise beginnt man mit einer strukturierten Analyse der größten Barrieren, also semantischem HTML, Tastaturbedienbarkeit, Fokuszuständen, Kontrasten, Formularlogik, Screenreader-Verhalten und konsistenten Komponenten. Danach werden die wichtigsten Nutzerflüsse priorisiert und schrittweise refaktoriert. Gerade in Bestandsprojekten ist ein pragmatisches Vorgehen oft erfolgreicher als ein kompletter Neuaufbau.
Typischerweise beginnt man mit einer strukturierten Analyse der größten Barrieren, also semantischem HTML, Tastaturbedienbarkeit, Fokuszuständen, Kontrasten, Formularlogik, Screenreader-Verhalten und konsistenten Komponenten. Danach werden die wichtigsten Nutzerflüsse priorisiert und schrittweise refaktoriert. Gerade in Bestandsprojekten ist ein pragmatisches Vorgehen oft erfolgreicher als ein kompletter Neuaufbau.
Ein führender Finanzdienstleister aus Deutschland stand vor der Aufgabe, eine bestehende Finanz-Webanwendung im Zuge neuer Anforderungen an digitale Barrierefreiheit umfassend zu modernisieren. Im Mittelpunkt stand ein strukturiertes Accessibility Refactoring, um zentrale Nutzerflüsse, Formulare und Interaktionsmuster auf WCAG 2.2 auszurichten. Auslöser war der steigende Handlungsdruck rund um das Barrierefreiheitsstärkungsgesetz, kurz BFSG, das in Deutschland seit dem 28. Juni 2025 gilt und den European Accessibility Act in deutsches Recht umsetzt. Für digitale Angebote im verbrauchernahen Umfeld, darunter je nach Anwendungsfall auch Leistungen aus dem Finanzumfeld, wurde Barrierefreiheit damit zu einem strategischen und operativen Thema.
Im ersten Schritt sollte die bestehende Anwendung auf WCAG 2.2 ausgerichtet werden. Ziel war eine deutlich bessere Nutzbarkeit für alle Anwender, unabhängig davon, ob sie mit Tastatur navigieren, Screenreader einsetzen oder auf klare visuelle Strukturen angewiesen sind. WCAG 2.2 ist die aktuelle W3C Empfehlung für barrierefreie Web-Inhalte. Sie wurde am 5. Oktober 2023 veröffentlicht, ergänzt WCAG 2.1 um 9 zusätzliche Erfolgskriterien und deckt bei Umsetzung grundsätzlich auch die Anforderungen von WCAG 2.1 ab.
Im Projekt ging es deshalb nicht nur um einzelne Korrekturen, sondern um eine strukturelle Verbesserung der gesamten Anwendung. Überarbeitet wurden unter anderem semantische HTML-Strukturen, Tastaturbedienbarkeit, Fokusführung, Kontraste, ARIA-Muster sowie konsistente Interaktionen über verschiedene Oberflächen hinweg.
Da das Projekt schneller Fortschritte machte als ursprünglich geplant, wurde der Umfang anschließend erweitert. Zusätzlich zum Accessibility-Refactoring wurde ein Refactoring der bestehenden UI-Strukturen angestoßen und eine interne React Komponenten-Bibliothek neu aufgebaut. Ergänzt wurde dies durch Storybook, damit Komponenten, Zustände und Varianten im Team transparent dokumentiert und langfristig wiederverwendet werden können.
Unser Beitrag ging über die technische Umsetzung hinaus. Neben dem Accessibility Refactoring unterstützten wir das Frontend-Team durch Code-Reviews, Pair Programming und Best-Practice-Workshops. Dadurch wurden neue Accessibility- und UI-Standards nicht nur umgesetzt, sondern direkt in die tägliche Entwicklungsarbeit überführt.
Seit vielen Jahren unterstützen wir Unternehmen dabei, gewachsene Frontends technisch zu modernisieren, nutzerfreundlicher zu gestalten und langfristig wartbar weiterzuentwickeln. Bei Accessibility-Projekten in bestehenden Produktlandschaften verbinden wir pragmatisches Refactoring mit wiederverwendbaren React-Komponenten, klar dokumentierten UI-Standards und einem Vorgehen, das Accessibility, Architektur und Entwickler Realität zusammen denkt.
Unsere Kernkompetenzen:
Unser Anspruch ist es, barrierefreie und technisch belastbare Frontends zu schaffen, die Teams im Alltag wirklich weiterbringen.
Ein führender Finanzdienstleister aus Deutschland stand vor der Aufgabe, eine bestehende Finanz-Webanwendung im Zuge neuer Anforderungen an digitale Barrierefreiheit umfassend zu modernisieren. Im Mittelpunkt stand ein strukturiertes Accessibility Refactoring, um zentrale Nutzerflüsse, Formulare und Interaktionsmuster auf WCAG 2.2 auszurichten. Auslöser war der steigende Handlungsdruck rund um das Barrierefreiheitsstärkungsgesetz, kurz BFSG, das in Deutschland seit dem 28. Juni 2025 gilt und den European Accessibility Act in deutsches Recht umsetzt. Für digitale Angebote im verbrauchernahen Umfeld, darunter je nach Anwendungsfall auch Leistungen aus dem Finanzumfeld, wurde Barrierefreiheit damit zu einem strategischen und operativen Thema.
Im ersten Schritt sollte die bestehende Anwendung auf WCAG 2.2 ausgerichtet werden. Ziel war eine deutlich bessere Nutzbarkeit für alle Anwender, unabhängig davon, ob sie mit Tastatur navigieren, Screenreader einsetzen oder auf klare visuelle Strukturen angewiesen sind. WCAG 2.2 ist die aktuelle W3C Empfehlung für barrierefreie Web-Inhalte. Sie wurde am 5. Oktober 2023 veröffentlicht, ergänzt WCAG 2.1 um 9 zusätzliche Erfolgskriterien und deckt bei Umsetzung grundsätzlich auch die Anforderungen von WCAG 2.1 ab.
Im Projekt ging es deshalb nicht nur um einzelne Korrekturen, sondern um eine strukturelle Verbesserung der gesamten Anwendung. Überarbeitet wurden unter anderem semantische HTML-Strukturen, Tastaturbedienbarkeit, Fokusführung, Kontraste, ARIA-Muster sowie konsistente Interaktionen über verschiedene Oberflächen hinweg.
Da das Projekt schneller Fortschritte machte als ursprünglich geplant, wurde der Umfang anschließend erweitert. Zusätzlich zum Accessibility-Refactoring wurde ein Refactoring der bestehenden UI-Strukturen angestoßen und eine interne React Komponenten-Bibliothek neu aufgebaut. Ergänzt wurde dies durch Storybook, damit Komponenten, Zustände und Varianten im Team transparent dokumentiert und langfristig wiederverwendet werden können.
Unser Beitrag ging über die technische Umsetzung hinaus. Neben dem Accessibility Refactoring unterstützten wir das Frontend-Team durch Code-Reviews, Pair Programming und Best-Practice-Workshops. Dadurch wurden neue Accessibility- und UI-Standards nicht nur umgesetzt, sondern direkt in die tägliche Entwicklungsarbeit überführt.
Seit vielen Jahren unterstützen wir Unternehmen dabei, gewachsene Frontends technisch zu modernisieren, nutzerfreundlicher zu gestalten und langfristig wartbar weiterzuentwickeln. Bei Accessibility-Projekten in bestehenden Produktlandschaften verbinden wir pragmatisches Refactoring mit wiederverwendbaren React-Komponenten, klar dokumentierten UI-Standards und einem Vorgehen, das Accessibility, Architektur und Entwickler Realität zusammen denkt.
Unsere Kernkompetenzen:
Unser Anspruch ist es, barrierefreie und technisch belastbare Frontends zu schaffen, die Teams im Alltag wirklich weiterbringen.
Das Hauptziel bestand darin, eine bestehende Finanz-Webanwendung strukturiert auf WCAG 2.2 auszurichten, zentrale Barrieren in relevanten Nutzerflüssen zu reduzieren und die Grundlage für langfristig konsistente UI-Standards zu schaffen.
Das Hauptziel bestand darin, eine bestehende Finanz-Webanwendung strukturiert auf WCAG 2.2 auszurichten, zentrale Barrieren in relevanten Nutzerflüssen zu reduzieren und die Grundlage für langfristig konsistente UI-Standards zu schaffen.
Das Hauptziel bestand darin, eine bestehende Finanz-Webanwendung strukturiert auf WCAG 2.2 auszurichten, zentrale Barrieren in relevanten Nutzerflüssen zu reduzieren und die Grundlage für langfristig konsistente UI-Standards zu schaffen.
Klare, messbare Resultate:
React bildete die technologische Basis für barrierefreie und skalierbare UI-Standards in diesem Projekt. Darauf aufbauend wurden barrierefreie UI-Komponenten, konsistente Interaktionsmuster und eine wiederverwendbare interne Component Library umgesetzt. Zudem wurde jQuery, soweit es die bestehende Projektstruktur zuließ, weitgehend durch moderne React-basierte Lösungen abgelöst. Ergänzend unterstützten TypeScript, Storybook sowie strukturierte Testing- und Frontend-Prozesse mit Jest die langfristige Wartbarkeit und Qualität der Lösung.
Dieses Projekt zeigt, dass digitale Barrierefreiheit weit mehr ist als ein reines Compliance-Thema. Das Accessibility-Refactoring schuf nicht nur eine bessere Nutzererfahrung, sondern wurde zugleich zum Ausgangspunkt für eine nachhaltige technische Modernisierung.
Durch die Kombination aus WCAG-Optimierung, UI-Refactoring und neuer React Component Library entstand eine belastbare Basis für zukünftige Produktentwicklung. Accessibility wurde damit nicht nur nachträglich verbessert, sondern als wiederverwendbarer Standard in die Frontend-Architektur überführt.
| Fähigkeit | Beschreibung |
|---|---|
| WCAG 2.2 Refactoring | Bestehende Anwendung systematisch auf barrierefreie Nutzung ausgerichtet |
| Accessibility im regulatorischen Kontext | Priorisierte Umsetzung vor dem Hintergrund aktueller Anforderungen an digitale Barrierefreiheit |
| React Component Library | Wiederverwendbare, standardisierte UI-Bausteine für langfristige Skalierung |
| Storybook Dokumentation | Transparente Dokumentation von Komponenten, Zuständen und Varianten |
| Unit- und End-to-End-Tests mit Jest und Playwright |
| Team Enablement | Code-Reviews, Pair Programming und Workshops für nachhaltigen Wissenstransfer |
| Wartbarkeit | Reduzierung technischer Altlasten und klarere UI-Standards |
| Zukunftsfähigkeit | Accessibility und Konsistenz als integraler Bestandteil der Weiterentwicklung |
