HSBC is one of the world's largest banking and financial services organisations, serving approximately 40 million customers worldwide.
Droxic built an eLearning portal on Adobe Experience Manager (AEM) that helps HSBC employees understand the challenges people with disabilities face when using websites. The portal includes interactive simulations, video content, and developer guidelines for building to WCAG AA and AAA accessibility standards.
For an organisation that serves 40 million customers across the globe, digital accessibility is not optional. HSBC needed a way to train its teams on inclusive design principles, not through static documentation, but through hands-on experience.
The goal was to give employees a first-person understanding of how people with different disabilities experience websites. Developers needed clear, actionable guidelines for building to WCAG standards. And the portal itself had to be a reference implementation: fully accessible, fully compliant, and built to the standards it was teaching.
HSBC needed a partner who could build a portal that didn't just explain accessibility, but was built to the same WCAG AAA standards it was teaching.
Droxic built the portal on Adobe Experience Manager (AEM) with a custom React.JS frontend. The architecture had to serve two very different user journeys: employees exploring disability simulations and video content, and developers looking for technical guidance on building accessible websites.
For employees, the portal offers interactive simulations that let users experience different types of disabilities first-hand. These aren't theoretical exercises. They're visual, interactive representations of how people with visual, motor, and cognitive disabilities navigate the web. Combined with video content and progress tracking, the portal turns accessibility from an abstract concept into something people can feel.
For developers, the portal functions as a comprehensive reference: a wiki-style resource with actionable guidelines for meeting WCAG AA and AAA standards. The navigation is designed to help developers quickly find solutions to common accessibility issues, making it a practical daily tool rather than a one-time training exercise.
The frontend was tailored to different user profiles, adapting its layout based on the type of disability being simulated. Every component was built to AAA compliance, making the portal itself a working example of the standards it teaches.
Technologies used
Adobe Experience Manager (AEM), React.JS, WCAG AA/AAA compliance, custom accessibility simulations, video content integration, progress tracking
Duration
1 year
Team size
5
The project went through multiple rounds of testing, including internal and external User Acceptance Testing (UAT) and Beta Acceptance Testing (BAT), gathering positive feedback throughout. The rigorous testing process ensured the portal met both HSBC's internal standards and external accessibility requirements.
The project was entered into a web accessibility awards programme and won recognition for its approach to inclusive design and developer education.
More importantly, it gave HSBC a scalable tool for raising accessibility awareness across the organisation, moving the conversation from compliance checklists to genuine understanding of how people with disabilities experience the web.