WCAG 2.2 for an Accessible Financial Web Application with React
Accessibility modernization for a leading financial services provider in Germany
Challenge: Modernizing an Existing Financial Application for Accessibility Under Regulatory Pressure
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.
Goal: Implement WCAG 2.2, Secure Accessibility Refactoring, and Make UI Standards Scalable
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.
- Accessibility refactoring based on WCAG 2.2: Analysis and improvement of existing interfaces with regard to semantic structure, keyboard accessibility, focus management, ARIA attributes, contrast, forms, and robust interaction patterns.
- Prioritization under regulatory time pressure: A focused implementation of the measures with the greatest impact on user experience, technical stability, and risk reduction.
- Refactoring of existing UI structures: Cleanup of historically grown frontend patterns in an existing application with a mixed technology stack including React, TypeScript, jQuery, and SASS/SCSS.
- Development of an internal React component library: Since the project moved faster than expected, the next step was to design and implement a new internal component library. The goal was not just to improve accessibility on individual screens, but to anchor it permanently in the UI standards used across the application.
- Storybook as a documentation and development foundation: Documentation of accessible React components, states, and variants to support faster development, clearer alignment, and a scalable Storybook design system within the team.
- Quality assurance with unit and end-to-end tests: Validation of core components and user flows with Jest and Playwright to ensure that accessibility improvements, focus behavior, and interactive UI patterns remain stable and reproducible.
- Team coaching and support: Support for frontend colleagues through code reviews, pair programming, and best-practice workshops so that the new standards could be sustainably integrated into daily development.
Why Choose prokodo for Accessibility Refactoring and Component Libraries
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. Learn more on our page about the React Agency.
Our core strengths:
- Accessibility Refactoring: Structured modernization of existing web applications based on current accessibility standards
- React & TypeScript Frontends: Clean, modular, and reusable UI architectures
- Component Libraries & Design Systems: Internal UI kits with Storybook as the foundation for consistency and scalability
- Testing & Quality Assurance: Robust components and user flows supported by unit and end-to-end testing
- Coaching & Enablement: Knowledge transfer embedded directly into daily project work through reviews, workshops, and pair programming
- Modernization in Existing Systems: Pragmatic evolution of established systems instead of unnecessary rebuilds
Our ambition is to create accessible and technically resilient frontends that genuinely help teams move forward in everyday work.
