Accessible Design Systems: The Engineering Architecture Checklist

Accessible Token Architecture

Never define raw color palettes without verified background-foreground pairings. Color tokens should be semantic (e.g., color-text-primary, color-surface-elevated) rather than descriptive (color-gray-700). Every pairing must be programmatically checked against the WCAG AA ratios of 4.5:1 (normal text) and 3:1 (large text and non-text UI components).

Keyboard Interaction Contracts

Every UI primitive must have an explicitly documented keyboard interaction contract:

• Button: Enter and Space trigger the action.
• Tabs: Tab moves into the tablist; Arrow keys navigate between tabs; Tab moves out to tabpanel.
• Modal Dialog: Tab is trapped within the open modal; Escape closes the dialog; focus returns to the triggering button.
• Accordion: Enter/Space expands/collapses the section.

Universal Focus Ring System

Design systems must provide a global focus indicator that passes WCAG 2.2 SC 2.4.13. Avoid using light blue outlines that disappear against white backgrounds. A 2-3px solid ring with an offset or contrasting double-outline guarantees visibility against any background.

Automated CI & Storybook Verification

Integrate @storybook/addon-a11y directly into your component workflow. Configure automated pull request checks that fail the build if an updated component violates axe-core rules.