One Design System, Many Platforms: Scaling Accessible Web Components to Drupal, WordPress, & Beyond
Video Description
Speakers: Max Bronsema and Carly Gerard
Building a design system is hard. Making it work consistently across Drupal, WordPress, and custom applications was challenging.
At a large regional public university, we reimagined our design system around accessible web components that could be shared across platforms while maintaining a consistent user experience. Along the way, we developed approaches for governance, automated accessibility and regression testing with Cypress, and a deployment pipeline that distributes assets through Azure Front Door.
This session will explore the technical and organizational lessons learned from implementing a cross-platform design system at scale. Attendees will learn how web components helped reduce duplication, how automated testing prevents accessibility regressions, and how a shared component strategy can support hundreds of websites without sacrificing flexibility.
We want to discuss our back-and-forth explorations in exposing options for users to enable light/dark themes and choose fonts. The two options we enable on the component side for how a menu is displayed to users and the constant refinement we see ourselves making.
Whether you're managing a single Drupal site or an enterprise web ecosystem, you'll leave with practical ideas for building accessible, sustainable web experiences that make a difference.
Session outline
1. The challenge
* Supporting many websites and stakeholders
* Multiple platforms (Drupal, WordPress, custom apps)
* Accessibility requirements
* Brand consistency vs local flexibility
2. Why web components
* Platform independence
* Reusability
* Design system architecture
* Lessons learned
3. Accessibility by default
* Building accessibility into components
* Testing requirements
* Internal struggles to make the components the best they can be
4. Catching problems before users do
* Cypress testing strategy
* Accessibility testing
* Real examples of regressions that were caught
5. Distribution at scale
* Azure Front Door CDN - We don't do anything advanced here, not yet.
* Versioning and rollout strategy
Building a design system is hard. Making it work consistently across Drupal, WordPress, and custom applications was challenging.
At a large regional public university, we reimagined our design system around accessible web components that could be shared across platforms while maintaining a consistent user experience. Along the way, we developed approaches for governance, automated accessibility and regression testing with Cypress, and a deployment pipeline that distributes assets through Azure Front Door.
This session will explore the technical and organizational lessons learned from implementing a cross-platform design system at scale. Attendees will learn how web components helped reduce duplication, how automated testing prevents accessibility regressions, and how a shared component strategy can support hundreds of websites without sacrificing flexibility.
We want to discuss our back-and-forth explorations in exposing options for users to enable light/dark themes and choose fonts. The two options we enable on the component side for how a menu is displayed to users and the constant refinement we see ourselves making.
Whether you're managing a single Drupal site or an enterprise web ecosystem, you'll leave with practical ideas for building accessible, sustainable web experiences that make a difference.
Session outline
1. The challenge
* Supporting many websites and stakeholders
* Multiple platforms (Drupal, WordPress, custom apps)
* Accessibility requirements
* Brand consistency vs local flexibility
2. Why web components
* Platform independence
* Reusability
* Design system architecture
* Lessons learned
3. Accessibility by default
* Building accessibility into components
* Testing requirements
* Internal struggles to make the components the best they can be
4. Catching problems before users do
* Cypress testing strategy
* Accessibility testing
* Real examples of regressions that were caught
5. Distribution at scale
* Azure Front Door CDN - We don't do anything advanced here, not yet.
* Versioning and rollout strategy