Built and maintained by Mark Learst.
| Project Health | Status |
|---|---|
| License |  |
| Latest release |  |
| Last commit |  |
| Commit activity |  |
| Open issues |  |
| Closed issues |  |
| Platform |  |
| Tooling |  |
| Figma Community |  |
A11Y Companion is the official accessibility checklist widget for Figma and FigJam, built and maintained by Mark Learst. It brings the A11Y Project Checklist directly into your workflow for manual, team-visible WCAG tracking, with clear guidance and progress.
a11y Companion Widget | Figma Community
A11Y Companion is a Figma widget that helps you:
- Review and check off accessibility requirements for your project
- Track progress on WCAG compliance
- Collaborate with your team using avatars and real-time updates
- Get actionable, section-based checklist items with clear explanations and WCAG references
Based on the authoritative A11Y Project Checklist, this widget is designed for designers, content creators, and developers who want to make their work more accessible.
- Full A11Y Project checklist, organized by section
- Per-section and overall progress tracking
- WCAG references and detailed guidance per checklist item
- Search and filter across checklist text and WCAG codes
- Bulk section actions (check all / uncheck all)
- Section collapse/expand for faster navigation
- Markdown export with real task-list syntax (
- [ ],- [x]) - WCAG Level Coverage summary in markdown export (
A,AA,AAA) - Works in both Figma Design and FigJam
- Multi-language support — 13 locales: English, Spanish, French, German, Portuguese (BR), Japanese, Korean, Ukrainian, Polish, Danish, Norwegian, Swedish, Finnish
- Translation pipeline — automated scripts with term protection for HTML elements, WCAG codes, and technical terms
- Locale-aware UI — all settings labels, progress text, contrast inspector notices, and template names localized
- WCAG levels in all languages — A/AA/AAA conformance badges now display in every locale
- Locale-safe number formatting — progress numbers use locale-appropriate thousands separators
- Stable section state — open/close state persists correctly across language switches
- Variable-first design-system guardrails and baseline checks
- Runtime contrast-safe accent resolution for themed UI states
- Canonical variable imports and removal of legacy alias usage
- Contrast Inspector with on-canvas preview, gradient-aware checks, and property-menu toggle
- AvatarStack activity tracking from real check/uncheck interactions
- Theme selection simplified to explicit
light/dark
- Install the widget in your Figma or FigJam file.
- Open the widget and review the checklist items by section.
- Search for specific items using the search bar at the top.
- Check off items as you complete them; your team can see your progress in real time.
- Use bulk actions (☐/✓) next to section titles to mark all items complete/incomplete.
- Click the collapse/expand button (▲/▼) to quickly navigate sections.
- Hover over checklist items for WCAG references and detailed explanations.
- Use the property menu to:
- Change language (13 locales including English, Spanish, French, German, Japanese, Korean, and more)
- Change checklist template
- Switch between light/dark themes
- Switch accent color themes (Default, Indigo, Emerald, Rose, Slate, Cyan)
- Toggle Contrast Inspector
- Export checklist progress to Markdown
- Enable Contrast Inspector from the property menu.
- Select a layer on canvas.
- Press Check in the inspector row.
- Review:
- preview sample
- ratio and grade
- foreground/background metadata
- Use Swap to preview reversed foreground/background contrast where supported.
- Use Clear to reset the current inspector result.
The inspector supports solid and single-gradient scenarios. Unsupported combinations are reported with explicit status messages.
This repository maintains the official A11Y Companion widget listing. Please do not publish forks, clones, or modified builds to Figma Community. Use the official listing linked above. For changes or requests, open an issue.
Checks used for maintaining the official repository and release workflow:
pnpm run build- bundle widget code todist/code.jspnpm run watch- rebuild on file changespnpm run lint- ESLint plus design-system architecture checkspnpm run tsc- TypeScript checks (--noEmit)pnpm run check:contrast- AA contrast checks for theme combinationspnpm run check:contrast:suggest- nearest safe shade-step suggestionspnpm run theme:baseline:check- compare theme output to baseline snapshotpnpm run test:hardening- hardening regressions for shared/widget behavior
Public roadmap updates are published with release notes in CHANGELOG.md.
Found a bug or regression in the official widget? Open an issue here:
Please include:
- Figma or FigJam context
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if UI-related)
- Environment details (OS/Figma desktop version)
For security-related reports, use the repository security policy:
This repository is maintained for the official widget release. Use only the official listing/repository for the safest and most up-to-date version. Unofficial copies may include unreviewed changes, security issues, or regressions and are not supported by this project. Please do not republish this widget under a different name or listing in Figma Community.
- Checklist data and guidance from The A11Y Project
- Widget built with the Figma Widget API
Accessibility is personal for me. I have been the eyes and ears for my legally blind and deaf brother for decades, and I have seen how often the web shuts him out. That loss of access is not theoretical. It is hours of digging through sites that do not care. I do not share this for vibes. I share it because it is the reason I built this, and why I will keep caring about getting it right. My brother is my biggest inspiration.
This project is licensed under the Apache License 2.0. © 2025–2026 Mark Learst
