VoiceOver Annotator

VoiceOver Annotator lets you design and document iOS accessibility right in Figma. Mark up each layer the way VoiceOver reads it, see the exact spoken utterance live, and hand a clear spec to engineering.

What you can do:

Mark any layer as Accessible, a Container, or Non-accessible.

Set Label, Value, Traits (Button, Header, Adjustable, Switch, Image, Link…), enumerated Adjustable values, plus Custom actions and descriptions.

Preview the exact VoiceOver utterance as you type — e.g. “Size: Medium, 2 of 3. Adjustable.”Build the reading order — drag to override VoiceOver’s default top→bottom, leading→trailing order.

Outline annotated elements on the canvas with numbered, colour-coded overlays.

Generate a description panel next to the frame, or write native Figma annotations visible in Dev Mode.

Download a .vodesign preview to open in the VoiceOver Designer app.

Auto-annotate a frame in one click — a local name heuristic (fully offline) or AI using your own OpenAI or Anthropic key.

Annotations are saved on each layer, so they travel with the file and survive reopening.

Based on the accessibility methodology from the book “About Accessibility on iOS” by Mikhail Rubanov https://bookshelf.dev/a11y-book/en. Co-authored with Matvey Myasoedov @greatmatisOpen source: https://github.com/AccessibilityTools/voiceover-annotator-for-figma