Essential Accessibility Annotations for a Smoother Design-to-Development Handoff
A presentation at axe-con in March 2023 in by Carie Fisher
Essential Accessibility Annotations for a Smoother Design-to-Development Handoff
Carie Fisher ● Director of Digital Accessibility at Testlio ● HCI Ph.D. Candidate at Iowa State University ● Primary author of web.dev “Learn Accessibility” course
First, the bad news…
96.8% of home pages scanned with an automated accessibility checker had WCAG failures Source: webaim.org/projects/million
Top design-focused issues of 2022 83.9% — Low text color contrast 77.3% — Empty links & buttons 55.4% — Missing image alt text 50.3% — Skipped & missing headings 46.1% — Missing form labels
Source: webaim.org/projects/million
Now, some good news…
67% of the current WCAG success criteria can be covered in the design phase Source: deque.com/blog/auditing-design-systems-for-accessibility
Cost of accessibility bugs over SDLC Source: deque.com/blog/auditing-design-systems-for-accessibility
Accessibility annotation kit Source: figma.com/community/file/953682768192596304
A11y Talks design demo Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Color contrast
Low text color contrast 2022 — 83.9% 2021 — 86.4% 2020 — 83.3% 2019 — 85.3%
Source: webaim.org/projects/million
Color contrast checkers Source: color.adobe.com/create/color-contrast-analyzer
Color contrast stand-alone tools Source: tpgi.com/color-contrast-checker
Color contrast checker plugins Source: figma.com/community/plugin/748533339900865323/Contrast
Color blindness simulators Source: color.adobe.com/create/color-accessibility
Which elements should be focused on for color contrast? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Color contrast should include all of the different combinations of colors in the palette from most accessible to least — for text as well as essential icons
Color contrast palette generators Source: a11yrocks.com/colorPalette
Color contrast annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Links & buttons
Missing links & buttons 2022 — 77.3% 2021 — 78.2% 2020 — 88.6% 2019 — 83.1%
Source: webaim.org/projects/million
What information should be captured for links/buttons? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Links & buttons should be identified as focusable elements in the design and should include the different states and information about the purpose
Link & button states Source: figma.com/community/file/953682768192596304
Link & button annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Alternative text
Missing alternative text 2022 — 55.4% 2021 — 60.6% 2020 — 66.0% 2019 — 68.0%
Source: webaim.org/projects/million
Which images/icons are essential? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Alternative text needs to be meaningful and added to all essential images and icons — be careful to hide all decorative and non-essential imagery
Does the content still make sense? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Alternative text annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Headings
Skipped & missing headings 2022 — 50.3% 2021 — 49.0% 2020 — 51.5% 2019 — 51.2%
Source: webaim.org/projects/million
How many headings are on this page? What levels? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Headings should include programmatic levels that pay attention to reading order — be sure to include everything that looks like a heading
Heading order Source: figma.com/community/file/953682768192596304
Heading annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Form labels
Missing form labels 2022 — 46.1% 2021 — 54.4% 2020 — 53.8% 2019 — 52.8%
Source: webaim.org/projects/million
Which form elements should be annotated? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Form labels are a must as they outline relationships between the label and the input — but helper text, error messages, and success messages are also beneficial
Form relationships Source: figma.com/community/file/953682768192596304
Form annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo
Top design-focused issues of 2022 83.9% — Low text color contrast 77.3% — Empty links & buttons 55.4% — Missing image alt text 50.3% — Skipped & missing headings 46.1% — Missing form labels
Source: webaim.org/projects/million
Recognizing the need is the primary condition for design — Charles Eames
Thanks! Slides/Resources: noti.st/cariefisher
LinkedIn: linkedin.com/in/cariefisher
Mastodon: mstdn.social/@cariefisher
Twitter: twitter.com/cariefisher
