Annotation Toolkit

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.

The Annotation Toolkit provides a complete solution for annotating accessibility considerations in Figma designs. Developed from our internal accessibility work, this toolkit fills a critical gap in the design-to-development workflow where important details often get lost.

Features include:

• Flow lines and canvas utilities: Organize and label your frames and flows. Convey important details for design status, scope, transitions, interactions, validation states, and focus management.
• User interactions: Keyboard shortcuts and a complete range of basic, specialized, and advanced touch gestures, mouse actions, device settings, and platform functions.
• Page structure and landmarks: Create a content outline and make semantic heading levels and landmark regions clear.
• Lists and tables: Group related items to show clear contextual relationships and outline table structure for more complex data presented with rows and columns.
• Media: Describe informative and decorative images. You can also embed video and audio.
• Buttons and links: Clearly label controls that perform actions on a page and those that navigate elsewhere.
• Form elements: Fill out the hidden semantics of all form fields and controls that accept data input from users.
• Ordering: Outline the focus order to support keyboard navigation (using tab or arrow keys) as well as any reading order that differs from what is shown.
• Metadata: Document titles and language annotations to support better SEO and localization.
• System feedback: Highlight important information, potential issues or errors, successful actions, and live region announcements.
• Interface guidelines: Diagram component anatomy for guidelines and prototypes.
• Primer A11y Presets: Bespoke annotations for GitHub's design system components which may be instructive for building preset annotations for other design systems.
• Accessibility checklists: Interactive lists for designers and engineers to track the progress of a design as teams address key WCAG guidelines and ensure best practices are accounted for early.

Additionally, the library supports iOS and Android platforms, allowing you to create accessible mobile apps through clear, structured notes for native elements and screen reader announcements.

Download the Toolkit

Resources

Design system annotations (GitHub Blog series)

The Accessibility Design team created a set of annotations to bridge the gaps that design systems alone can’t fix and proactively addresses accessibility issues within Primer components.

• Part 1: How accessibility gets left out of components
• Part 2: Advanced methods of annotating components

More from the GitHub Blog

• Level up design-to-code collaboration with GitHub’s open source Annotation Toolkit
• How we’re building more inclusive and accessible components at GitHub by @ericwbailey

Further reading

• Accessibility annotation kits only annotate by @ericwbailey
• ​Annotating Designs using Common Language by Craig Abbott
• 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

Learn more

Explore our comprehensive documentation for deep dives, best practices, implementation strategies, and more.

If you're new to annotations, check out our Getting Started guide.

For questions and community support, visit the repository and join in with discussions, and feel free to file issues with any bugs, questions, or feature requests.