Essential Accessibility Annotations for a Smoother Design to Development Handoff
summary
Automated scans flag 96.8% of the top million sites for WCAG failures, yet design-phase fixes can cover up to 67% of success criteria; addressing one of the big five issues yields an average ~63% accessibility improvement. Top problems: low text contrast (83.9%, ~31.6 instances/homepage), empty links/buttons (77.3%), missing alt text (55.4%), skipped/missing headings (50.3%), missing form labels (46.1%). Use tools like TPGI Color Contrast Analyzer, Figma plugins and Indeed accessibility annotations, catalog color combinations, accessible names, heading levels, form labels and component states.
AI-written summary · about
chapters (15)
- 0:00Introduction to talk
- 0:42The state of web accessibility
- 3:51Design annotations for accessibility
- 5:54Analyzing accessibility data
- 9:50Tools for color contrast
- 10:52Annotating color contrast
- 14:00Structural elements in design
- 15:46Annotating links and buttons
- 19:21Alternative text in design
- 22:34Meaningful image descriptions
- 26:08Headings and document structure
- 32:12Form labels and accessibility
- 37:25Top accessibility issues summary
- 38:28Call to action for teams
- 39:34Q&A on design team challenges
related talks
52mDesigning inclusive and accessible experiences
37mMaking A Strong Case For Accessibility
21mPrevent, Catch and Fix Accessibility Issues
48mAccessibility awareness
54mPractical tips to elevate your UX and accessibility
25mPrevent, Catch and Fix Accessibility Issues
50mAccessibility by Everyone (and for Everyone)
50mMaking a Strong Case for Accessibility