Open sourcing our Annotation Toolkit ⚒️

[ebndev]

GitHub's Annotation Toolkit is now available as an open source Figma library. This comprehensive annotation system helps you organize your design canvas, diagram your 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.

What's new

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.Expand commentComment on line R22ResolvedCode has comments. Press enter to view.
• 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. Expand commentComment on line R30ResolvedCode has comments. Press enter to view.
• 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.

Why this matters

When we analyzed GitHub's accessibility audit data, we found that 48% of our accessibility issues could have been prevented in the design phase. We found that other annotation tools often lack training material and are built for specialists, creating unnecessary gates in the design handoff process. The GitHub Annotation Toolkit can help experts and novices alike through approachable, intuitive, and comprehensive documentation.

What makes it unique

Comprehensive coverage: In addition to the accessibility coverage that other libraries provide, our toolkit addresses nearly every type of design-preventable accessibility issue under WCAG guidelines.

Easy customization: Figma variables help easily adapt layouts and visual styles, making it simple for teams to customize the toolkit to match their brand and workflow needs.

Extensive documentation: Rather than just releasing the tool, we've created comprehensive documentation covering best practices, handoff workflows, in-depth tutorials, and guidance for teams who want to create their own design system integrations.

Start using the GitHub Annotation Toolkit

The Annotation Toolkit is now available in a couple of ways:

• GitHub: Visit the annotation toolkit repository to access the exported Figma file, documentation, and component specifications.
• Figma Community: Download the toolkit directly from the @github Figma Community profile.

The toolkit is released under a CC-BY-4.0 license with proper attribution to the CVS Health Inclusive Design team whose foundational work made this possible.

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. 🌟

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.

Follow our accessibility work on the GitHub blog.