Mark Learst - Senior Frontend & Design Engineer

The Problem

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.

The Solution

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.

Technical Implementation

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

Impact & Adoption

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.