Design system annotations, part 1: How accessibility gets left out of components

This post explores how accessible design system components can still produce inaccessible designs, and introduces GitHub's annotation toolkit as a solution.

• •Accessibility annotations convey design intent not visible in mockups, covering focus order, alt text, form labels, and assistive technology behavior
• •Accessible components don't guarantee accessible designs: heading hierarchy, responsive layouts, and contextual image descriptions still require manual attention
• •GitHub built an internal Figma Annotation Toolkit (now open source), based on CVS Health's Inclusive Design annotation kits, to make accessibility documentation intuitive for all designers
• •The toolkit integrates annotations directly into Primer components, reducing redundant annotation work while capturing per-instance variations
• •WCAG compliance alone is insufficient; direct input from assistive technology users is emphasized as the most critical part of accessibility work