Back to Plugins
Accessibility Assistant

Accessibility Assistant

Add reader output and focus order to your layout

accessibility designannotationkeyboard navigationaccessibilityscreen readerinclusive designwcagtab orderfocus order

Plugin Preview

Accessibility Assistant 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

Version47
CreatedJuly 12, 2019
Last UpdatedAugust 11, 2025
CategoryAccessibility tools
CreatorEugene Gavriloff
Stats22245 installs, 1364 likes
PricingFree

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:
    • *