Include

an accessibility annotation Figma plugin

Docs ∙ Try in Figma ∙ Roadmap ∙ Contribute

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.

Near term bug fixes & improvements

• Add ability to edit landmarks
• Scan for svg (alternative text)
• Add images manually (alternative text)
• Synchronize copy/paste, undo/redo between the plugin and Figma layers
• Allow designer to annotate a section of a design
• Add delete in multiple steps
• 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
• Pointer gestures
• Split between focus & reading order
• 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.