<aside> 💡 How to embed accessibility into the design → development → QA pipeline. Covers handoff annotations, acceptance criteria, severity classification, and automated testing integration.
</aside>
Designers should annotate these in Figma (or equivalent) so developers don't guess:
| What to annotate | Why | Example |
|---|---|---|
| Focus order | Tab sequence may differ from visual layout | Number interactive elements 1→2→3 in expected order |
| Heading levels | Visual size ≠ semantic level | Mark which text is h1, h2, h3 — not just "large bold" |
| Landmark regions | Developers may not identify them | Mark: header, nav, main, aside, footer boundaries |
| Alt text for images | Only the designer knows intent | Write alt text or mark as decorative (alt="") |
| ARIA states | Dynamic states aren't visible in static mockups | Note: "expanded/collapsed", "selected", "current page" |
| Live region behaviour | Not inferable from the visual | Mark: "announce this on change (polite)" or "interrupt (assertive)" |
| Reading order | Complex layouts (cards, grids) may not read L→R | Number content blocks in the order SR should read them |
| Hidden from AT | Decorative elements that shouldn't be announced | Mark decorative icons, background patterns as aria-hidden |
Add these to user stories alongside functional criteria. Format: "As a [user using AT], I can [action] so that [outcome]."