Accessibility Annotations for Handoff: What Actually Works
Notes added to designs that specify headings, landmarks, focus order, labels and alternative text.
Priya Raghunathan
At a glance
- Headings annotations record heading levels
- Focus order specifies the order keyboard users move through
- Names accessible names for icons and controls
- Patterns the ARIA Authoring Practices Guide defines expected behavior
Why it matters
Why it matters: Developers cannot infer accessible structure from visuals, and annotations prevent guesswork.
Best practice
- Annotate heading levels and landmarks
- Specify focus order for complex layouts
- Provide alternative text for meaningful images
- Reference known patterns
- Review annotations with developers
Common pitfalls
Watch out for:
- Leaving structure to developers to guess
- Annotations added after build
- Custom patterns without behavior notes
- Missing alternative text
When to call in a specialist
Bottom line Bring in help when accessibility requirements are contractual.
Where this comes from
- W3C ARIA Authoring Practices Guide — Patterns
- W3C Web Accessibility Initiative — Designing for Web Accessibility
The figures and practices above come from the sources listed.
Working on something like this?
We take on UI & UX Design work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
