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