WCAG 2.2 for an Accessible Financial Web Application with React
Accessibility modernization for a leading financial services provider in Germany
Modernizing existing web applications often raises questions about legal requirements, WCAG 2.2, technical implementation, and sustainable UI standardization. Here we answer some of the most important ones.
The Accessibility Strengthening Act is the German law implementing the European Accessibility Act. It has been in force in Germany since June 28, 2025 and regulates accessibility requirements for certain products and services. Depending on the use case, this also includes consumer-facing digital services, including services in the financial sector.
WCAG 2.2 is the current version of the Web Content Accessibility Guidelines published by the W3C. It expands WCAG 2.1 with additional success criteria and serves as a modern framework for accessible digital products. Because WCAG 2.2 builds on WCAG 2.1, it supports both better user experiences and a future-ready accessibility strategy.
WCAG distinguishes between the conformance levels A, AA, and AAA.
AA is the central target level in many projects because it represents a strong and practical level of accessibility. AAA goes further in certain areas and can be useful when especially high requirements for usability and inclusion need to be met.
It usually starts with a structured analysis of the main barriers, such as semantic HTML, keyboard accessibility, focus states, contrast, form logic, screen reader behavior, and consistent components. After that, the most important user flows are prioritized and improved step by step. In established systems, a pragmatic approach is often more effective than a complete rebuild.
If accessibility is only improved on individual screens, the same problems often return later. A component library with clearly documented React components makes accessible patterns reusable. This reduces inconsistencies, speeds up development, and improves long-term maintainability.
The Accessibility Strengthening Act is the German law implementing the European Accessibility Act. It has been in force in Germany since June 28, 2025 and regulates accessibility requirements for certain products and services. Depending on the use case, this also includes consumer-facing digital services, including services in the financial sector.
WCAG 2.2 is the current version of the Web Content Accessibility Guidelines published by the W3C. It expands WCAG 2.1 with additional success criteria and serves as a modern framework for accessible digital products. Because WCAG 2.2 builds on WCAG 2.1, it supports both better user experiences and a future-ready accessibility strategy.
WCAG distinguishes between the conformance levels A, AA, and AAA.
AA is the central target level in many projects because it represents a strong and practical level of accessibility. AAA goes further in certain areas and can be useful when especially high requirements for usability and inclusion need to be met.
It usually starts with a structured analysis of the main barriers, such as semantic HTML, keyboard accessibility, focus states, contrast, form logic, screen reader behavior, and consistent components. After that, the most important user flows are prioritized and improved step by step. In established systems, a pragmatic approach is often more effective than a complete rebuild.
If accessibility is only improved on individual screens, the same problems often return later. A component library with clearly documented React components makes accessible patterns reusable. This reduces inconsistencies, speeds up development, and improves long-term maintainability.
A leading financial services provider in Germany faced the challenge of comprehensively modernizing an existing financial web application in response to new accessibility requirements. At the center of the project was a structured accessibility refactoring effort aimed at aligning key user flows, forms, and interaction patterns with WCAG 2.2. The main driver was increasing pressure around the German Accessibility Strengthening Act, known as the BFSG, which has been in force in Germany since June 28, 2025 and implements the European Accessibility Act into German law. For consumer-facing digital services, including certain offerings in the financial sector, accessibility became both a strategic and operational priority.
As a first step, the existing application needed to be aligned with WCAG 2.2. The goal was to significantly improve usability for all users, regardless of whether they rely on keyboard navigation, screen readers, or clear visual structures. WCAG 2.2 is the current W3C recommendation for accessible web content. It was published on October 5, 2023, adds 9 new success criteria to WCAG 2.1, and generally covers the requirements of WCAG 2.1 when implemented.
The project was therefore about much more than isolated fixes. It required a structural improvement of the application as a whole. This included work on semantic HTML structures, keyboard accessibility, focus handling, contrast, ARIA patterns, and consistent interaction behavior across different interfaces.
Because the project progressed faster than originally expected, its scope was expanded. In addition to accessibility refactoring, the team also initiated a refactoring of existing UI structures and built a new internal React component library. This was complemented by Storybook so that components, states, and variants could be documented transparently and reused over the long term.
Our contribution went beyond technical implementation alone. Alongside the accessibility refactoring itself, we supported the frontend team through code reviews, pair programming, and best-practice workshops. This ensured that new accessibility and UI standards were not only delivered, but also embedded into day-to-day development work.
For many years, we have supported companies in modernizing existing frontends, improving usability, and making them easier to maintain over the long term. In accessibility projects within established product landscapes, we combine pragmatic refactoring with reusable React components, clearly documented UI standards, and a delivery approach that brings together accessibility, architecture, and day-to-day developer realities.
Our core strengths:
Our ambition is to create accessible and technically resilient frontends that genuinely help teams move forward in everyday work.
For many years, we have supported companies in modernizing existing frontends, improving usability, and making them easier to maintain over the long term. In accessibility projects within established product landscapes, we combine pragmatic refactoring with reusable React components, clearly documented UI standards, and a delivery approach that brings together accessibility, architecture, and day-to-day developer realities.
Our core strengths:
Our ambition is to create accessible and technically resilient frontends that genuinely help teams move forward in everyday work.
The main objective was to align an existing financial web application with WCAG 2.2 in a structured way, reduce critical barriers in relevant user flows, and establish the foundation for consistent long-term UI standards.
The main objective was to align an existing financial web application with WCAG 2.2 in a structured way, reduce critical barriers in relevant user flows, and establish the foundation for consistent long-term UI standards.
The main objective was to align an existing financial web application with WCAG 2.2 in a structured way, reduce critical barriers in relevant user flows, and establish the foundation for consistent long-term UI standards.
Clear and measurable outcomes:
React formed the technological foundation for accessible and scalable UI standards in this project. Based on it, accessible UI components, consistent interaction patterns, and a reusable internal component library were implemented. In addition, jQuery was largely replaced by modern React-based solutions wherever the existing project structure allowed it. TypeScript, Storybook, and structured testing and frontend processes with Jest further supported the long-term maintainability and quality of the solution.
This project shows that digital accessibility is far more than a compliance topic. The accessibility refactoring not only improved the user experience, but also became the starting point for sustainable technical modernization.
By combining WCAG optimization, UI refactoring, and a new React component library, the project created a solid foundation for future product development. Accessibility was not simply improved after the fact, but established as a reusable standard within the frontend architecture.
| Capability | Description |
|---|---|
| WCAG 2.2 Refactoring | Existing application systematically aligned with accessible usage standards |
| Accessibility in a regulatory context | Prioritized implementation based on current digital accessibility requirements |
| React Component Library | Reusable, standardized UI building blocks for long-term scalability |
| Storybook Documentation | Transparent documentation of components, states, and variants |
| Testing |
| Team Enablement | Code reviews, pair programming, and workshops for sustainable knowledge transfer |
| Maintainability | Reduction of technical debt and clearer UI standards |
| Future Readiness | Accessibility and consistency established as integral parts of future development |
