A designer's guide to documenting accessibility & user interactions.
summary
Uses a two-file Sketch system linking component docs and page docs into Jira, with annotated mockups and a reusable Sketch component file toolkit; documents color pairings with a color matrix (example contrast 6.9 vs 1.6), all component states (default, hover, focus, disabled), and explicit keyboard interaction flow (Enter, Space, Esc, Up/Down). Designs for prefers-reduced-motion, supplies alt text rules, builds a Storybook-alike design system, and reports documentation adds roughly 5–10% to authoring time but fixes issues early (keyboard fix rolled out across components).
AI-written summary · about
chapters (4)
- 0:00Start
- 6:32This is NOT a substitute for communicating with people!
- 38:59Design documentation helps gain time and avoids misinterpretations.
- 39:59Benefits for fellow designers
related talks
47mFrom Parts to Whole – Beyond Design System
43mA11y Need Is Love (But Accessible Docs Help Too)
22mThe designer is the problem, design is the solution
17mNew options for accessible design
49mMaking Pinterest More Inclusive Through Design Systems
10mDesign Systems Showcase: Designing Performance Friendly & Accessible Foundations
44mDesigning with Accessibility in Mind
59mImproving Accessibility Through Design Systems