Accessibility Annotation Kits Are More Than Just Notes

When it comes to accessibility in design, the conversation too often starts after the designs are finished. Annotations get slapped on late in the game, if at all, and developers are left to guess at what was intended—or worse, accessibility gets bolted on retroactively. This is a pattern I’ve seen (and disrupted) time and time again.

For over three years, I’ve served as the accessibility specialist for Howard Hughes Medical Institute’s (HHMI) BioInteractive team, working side-by-side with their brilliant designers and content leads. Together, we’ve pioneered an approach to born-accessible design that starts in Figma and ends in clean, conformant, user-centered code.

From Audit Afterthought to Built-In Strategy

Let’s be honest: accessibility annotations aren’t just a “nice to have.” They’re essential if you want to:

• Reduce ambiguity in developer handoff
• Align design and development teams on interactive behavior
• Ensure consistency across components
• Future-proof your design system

Annotations don’t have to clutter your design. They clarify it. And if you're doing it right, they become a living record of accessibility decisions—who they help, what the requirements are, and why they matter.

How We Build at HHMI BioInteractive

At HHMI, our design process has evolved into a deeply collaborative and documented accessibility workflow. Here’s how I support every new interactive:

• A robust Accessibility Annotation Repository, built in Figma, filled with designer- and developer-friendly guidance.
• A project-specific accessibility annotation kit, fully WCAG-aligned, that includes common patterns, components, and content behaviors.
• Detailed walkthrough documents for each project explaining:
  • The intent of the interactive
  • Expected user flow and behavior
  • Keyboard and assistive tech compatibility

This documentation ensures that designers, developers, content leads, and auditors are aligned before any code is written.

The Design System Vision: Accessibility First

I’m now working closely with my favorite designer to build a fully annotated design system for HHMI BioInteractive, grounded in WCAG conformance and Figma best practices. Everything we create is designed to:

• Be reused across future interactive projects
• Communicate expected behaviors explicitly
• Support consistent, born-accessible builds

We’re not guessing. We’re systematizing.

Our Tools of Choice

We make this all work in Figma using tools like:

• Able Accessibility Plugin – to annotate color contrast, focus order, and more.
• Ebay Include Plugin – for embedding accessibility metadata in layers.

Figma is our hub, but accessibility is our throughline.

Annotations Aren’t Just for Designers

Annotations aren’t just for designers—they’re for developers, content strategists, QA testers, and auditors. Good annotations:

• Provide context beyond the visuals
• Anticipate edge cases
• Communicate behavior, not just appearance

This isn’t extra work. It’s essential infrastructure for accessible, scalable product development.

Putting Theory into Practice: GitHub’s A11y Annotation Approach

Want to see what this looks like in real product teams? Watch how GitHub uses Figma and a11y annotation kits for designer training in this powerful talk by Alexis Lucio and Jan Maarten, Senior Accessibility Designers at GitHub.

They walk through how GitHub uses bootcamps, embedded design practices, and real-world Figma annotation strategies to get teams involved because accessibility training only works if people want to use it.

📹 See the full video with transcript: GitHub’s A11y Annotation Talk

📝 Want to learn more? Check out: Celebrating 1 Year of A11y Design Bootcamp

‍

More Kits Worth Exploring

If you're looking to explore other approaches and tools that inspire accessibility-first design in Figma, here are some annotation kits worth checking out:

• Web Accessibility Annotation Kit by Daniel Henderson-Ede, Jan Maarten, and Kevin Oliveira – Clean, practical, and structured for team collaboration. – Clean, practical, and structured for team collaboration.
• Stephanie Walter’s Web Accessibility for Designers Kit – Includes a checklist, practical guides, and Figma templates. – Includes a checklist, practical guides, and Figma templates.
• GitLab’s Accessibility Bluelines – Used in production to document behaviors and design intent. – Used in production to document behaviors and design intent.

I don’t just annotate—I architect accessibility strategies. If you’re working in Figma and want to build with an accessibility-first mindset, let’s connect.

Whether you need an annotation system, help aligning your team on WCAG goals, or just a few tips to tighten up your developer handoff—I’m here for it.

💬 I’m a design annotation ninja, and I’d love to support your next project. Request a Quote to get started.

Work With Graceful Web Studio

We build accessible, conversion-focused Webflow websites for businesses across Yakima and the US. Crystal Scott is a Certified Professional in Web Accessibility (CPWA) with 11+ years of front-end experience.

Our services:

• Website Design & Development
• Website Rebuilds & Platform Takeovers
• Monthly Website Support & Maintenance
• Search Engine Optimization (SEO, AEO & GEO)
• Webflow Accessibility Remediation & Consulting
• Website Add-Ons & Integrations

Transparent pricing on every service page. Request a quote and get a response within one business day.