The eBay Include accessibility annotation Figma plugin is a tool to make annotating for accessibility (a11y) easier — easier for designers to spec and easier for developers to understand what is required.
The plugin was developed by members of the accessibility and design teams at eBay and is released for public use on Figma. You can view and install the latest version of the plugin here.
Version 17 adds a read-only inspect experience in Figma Dev Mode so developers can review existing annotations without changing the design file.
Features:
- added a read-only Dev Mode inspect experience, with a dashboard of annotated pages and previous/next step navigation
- added implement and test guidance from existing annotations (web and native); Color blindness is skipped in inspect
- added developer-focused step tips while keeping Design Mode playbook links
- scans other Figma pages in Dev Mode so annotations are not limited to the current page
- dashboard grid reflows as the Dev Mode panel is resized
Bug fixes:
- guard document writes in read-only Dev Mode (annotation key migration, designer checks, layer visibility) so opening inspect no longer throws
- fix contrast sampling using the wrong corner of a text node
- check native touch targets against the native minimum size
- fix collapsed step tip layout
- fix Dev Mode step footer scrolling out of view
- clicking a focus group in Dev Mode now zooms to and selects the Group Area layer
- tightened inspect copy across annotation steps
Open source code:
- updated manifest to use
editorType: ["figma", "dev"]withcapabilities: ["inspect"] - centralized plugin constants (sizes, WCAG values, loading timeouts)
- added an ErrorBoundary fallback
- ignore non-plugin iframe window messages so listeners do not crash
- added prettier format scripts and a combined
lint:allcommand
Near term bug fixes & improvements
- Scan for svg (alternative text)
- Add delete in multiple steps (v14)
- Add images manually in Alternative text step (v14)
- Add ability to edit landmarks (v12)
- Placing new arrow annotation below at end of previously placed arrow (v11)
- Touch target (v11)
- Updates for keyboard navigation (v10)
- Generate Responsive Designs from a single design (v10)
- Rename landmarks to use the HTML names (e.g. footer) and not aria roles (e.g. contentinfo).
Future explorations
- Touch target revision (v15)
- Split between focus & reading order (v16)
- Dev Mode inspect experience for developers (v17)
- Pointer gestures
- Interactive elements step
- Use of AI to generate labels
- Cognitive step
- Hearing step
npm i
npm run dev
To open Inspect mode
⌘ Command + ⌥ Option + I
With the iframe of web app in a Figma plugin, hot-reloading doesn't really work, so to re-start the plugin quickly:
⌘ Command + ⌥ Option + P
To open the plugin in development mode on Figma, map the manifest file at the root of this project.
See docs for more details on the project file structure and Figma layer methods used in this project.
The main purpose of this repository is to provide a jumping-off point for developers and designers who want to expand upon or customize the plugin's accessibility annotation functionality. We welcome pull requests, feature ideas, and bug reports.
- Pull requests are always welcome
- Submit GitHub issues for any feature enhancements, bugs, or documentation problems
- Read the Contribution Tips and Guidelines
- Participants in this project agree to abide by its Code of Conduct
Apache 2.0 - See LICENSE for more information.