Figma Screen Reader Plugin
Figma plugin to increase design workshop accessibility and productivity.
Category
Tooling, Accessibility, UI Development
Role
Principal Designer
Client
Microsoft Corporation
Year
2023
The Challenge
I attended a workshop focused on identifying problems with programming tools and improving the user experience from the perspective of screen reader users. I interviewed users and tried to communicate the tools I had created to them. I noticed the difficulty in communication because the designs were visual presentations, while visually impaired users rely on a screen reader as their sole interface daily. Validating the designs and obtaining concrete feedback was challenging.
The Solution
I wanted to design a better process and tool for accessible communication of designs to all workshop participants. I developed a plugin for the Figma design software I was using, which acted as a connecting tissue between the design tool and the operating system’s (macOS or Windows) screen reader (Narrator, VoiceOver, NVDA, JAWS, etc). The tool allowed designer to specify screenreader anouncements (ARIA live regions) that were spoken aloud while the design was being interacted with.
The Impact
The tool enabled more effective communication with visually impaired users, allowing us to receive concrete feedback on our solutions. This process strengthened empathy and collaboration with screen reader users and provided valuable insights into their specific needs. Personally, I gained extensive experience with screen readers, accessibility best practices, Copilot AI-assisted coding, Figma plugins, and the Vue front-end framework, which was new to me.