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

-   Using DatoCMS’s asset validation model, we made the `Alternative Text` and `Asset Title` fields mandatory within the media library for specific content blocks.
    

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.