Scale Without Sacrifice:
Accessible Design & Development

Scale Without Sacrifice:
Developing Accessible Design Systems

Scale Without Sacrifice:
Accessible Design & Development

A11Y = Accessibility
A11Y = Accessibility
A11Y = Accessibility

2020-2024

In 2018 Hearst Digital Magazines started an ambitious project to modernize its platform. The goal was to move the code and design to a modern and performant stack that would scale and accommodate our growth.

Faced with hundreds of templates and features to update across all of our sites, we seized the opportunity to refactor our design system and create a component library which would serve as a living single source of truth for all of product, design, and engineering.

In light of the upcoming EAA mandate as well as major accessibility lawsuits making the news we partnered with Deque Systems for a multi year contract for accessibility audits, training and education.

I was promoted to Staff Product Designer and took on the role as Accessibility Lead. Good design is usable, an inherent trait shared with accessibility.

In this case study I will share insight into developing a successful accessibility process that shifted accessibility left, incorporating it into the foundation and planning of our process and platform.

The accessibility initiative and worked with Deque Systems, industry leaders in accessibility that are actively involved with the Web Content Accessibility Guidelines (WCAG) the W3C authoritative standard  for web accessibility that meets the needs of individuals, organizations, and governments internationally.

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.

Due to a Non-Disclosure Agreement, detailed designs, metrics, and internal materials cannot be shared. However, I am happy to discuss my role, process, and key outcomes in a private conversation—please reach out

PROJECT HIGHLIGHTS

  • Onboarding & Training
    Created custom workshops tailored by role for product management, design, engineering, and editorial

  • Assistive Technologies
    Keyboard navigation, VoiceOver, JAWS

  • Automated Tools
    Figma Plugins, WAVE, Accessibility Insights, axe DevTools, axe Monitor. axe-core

  • 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

  • Developer Integration
    Added accessibility QA requirements to github and JIRA repos. Added axe-core for CI/CD

  • 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

Staff Product Designer / Lead Accessiblity Advocate

  • Led training sessions via Deque University and created custom presentations for onboarding new employees every few months.

  • Integrated accessibility concerns into the design handoff process by requiring standardized annotations, markup, and peer reviews for all new templates.

  • Documented new initiatives within the design team to ensure alignment with WCAG standards
    .

  • Created workflows that included detailed documentation standards for developers and QA teams

  • Demonstrated automated testing tools like axe-core and guided teams through using assistive technologies such as screen readers.

  • Hosted weekly office hours to provide ongoing support for accessibility-
    related questions and challenges.

  • Founded Accessible@Hearst ERG group to promote inclusivity across Hearst Magazines.

Staff Product Designer / Lead Accessiblity Advocate

  • Led training sessions via Deque University and created custom presentations for onboarding new employees every few months.

  • Integrated accessibility concerns into the design handoff process by requiring standardized annotations, markup, and peer reviews for all new templates.

  • Documented new initiatives within the design team to ensure alignment with WCAG standards
    .

  • Created workflows that included detailed documentation standards for developers and QA teams

  • Demonstrated automated testing tools like axe-core and guided teams through using assistive technologies such as screen readers.

  • Hosted weekly office hours to provide ongoing support for accessibility related questions and challenges.

  • Founded Accessible@Hearst ERG group to promote inclusivity across Hearst Magazines.

NOTICE

Due to a Non-Disclosure Agreement, detailed designs, metrics, and internal materials cannot be publicly shared. However, I am happy to discuss my role, process, and key outcomes in a private conversation—please reach out for more information.