A11y - Focus Order

About this plugin

About this plugin

The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations 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

1. Add accessibility annotations over your design
2. Bulk add, remove, reorder, and update your annotations
3. Create multiple annotation sets that can be named and styled with a different color
4. Annotations are stored in a single layer group that can be toggled on/off

What’s new in this update

1. Improved accessibility of the UI using Fluent controls. They are clearer, meet contrast requirements, and are keyboard accessible.
2. Added the ability to identify the platform when creating an annotation spec. iOS and Android components are available to use, and the spec will point to the iOS and Material Design pages, respectively.
3. In the UI each spec has an icon to reflect the platform it’s made for.
4. Annotation table reflects the name of each set now. Finally, right?
5. Added a playground file with the tutorial and example UI to try out the plugin.
6. Resolved a number of bugs to improve performance and reliability. It is obviously faster and only redraws what it needs to now instead of redrawing the entire set for every edit, addition or removal.
7. Can now edit the component names and notes directly in the table

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 Himanshu Shah and HCL Corp., Clint Covington, Manika Malhotra, David Snow, Jackie Tidwell, Andrea Fowler, Emily McLean, Ben Truelove and most especially our closer, Kelly Gorr.