Building Accessible Experiences Implementing a Design System in Drupal with SDCs
Video Description
Speakers: Alfred Lin, Jeremy Gottwig, Amy Swackhamer
Last year, the University of Maryland released a new platform-agnostic design system. The University Libraries manage a handful of Drupal websites, and have been investigating the necessary steps to reach next year’s ADA Title II compliance requirements. We began work on a new accessible theme, keeping in mind the use of Drupal by other campus units and the possibility of sharing this theme with colleagues. This session demonstrates our comprehensive approach to implementing accessible design systems in Drupal using Single Directory Components (SDC), UI Patterns, and Layout Builder. We'll share how we created a theming solution that prioritizes both user experience and accessibility from the ground up, complete with thorough documentation for designers, developers, and content creators.
Key Focus Areas
1. Design System Implementation Strategy
- Project architecture: How we structured our theme using modern component-based approaches
- The relationship between base themes and child themes in a component-based workflow
- Establishing design tokens as the foundation for consistent styling
- Documentation approach for technical specifications that bridge design, development, and community
2. Layout Builder as the Editing Experience
- Customizing Layout Builder to serve specific organizational needs
- Current limitations of Layout Builder and workarounds, expected improvements with updates to UI Patterns Settings
3. Accessibility Integration and Testing
- Prioritizing accessibility standard compliance early in the component development process
- Balancing content editor experience with accessibility requirements
- Testing methodologies for ensuring individual component-level and theme-wide accessibility
- Tools and workflows for continuous accessibility evaluation
- Documentation standards for maintaining accessibility through future iterations
- Comprehensive user manuals for content editors that promote accessible practices
Our approach addresses the track's focus on "interactions that diverse users may have" by showing how a component-based theming approach can systematically improve accessibility and user experience, inviting other units on the campus to collaborate and extend. We aim to create not just technical components, but a system of documentation and governance that ensures accessibility remains central to the digital experience.
Last year, the University of Maryland released a new platform-agnostic design system. The University Libraries manage a handful of Drupal websites, and have been investigating the necessary steps to reach next year’s ADA Title II compliance requirements. We began work on a new accessible theme, keeping in mind the use of Drupal by other campus units and the possibility of sharing this theme with colleagues. This session demonstrates our comprehensive approach to implementing accessible design systems in Drupal using Single Directory Components (SDC), UI Patterns, and Layout Builder. We'll share how we created a theming solution that prioritizes both user experience and accessibility from the ground up, complete with thorough documentation for designers, developers, and content creators.
Key Focus Areas
1. Design System Implementation Strategy
- Project architecture: How we structured our theme using modern component-based approaches
- The relationship between base themes and child themes in a component-based workflow
- Establishing design tokens as the foundation for consistent styling
- Documentation approach for technical specifications that bridge design, development, and community
2. Layout Builder as the Editing Experience
- Customizing Layout Builder to serve specific organizational needs
- Current limitations of Layout Builder and workarounds, expected improvements with updates to UI Patterns Settings
3. Accessibility Integration and Testing
- Prioritizing accessibility standard compliance early in the component development process
- Balancing content editor experience with accessibility requirements
- Testing methodologies for ensuring individual component-level and theme-wide accessibility
- Tools and workflows for continuous accessibility evaluation
- Documentation standards for maintaining accessibility through future iterations
- Comprehensive user manuals for content editors that promote accessible practices
Our approach addresses the track's focus on "interactions that diverse users may have" by showing how a component-based theming approach can systematically improve accessibility and user experience, inviting other units on the campus to collaborate and extend. We aim to create not just technical components, but a system of documentation and governance that ensures accessibility remains central to the digital experience.