Accessibility plug-in

Automating semantic design & ARIA specs through rapid AI prototyping

Role

UX Designer

Timeline

2026 · 2 weeks

Ownership

Explored independently using LLMs and Cursor to prototype an automated accessibility workflow plugin.

Project summary

An experimental design tooling project exploring how AI can eliminate accessibility friction before handoff. Using Cursor, Figma, and AI vision logic, I prototyped a workflow that automatically infers reading order and screen-reader roles. Validating how AI can shift compliance upstream without engineering overhead.

Problem

Reactive accessibility audits at the end of dev cycles cause compliance risks and costly delays

Solution

Shifting accessibility into Figma to simulate screen readers and auto-generate Dev Mode specs

Objectives

Catch issues early.
Catch screen-reader and focus flaws during design rather than during expensive QA cycles.

Automate compliance. Connect Figma to our Design System MCP to auto-fill accessibility tokens and ARIA labels.

Eliminate developer guesswork. Deliver inspectable accessibility metadata inside Figma Dev Mode without canvas clutter.

Discovery

Accessible components aren't enough to ensure a compliant user experience

Context. An audit across EF sites revealed recurring accessibility breakdowns, un-labeled icon buttons, illogical reading orders and keyboard focus traps.

Legal & brand risk. With the European Accessibility Act (EAA) enforcing strict legal compliance, accessibility can no longer be a reactive QA checklist.

Challenge. Assembly-level accessibility remains invisible on the Figma canvas, meaning designers lacked an intuitive way to define ARIA attributes, while developers were forced to guess semantic intent during execution.

Decision

Driven by upcoming EAA accessibility mandates, I initiated a design exploration to solve screen-reader friction upstream. By prototyping an AI-assisted workflow, I validated how shifting audits into Figma could eliminate developer guesswork and prevent costly downstream rework.

Design

Bridging the gap between design intent and the engineering reality to minimise the need for costly rework

I explored a Figma plug-in, which acts as the semantic layer between the Figma canvas and Dev mode. It allows designers to listen to their designs by simulating a screen reader, automatically proposing a focus order, which the designer can then refine and generate hand off documentation with (Fig. 1).

Scan frame: Plug-in analyses all visual layers on a selected Figma canvas frame.
Fetches MCP metadata: Syncs with the Design System MCP server to retrieve pre-defined ARIA roles, focus traits, and component tokens.
Visualise & modify: Renders an interactive spatial focus path on the canvas and allows user to add or adjust any labels.

Export: Embeds production-ready accessibility specs directly into Figma Dev Mode.

Fig.1 Exploring with Cursor to see how the plug-in would work in Figma.

Fig.2 The plugin acts as a bridge between the design and the final build, transforming intent into documentation and production-ready code snippets.

Navigating technical trade-offs. Building a full Design System MCP integration from day one was too heavy for an early exploration. We needed a fast way to parse canvas elements and test screen-reader simulation logic upfront.

Challenge 1. Figma perceives layouts as a flat collection of shapes and text, lacking any inherent understanding of functional hierarchy.

Solution. Build a AI powered prototype that would mimic the functionality of the plug-in (Fig. 3). This scrappy bridge allowed us to immediately test the screen-reader preview experience and prove user value before connecting to the Design System MCP.

Decision: Rapid AI prototyping to validate value

Building a full MCP server integration from day one was too resource-heavy for an early exploration. I leveraged Cursor, Figma Make, and AI vision logic to analyse frame screenshots, infer reading order, and generate ARIA attributes, delivering a working functional prototype in days to validate feasibility without engineering overhead.

Fig.3 I used Figma Make to create the interface and the interactions, allowing a reading order preview on the side.

Key takeaways & Next steps

Validated technical feasibility. Proving that multimodal AI vision models can reliably infer complex UI reading orders and map ARIA roles from visual frames.

Design System MCP integration. Proposed architecture for connecting canvas tokens directly to design system repositories for automated compliance checks.

Pilot rollout. Established a blueprint for pilot testing with design teams across EF to measure speed-to-spec gains in future production sprints.

Following the redesign, I conducted a second task-based usability study to validate the design's ROI and mitigate launch risk. Participants described the new panel as "considered," "smooth," and "a pleasure to use".

The TCR for the key task (editing a section with flex layout) increased by 43%. Further for participants who previously completed the task saw a 9% reduction in time to completion.

I noted some users preferred old suboptimal settings due to habit, stressing the necessity of careful change management and avoiding unnecessary disruption to established workflows.

Search interaction pattern

Tour leader platform

Search interaction pattern

Tour leader platform