Accessibility Assistant
Add reader output and focus order to your layout
Plugin Preview
About this plugin
About this plugin
The A11y - Focus Order plugin is now the Accessibility Assistant! It not only lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications, but also provides checklists and notes to review designs for accessibility before you spec. Share these annotations with designers, and then share the spec with engineers as part of your design. Accessibility is critical for good design. Making your designs accessible makes them easier to use for everyone. Our plugin addresses a very specific corner of accessibility. As designers, we often think about accessibility visually, in terms of color contrast, type readability, etc. This plugin addresses accessibility for keyboarding and screen reader software. It helps designers and engineers create a plan for how their product will interact with this technology so that screen readers can communicate properly with their users.
Annotating the focus/tab order for your designs is critical for accessibility
To create websites and applications that are inclusive and accessible to everyone, the designs that you create need to be device independent, which means that anyone can interact with your designs regardless of whether they’re using a mouse, keyboard, touch, gaze, or voice.
With this plugin you can
* Add accessibility annotations over your design
* Bulk add, remove, reorder, and update your annotations
* Create multiple annotation sets that can be named and styled with a different color
* Annotations are stored in a single layer group that can be toggled on/off
What’s new in this update
* Ability to add Heading, Landmark, Image alt-text and Alert annotations
* Accessible Design checklists based on the UI Tenets “Understandable”, “Efficient” and “Habituating”
Learn more about the plugin and accessibility best practices
Walk through the tutorial for this plugin. To learn more about accessibility for the web visit w3.org. Check out the WAI-ARIA patterns for the most common elements you’ll use https://www.w3.org/WAI/ARIA/apg/patterns/. Learn how to write web content that is more accessible to people with disabilities https://www.w3.org/WAI/tips/writing/.
This plugin is brought to you by Microsoft
Special thanks to Abhishek Konnur, Animesh Mishra, Swati Aggarwal and HCL Corp., Clint Covington, Manika Malhotra, David Snow, Jackie Tidwell, Andrea Fowler, Emily McLean, Ben Truelove and most especially our closer, Kelly Gorr.
Plugin Details
Version | 47 |
---|---|
Created | July 12, 2019 |
Last Updated | August 11, 2025 |
Category | Accessibility tools |
Creator | Eugene Gavriloff |
Stats | 22245 installs, 1364 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:build/ui.html
- main:build/controller.js
- Document Access:dynamic-page
- Network Access:
Image assets, fonts, telemetry
- Editor Types:figma
- Allowed Domains:
- *
More Like This
Discover other plugins in the Accessibility tools category.
Stark - Contrast & Accessibility Checker
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥