As a global leader in industrial and advanced energy storage solutions, Sunlight Group operates on a massive international stage. When upgrading their digital footprint, compliance, inclusivity, and technical excellence were non-negotiable. Sunlight Group partnered with us to rebuild their web infrastructure from the ground up, targeting strict international accessibility standards.
By decoupling their stack and leveraging DatoCMS, we successfully engineered a high-performance web ecosystem that achieved a near-perfect 9.9 accessibility audit score. This project demonstrates how a composable, headless architecture gives developers the precise DOM control needed to eliminate barriers for assistive technologies, all while maintaining complete creative freedom for the marketing team.
We utilized a modern frontend framework paired with DatoCMS to implement an ironclad strategy.
1. Absolute Control Over Semantic HTML
We implemented strict, semantic HTML5 landmark tags across all templates.
We custom-built complex interactive elements—such as language switchers, mobile menus, and cookie banners—using native HTML buttons rather than relying on heavy, inaccessible third-party plugins.
2. Leveraging DatoCMS Structured Text for Heading Hierarchies
Instead of giving content editors a standard rich-text WYSIWYG editor (which allows arbitrary formatting), Structured Text treats text as a strict JSON abstract syntax tree (AST).
We mapped this custom JSON on our frontend to enforce rigid semantic rules. Even if an editor tried to create a disjointed layout, our rendering engine ensured that heading elements (<h2>, <h3>, etc.) followed a perfectly linear, sequential order.
3. Bulletproof Keyboard Navigation and Focus Management
Skip Links: We implemented hidden "Skip to Main Content" links at the top of every page, allowing keyboard and screen-reader users to bypass the global navigation entirely.
Focus Visuals: We designed custom, high-contrast, focus-visible outlines for every interactive element, ensuring users tracking their position via the Tab key never lose sight of their location.
Modal and Menu Traps: For mobile navigation overlays, we wrote custom JavaScript focus traps, ensuring that when the menu is open, the user's keyboard focus cannot accidentally escape into the background page content.
4. Media Accessibility and Enforced Metadata
The Sunlight Group project proves that modern enterprise web development does not require a trade-off between beautiful, dynamic design and absolute accessibility. By choosing a composable approach powered by DatoCMS, we created a sustainable, future-proof framework where inclusive user experiences are baked directly into the code.
