Skip to main content
11 October 2023

Ensuring accessibility in design components can significantly improve product usability while preventing costly accessibility bugs. The expense of addressing accessibility issues increases exponentially if these bugs are discovered after a product’s release. In fact, post-release bug fixes can be up to 30 times more expensive than addressing them during the requirements phase. Designing with accessibility in mind can help reduce these issues and create better user experiences for all.

Microsoft Design’s A11y – Focus Order plugin for Figma is a valuable tool that promotes accessibility-conscious design. It simplifies the process of adding accessibility annotations to interactive elements in desktop, website, and mobile applications within your Figma designs.

In the latest version (Version 34) of the A11y – Focus Order plugin, there are several exciting updates:

  1. Integration with Fluent 2 Web Toolkit and Other Component Libraries: The plugin now seamlessly integrates with the Fluent 2 Web Toolkit and other component libraries. This integration streamlines the annotation process, making it faster for designers. Engineers also benefit from included documentation links that allow them to access the code directly.
  2. Simplified Accessibility Details: When using library controls, the plugin provides accessibility details directly from the library’s documentation, reducing the need for manual input. Custom control information may still need to be added, such as creating an ARIA label in the Name field.
  3. Enhanced Annotation Table: The annotation table has been improved for better readability and usability, ensuring that designers can work more efficiently.
  4. Improved Tutorial: The tutorial walkthrough has been enhanced with specific examples and accessibility guidance, enabling users to utilize the tool effectively, even without extensive accessibility expertise.
  5. Bug Fixes: Several bugs have been addressed to enhance overall performance.

The A11y – Focus Order plugin empowers designers to create more accessible designs, ultimately resulting in improved user experiences for a wider audience.