The GitHub Annotation Toolkit is a Figma asset library packed with components to help you organize your design canvas, diagram UI anatomy, and annotate accessibility details. Whether you’re a designer, developer, or product manager, this toolkit meets you where you are—you don’t need to be an accessibility expert. It’s flexible enough to document broad accessibility considerations or dig into the fine details of complex components.
Important
Tell us what you think! We would love your feedback and contributions to help improve the Annotation Toolkit, including any examples of how you’ve used or customized this library. Just open an issue in this repository. GitHub staff can reach out via Slack.
Annotations are notes included in design projects that help make the unseen explicit. They convey design intent that isn't immediately obvious from visual elements alone, improving the usability of digital experiences by providing developers with a holistic picture of how an experience should function. Think of annotations as a visual aid for basic code semantics—they help show how designs should function under the hood.
When annotations are part of our design process, our teams work better together. They're a collaboration tool that can help:
- Close communication gaps
- Prevent quality issues
- Avoid accessibility audit issues
- Eliminate expensive re-work
They can also be used in early design explorations or wireframes to validate functionality. If you find it difficult to annotate a wireframe, that's often a sign that deeper thinking is needed about how the UI should work.
A paid Figma plan is recommended in order to use the components as an asset library.
The components in this library support web as well as mobile (iOS and Android) platforms.
If not already available in your list of libraries, Publish and enable from the Assets tab.
Find the "Annotation Toolkit" library in the Figma Asset panel. This is enabled by default for all internal GitHub design files. For older files, you enable the library by following these instructions.
 |
|---|
| Publish to your Figma instance and add to your file. |
 |
|---|
| The Annotation Toolkit is now available to use in your work! |
- Features - What's in the Toolkit?
- Getting Started - How to use the Annotation Toolkit components
- Annotation Theory - What annotations are and how they can transform our work
- Best Practices for annotating in Figma - Keep the canvas legible regardless of complexity
- Best Practices for avoiding hand-off friction - Planning and collaboration tips to help prevent issues and rework
- How to: Basic Notes
- How to: Button
- How to: Flow Lines
- How to: Form element - Input, textarea, checkbox, etc
- How to: Heading
- How to: Landmark
- How to: Link
- How to: List
- How to: Mobile Annotations - For any platform, including iOS and Android
- How to: Media - Image, Video, and Audio
- How to: Metadata - Page Title and Language
- How to: Ordering - Focus order, Arrow stops, and Reading order
- How-to: Primer components - How to use Primer A11y Presets
- How to: System Feedback - States and Live regions
- How to: Table
- How to: User Interactions - Keyboard shortcuts, touch gestures, mouse actions, device settings, platform functions
- The Tiered Model - Prioritizing around time constraints or knowledge gaps
- Accessibility Checklist for Designers
- Accessibility Checklist for Engineers
- Part 1: How accessibility gets left out of components by @janmaarten-a11y
- Part 2: Advanced methods of annotating components by @janmaarten-a11y
- Accessibility annotation kits only annotate by @ericwbailey
- How we’re building more inclusive and accessible components at GitHub by @ericwbailey
- Auditing Design Systems for Accessibility by Anna E. Cook
- The value of accessibility annotations in inclusive design by Antonio Matera
- A Designer’s Guide to Documenting Accessibility & User Interactions by Stéphanie Walter
This project uses GitHub issues to track bugs and feature requests. Please search the existing issues before filing new issues to avoid duplicates. To get help, submit bugs, ask questions, or make feature requests, create an Issue in this repository. The Annotation Toolkit is under active development and maintained by GitHub staff. We will do our best to respond to support, feature requests, and community questions in a timely manner.
The Accessibility Design team is here to help! GitHub colleagues have multiple ways to reach out to us:
- React to any Slack message with the emoji:
:a11y-design-i-would-like-help-with-this: - Message us in the #accessibility-design or #annotation-toolkit Slack channels
- Schedule a pairing session for a quick check-in, collaboration on a complex problem, or 1:1 coaching
- Submit an A11y Design Office Hours request for design reviews and guidance every Tuesday and Thursday
- Catch up on our A11y Design Checklist video series
- Visit the Accessibility Design repository
- @janmaarten-a11y, Senior Accessibility Designer & Project Lead
- @alexislucio, Senior Accessibility Designer & Project Manager
- @ericwbailey, Senior Accessibility Designer
- @mattobee, Staff Accessibility Designer
Special thanks to the following legends for their early feedback and help improving this library.
- Chelsea Adelman
- Joe Lamyman
- Demelza Feltham
- Julian Kittelson-Aldred
- Devin Owsley
- Jasmine Friedrich
- Daniel Henderson-Ede
- Kevin Oliveira
The GitHub Annotation Toolkit is a fork of the CVS Health Inclusive Design team’s Web Accessibility Annotation Kit (CC-BY 4.0). User interaction annotations were created using modified open source icons by Jordan Stephensen and Yogi Aprellianto (CC-BY 4.0).
This project is licensed under the terms of the CC-BY 4.0 license. Please refer to the LICENSE file for the full terms. When using the GitHub logos, be sure to follow the GitHub logo guidelines.