Scale Without Sacrifice:
Accessible Design & Development
Scale Without Sacrifice:
Developing Accessible Design Systems
Scale Without Sacrifice:
Developing Accessible Design Systems
BACKGROUND
In this case study I will share insights and observations from 2018 to 2024 documenting Hearst Magazines move to prioritize accessibility as a core requirement instead of a late add-on.
Hearst's new platform started as two dozen US properties in 2014 and quickly grew to well over 100 brands by 2024. As we grew in scale and reach we knew we would have to create a codebase, design system. and component library that was performant, usable, and flexible enough to work around the world.
Our initial experiments with Custom Feeds and switching from PHP to React and JS were a major success by all metrics. The new system was resilient, app-like, and the future of every major website. We began laying down the foundation of our new design and component library along with plans for full code re-write.
Faced with hundreds of templates and features to consolidate we seized the opportunity to create a design system and component library which would serve as a single source of truth for product, design, engineering and editorial.
In light of the upcoming European Accessibility Act (EAA) mandates as well as domestic retailers losing nearly $828 million dollars due to inaccessible websites, this clean slate was the perfect opportunity to build accessibility into our platform and processes.
In 2020 I was promoted to Staff Product Designer and took on the role of Accessibility Lead. We partnered with Deque Systems for audits, training, tooling, and education. Every employee in engineering, design, management, and editorial was enrolled in comprehensive training via Deque University.
I was responsible for taking the initial education and training and integrating it into the product development process. Through workshops, weekly office hours, zoom training sessions, and multiple presentations we were able to produce accessible products that met different international standards.
In December 2024 the accessibility process and policies I proposed resulted in Deque Axe Monitor scores of 95% and higher for all US and European sites.
Design Hand-off Policy & Product Requirements
Created documentation, resource hub, and checklists with comprehensive WCAG coverage rounds of peer reviews to ensure consistency across components and projects
Standardized Design Deliverables
Created template requiring component level a11y markup, keyboard navigation, contrast checks, and alt text annotations to be linked to Design system
Colleagues
Cybele Grandjean
(SVP Design)
Kathryn Thomas
(Director of QA and Accessibility)
Onboarding & Training
Specialized presentations were tailored to the responsibilities of management, design, engineering, and editorial. teams and individuals saw acccessibility as duty.
Design Developer Agreements
Added accessibility requirements formalized the process by requiring a11y markup and checkups. Came to an agreement on what a full file hand-off consists of
Automated Tooling
Accessibility Insights, Figma Plugins, axe DevTools,
axe Monitor, axe-core, Browserstack, WAVE
Weekly Office Hours
Dedicated time to providing one-on-one support for accessibility audits, third-party vendor vetting, and other external Hearst divisions
Accessible@Hearst ERG
Founded Employee Resource Group providing resources for employees and families of Hearst
Assistive Technology Demos
Ran testing and training workshops on keyboard navigation, VoiceOver, JAWS, and NVDA
My objective as accessibility design lead was to embed accessibility and usability into the foundation of our new platform. Striving for thoughtful interesting accessible UX brings out better products, not looking for compliance checkboxes.
In 2020, I began studying the root causes of accessibility issues industry wide. One of the major points that stuck out came from a study published by Deque — a leading authority on the usable web:
Design Hand-off Policy & Product Requirements
Created documentation, resource hub, and checklists with comprehensive WCAG coverage rounds of peer reviews to ensure consistency across project
Standardized Design Deliverables
Created template requiring component level a11y markup, keyboard navigation, contrast checks, and alt text annotations to be linked to Design system
Colleagues
Cybele Grandjean (SVP Design) and Kathryn Thomas (Director of QA and Accessibility)
Onboarding & Training
Quarterly workshops were offered multiple times a quart. Specialized presentations were tailored to the responsibilities of management, design, engineering, and editorial
Designer & Developer Agreements
Added accessibility requirements and QA agreements to Github and JIRA tickets.
Added axe-core into build process for CI/CD
Automated Tooling
Accessibility Insights, Figma Plugins, axe DevTools, axe Monitor, axe-core, Browserstack, WAVE
Weekly Office Hours
Dedicated time to providing one-on-one support for accessibility audits, third-party vendor vetting, and other external Hearst divisions
Accessible@Hearst ERG
Founded Employee Resource Group providing resources for employees and families of Hearst
Assistive Technology Demos
Ran testing and training workshops on keyboard navigation, VoiceOver, JAWS, and NVDA
My objective as design lead was to take the accessibility training and education and find ways to apply it to our platform, processes, and products.
In 2020, I began studying the root causes of accessibility issues industry wide. One of the major points that stuck out came from a study published by Deque — a leading authority on the usable web:
67% of accessibility issues originate in design.
After a few training experiments and presentations I focused on making accessibility everyone's responsibility. If we wanted an accessible organization we had to to shift accessibility considerations "left"—integrating a11y practices into the early stages of our product DNA. This proactive approach aimed to embed accessibility as a core value of the product release process ensures usable, universal experiences.
Research
User Need
Requirements
Design
Code
Testing
Release
Monitor
Research
User Need
Requirements
Design
Code
Testing
Release
Monitor
Deque's ROI on accessibility aligned with our own findings. Accessibility fixes are difficult and had to be addressed earlier. The real issue isn't that accessible products are difficult to create, but more that cutting corners on accessibility and fixing up the mess far more expensive, painful, and unrewarding.
67% of accessibility issues originate in design.
Deque's ROI on accessibility aligned with our own findings. Accessibility fixes are difficult and had to be addressed earlier. The real issue isn't that accessible products are difficult to create, but more that cutting corners on accessibility and fixing up the mess far more expensive, painful, and unrewarding.
Accessibility is often treated as an afterthought in the product development cycle leading to costly fixes and frustrating user experiences.
Research
User Need
Requirements
Design
Code
Testing
Release
Monitor
Accessibility is often treated as an afterthought in the product development cycle leading to costly fixes and frustrating user experiences.
After a few training experiments and presentations I focused on making accessibility everyone's responsibility. If we wanted an accessible organization we had to to shift accessibility considerations "left"—integrating a11y practices into the early stages of our product DNA. This proactive approach aimed to embed accessibility as a core value of the product release process ensures usable, universal experiences.
Accessibility Workshops and Presentation PDFs Available!
Please reach out to ryanilano@pm.me for password
Download PDFs
Download PDFs
Accessibility Workshops and Presentation PDFs Available!
Please reach out to ryanilano@pm.me for password
Download PDFs
Download PDFs
BACKGROUND
In this case study I will share insights and observations from 2018 to 2024 documenting Hearst Magazines move to prioritize accessibility as a core requirement instead of a late add-on.
Hearst's new platform started as two dozen US properties in 2014 and quickly grew to well over 100 brands by 2024. As we grew in scale and reach we knew we would have to create a codebase, design system. and component library that was performant, usable, and flexible enough to work around the world.
Our initial experiments with Custom Feeds and switching from PHP to React and JS were a major success by all metrics. The new system was resilient, app-like, and the future of every major website. We began laying down the foundation of our new design and component library along with plans for full code re-write.
Faced with hundreds of templates and features to consolidate we seized the opportunity to create a design system and component library which would serve as a single source of truth for product, design, engineering and editorial.
In light of the upcoming European Accessibility Act (EAA) mandates as well as domestic retailers losing nearly $828 million dollars due to inaccessible websites, this clean slate was the perfect opportunity to build accessibility into our platform and processes.
In 2020 I was promoted to Staff Product Designer and took on the role of Accessibility Lead. We partnered with Deque Systems for audits, training, tooling, and education. Every employee in engineering, design, management, and editorial was enrolled in comprehensive training via Deque University.
I was responsible for taking the initial education and training and integrating it into the product development process. Through workshops, weekly office hours, zoom training sessions, and multiple presentations we were able to produce accessible products that met different international standards.
In December 2024 the accessibility process and policies I proposed resulted in Deque Axe Monitor scores of 95% and higher for all US and European sites.
Design Hand-off Policy & Product Requirements
Created documentation, resource hub, and checklists with comprehensive WCAG coverage rounds of peer reviews to ensure consistency across project
Standardized Design Deliverables
Created template requiring component level a11y markup, keyboard navigation, contrast checks, and alt text annotations to be linked to Design system
Colleagues
Cybele Grandjean (SVP Design) and Kathryn Thomas (Director of QA and Accessibility)
Onboarding & Training
Quarterly workshops were offered multiple times a quart. Specialized presentations were tailored to the responsibilities of management, design, engineering, and editorial
Designer & Developer Agreements
Added accessibility requirements and QA agreements to Github and JIRA tickets.
Added axe-core into build process for CI/CD
Automated Tooling
Accessibility Insights, Figma Plugins, axe DevTools, axe Monitor, axe-core, Browserstack, WAVE
Weekly Office Hours
Dedicated time to providing one-on-one support for accessibility audits, third-party vendor vetting, and other external Hearst divisions
Accessible@Hearst ERG
Founded Employee Resource Group providing resources for employees and families of Hearst
Assistive Technology Demos
Ran testing and training workshops on keyboard navigation, VoiceOver, JAWS, and NVDA
After a few training experiments and presentations I focused on making accessibility everyone's responsibility. If we wanted an accessible organization we had to to shift accessibility considerations "left"—integrating a11y practices into the early stages of our product DNA. This proactive approach aimed to embed accessibility as a core value of the product release process ensures usable, universal experiences.
My objective as design lead was to take the accessibility training and education and find ways to apply it to our platform, processes, and products.
In 2020, I began studying the root causes of accessibility issues industry wide. One of the major points that stuck out came from a study published by Deque — a leading authority on the usable web:
67% of accessibility issues originate in design.
Deque's ROI on accessibility aligned with our own findings. Accessibility fixes are difficult and had to be addressed earlier. The real issue isn't that accessible products are difficult to create, but more that cutting corners on accessibility and fixing up the mess far more expensive, painful, and unrewarding.
Accessibility is often treated as an afterthought in the product development cycle leading to costly fixes and frustrating user experiences.
Accessibility Workshops and Presentation PDFs Available!
Please reach out to ryanilano@pm.me for password
Download PDFs
Download PDFs
Accessibility Workshops and Presentation PDFs Available!
Please reach out to ryanilano@pm.me for password
Download PDFs
Download PDFs