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. I. Set the scope Though you may need to audit everything in the system, it's not realistic to do it all at once or expect to be finished in a few days."

"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). III. Identify accessibility standards 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"

Prepare an audit structure by defining a realistic scope and timeline rather than attempting to audit an entire Design System at once. Choose both manual and automated tools for designs and code: use Figma plugins and contrast checkers for tokens and visuals, and use Storybook add-ons, axe DevTools, or Lighthouse for component-level reviews. Test with assistive technologies such as keyboard navigation and screen readers (VoiceOver, Narrator). Identify the legal and technical accessibility standards that apply (for example EAA referencing WCAG 2.1 AA, or Section 508 referencing WCAG) to set clear acceptance criteria.

Read at Medium