MatthewMarshallHuntsberry

a11y 2025: Embedding Accessibility into System Infrastructure

Annotated modal component showing key accessibility features: visible focus outline, labeled form fields, accessible error text, clearly defined tap targets (≥24×24px), and escape key support. ARIA roles and keyboard navigation patterns are visually mapped to demonstrate compliance with WCAG 2.2 and EAA guidelines.

Problem

Accessibility across the org had become reactive. Component updates lacked consistent focus states, semantic roles were applied unevenly, and most designers saw accessibility as a QA phase problem, not a core system concern. With the upcoming European Accessibility Act (EAA) deadline and WCAG 2.2 updates, we needed to rethink accessibility as infrastructure, not afterthought.

Slide illustrating disability as a spectrum with three categories: permanent (e.g., one arm), temporary (e.g., arm injury), and situational (e.g., carrying a child). Emphasizes that everyone experiences disability at some point, framing accessibility as universally relevant.
Slide illustrating disability as a spectrum with three categories: permanent (e.g., one arm), temporary (e.g., arm injury), and situational (e.g., carrying a child). Emphasizes that everyone experiences disability at some point, framing accessibility as universally relevant.

Solution

We treated accessibility like performance or security: systemic, invisible when done well, and non-negotiable. By embedding specs directly into design tokens and component logic, and backing it with clear training and documentation, we turned inclusive design into a shared team baseline, not a separate track.

Slide summarizing the POUR accessibility principles—Perceivable, Operable, Understandable, and Robust. Each principle is paired with actionable examples, such as alt text, keyboard access, plain language, and semantic HTML, reinforcing how these standards apply to inclusive design systems.
Slide summarizing the POUR accessibility principles—Perceivable, Operable, Understandable, and Robust. Each principle is paired with actionable examples, such as alt text, keyboard access, plain language, and semantic HTML, reinforcing how these standards apply to inclusive design systems.

Process

Training and culture shift: Delivered an org-wide presentation, "Designing for Everyone," to demystify accessibility and introduce inclusive UX as an ongoing practice (not a checkbox). Framed disability as a spectrum and connected a11y to usability for all.

Slide showing a situational disability example: a fan at a noisy bar struggles to hear commentary while watching a game on their phone. Highlights how loud environments can temporarily impair hearing, illustrating the broader spectrum of accessibility needs.
Slide showing a situational disability example: a fan at a noisy bar struggles to hear commentary while watching a game on their phone. Highlights how loud environments can temporarily impair hearing, illustrating the broader spectrum of accessibility needs.

Component layer enforcement: Updated our core system specs with:

  • Tap targets ≥ 24×24px
  • Focus states visible and consistent across themes
  • Keyboard navigation patterns (modals, tabs, menus)
  • Required ARIA roles and semantic HTML mapping
  • Accessible form inputs, errors, and labels baked into component architecture
Slide showing an annotated modal component with built-in accessibility features, including visible focus states, ARIA roles, semantic HTML, clearly labeled form fields, tappable buttons with ≥24×24px targets, and keyboard navigability. Highlights compliance with WCAG 2.2 and support for accessible modals and form interactions.
Slide showing an annotated modal component with built-in accessibility features, including visible focus states, ARIA roles, semantic HTML, clearly labeled form fields, tappable buttons with ≥24×24px targets, and keyboard navigability. Highlights compliance with WCAG 2.2 and support for accessible modals and form interactions.

Reduced motion and preferences: Added support for prefers-reduced-motion, dark mode variants, and assistive technologies.

Slide outlining practical next steps for implementing reduced motion preferences and semantic structure. Includes checklist-style guidance on using semantic HTML, respecting prefers-reduced-motion, and building reusable accessible components. Reinforces the importance of system-level defaults for inclusive UX.
Slide outlining practical next steps for implementing reduced motion preferences and semantic structure. Includes checklist-style guidance on using semantic HTML, respecting prefers-reduced-motion, and building reusable accessible components. Reinforces the importance of system-level defaults for inclusive UX.

EAA compliance support: Collaborated with product and legal teams to align design system capabilities with upcoming 2025 EAA mandates. Provided internal documentation and examples tied to WCAG 2.2 Level AA.

Slide summarizing key provisions of the European Accessibility Act (EAA) with a visual timeline leading up to the June 2025 compliance deadline. Includes highlights of WCAG 2.2 Level AA requirements and how they apply to digital products, reinforcing urgency and system-wide accountability.
Slide summarizing key provisions of the European Accessibility Act (EAA) with a visual timeline leading up to the June 2025 compliance deadline. Includes highlights of WCAG 2.2 Level AA requirements and how they apply to digital products, reinforcing urgency and system-wide accountability.

Results

  • System-wide accessibility patterns standardized across all new and refactored components, reducing time spent on design reviews and QA audits
  • Shifted organizational mindset from "do accessibility later" to "design access first," reinforced through internal education and adoption rituals
  • Provided clear, scalable specs that designers and engineers could follow without ambiguity, eliminating ad hoc interpretation and inconsistency
  • Established a baseline for compliance that positioned the design system as a primary source of truth for WCAG 2.2 and EAA audits, enabling legal alignment and faster approval pipelines
  • Fostered long-term cultural change by connecting a11y to performance, inclusion, and shared ownership, not legal fear