Auditing your Design system for accessibility

"Design Systems have hundreds (sometimes thousands) of design tokens, complex UI components, as well as guidelines for usage-making it easy to feel buried in the workload. That's why creating an audit structure upfront is so important. In this stage, you'll set the scope of the audit, select tools to use, and identify the accessibility standards to measure your Design System with."

"Design and tokens in Figma: Use tools such as Figma's native color contrast checker, Stark's plugin to check contrast or vision simulators, or Microsoft's Accessibility Assistant plugin for accessibility specs. Coded components in Storybook: Use tools like Storybook's accessibility add-on, axe Devtools' browser extension, or Chrome's Lighthouse to automate finding accessibility issues at the component level. Assistive technologies: There are many assistive technologies to test components with, such as simply using your keyboard to operate the component or using screen readers like Voiceover (macOS) and Narrator (Windows)."

"Depending on where your product is used, as well as who uses your product, you'll have different accessibility standards to comply with. This helps you determine your acceptance criteria (or what "good" looks like). For example, if your product is used anywhere in the European Union (EU), you need to comply with the European Accessibility Act (EAA), which references WCAG 2.1, Level AA. Or if your product is used by federal agencies in the United States, you need to comply with Section 508, which references WCAG"

Begin by defining a realistic audit scope and prioritize specific tokens, components, or guidelines to avoid attempting a complete system audit at once. Choose a mix of manual and automated tools for both design files and coded components. For Figma designs and tokens, use color contrast checkers, vision simulators, and accessibility plugins. For Storybook components, use accessibility add-ons, axe DevTools, or Lighthouse. Test components with assistive technologies such as keyboard navigation and screen readers like VoiceOver or Narrator. Identify applicable legal and technical standards to set acceptance criteria, such as WCAG 2.1 Level AA referenced by the EAA or Section 508.

Read at Medium