a11y Companion

Designers working on accessible interfaces faced a fundamental workflow challenge: accessibility checklists lived outside their design tools. This created:

• Context switching between Figma and external WCAG documentation
• No way to track accessibility progress directly in design files
• Accessibility often forgotten until developer handoff or QA
• Teams reinventing accessibility checklists for each project
• Designers unsure which WCAG criteria applied to their designs

The A11Y Project had a comprehensive accessibility checklist, but it was a website—designers needed this information embedded in their design workflow, not a browser tab away.

a11y Companion is a Figma widget that embeds The A11Y Project Checklist directly into design files, making accessibility a first-class citizen in the design process.

Interactive Checklist

Built a widget interface that presents the full A11Y Project Checklist with:

• Check/uncheck functionality to track completed items
• Progress indicator showing completion percentage
• Category organization (Content, Design, Development, etc.)
• WCAG 2.2 tooltips explaining each criterion on hover
• Persistent state saved with the Figma file

Search & Filtering

Designed search functionality allowing designers to quickly find relevant accessibility criteria:

• Real-time search across all checklist items
• Filter by category (Content, Design, Development, QA)
• Filter by completion status (completed, incomplete, all)
• Keyboard shortcuts for power users

Bulk Actions

Added productivity features for managing checklists at scale:

• Mark all items complete/incomplete in one action
• Reset checklist to start fresh on new projects
• Bulk select items by category

Export Capabilities

Built export functionality for sharing progress with teams:

• Markdown export for documentation
• HTML export for standalone pages
• JSON export for programmatic use
• Copy to clipboard for quick sharing

Dark Mode Support

Implemented theme detection that matches Figma's interface mode, ensuring the widget is comfortable to use in any environment.

Figma Widget API

Built using Figma's Widget API with React-like components:

• State management using Figma's widget storage API
• Custom UI components matching Figma's design system
• Event handling for checkbox toggles and search input
• Performance optimized for rendering 100+ checklist items

WCAG 2.2 Integration

Mapped each checklist item to specific WCAG 2.2 success criteria:

• Tooltips explaining the "why" behind each item
• Links to official WCAG documentation
• Conformance level indicators (A, AA, AAA)
• Context about which roles should address each item

Community Publishing

Published to Figma Community with:

• Detailed README with usage instructions
• Screenshots demonstrating key features
• Version history and changelog
• Open-source license on GitHub for contributions

a11y Companion has changed how design teams approach accessibility:

• 200+ active users across companies ranging from startups to Fortune 500 enterprises
• Accessibility shifts left by embedding WCAG criteria directly in design workflows
• Progress tracking gives teams visibility into accessibility coverage before development
• WCAG 2.2 education through contextual tooltips that explain each criterion
• Export capabilities enable handoff documentation for developers and QA teams
• Open-source contribution to the accessibility community, making a11y easier to adopt

The widget is actively maintained on Figma Community and GitHub, serving as a foundational tool for teams committed to building accessible digital experiences.