Essential Accessibility Annotations for a Smoother Design-to-Development Handoff

A presentation at axe-con in March 2023 in by Carie Fisher

Slide 1

Slide 1

Essential Accessibility Annotations for a Smoother Design-to-Development Handoff

Slide 2

Slide 2

Carie Fisher ● Director of Digital Accessibility at Testlio ● HCI Ph.D. Candidate at Iowa State University ● Primary author of web.dev “Learn Accessibility” course

Slide 3

Slide 3

First, the bad news…

Slide 4

Slide 4

96.8% of home pages scanned with an automated accessibility checker had WCAG failures Source: webaim.org/projects/million

Slide 5

Slide 5

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

Slide 6

Slide 6

Now, some good news…

Slide 7

Slide 7

67% of the current WCAG success criteria can be covered in the design phase Source: deque.com/blog/auditing-design-systems-for-accessibility

Slide 8

Slide 8

Cost of accessibility bugs over SDLC Source: deque.com/blog/auditing-design-systems-for-accessibility

Slide 9

Slide 9

Accessibility annotation kit Source: figma.com/community/file/953682768192596304

Slide 10

Slide 10

A11y Talks design demo Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 11

Slide 11

Color contrast

Slide 12

Slide 12

Low text color contrast 2022 — 83.9% 2021 — 86.4% 2020 — 83.3% 2019 — 85.3%

Source: webaim.org/projects/million

Slide 13

Slide 13

Color contrast checkers Source: color.adobe.com/create/color-contrast-analyzer

Slide 14

Slide 14

Color contrast stand-alone tools Source: tpgi.com/color-contrast-checker

Slide 15

Slide 15

Color contrast checker plugins Source: figma.com/community/plugin/748533339900865323/Contrast

Slide 16

Slide 16

Color blindness simulators Source: color.adobe.com/create/color-accessibility

Slide 17

Slide 17

Which elements should be focused on for color contrast? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 18

Slide 18

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

Slide 19

Slide 19

Color contrast palette generators Source: a11yrocks.com/colorPalette

Slide 20

Slide 20

Color contrast annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 21

Slide 21

Links & buttons

Slide 22

Slide 22

Missing links & buttons 2022 — 77.3% 2021 — 78.2% 2020 — 88.6% 2019 — 83.1%

Source: webaim.org/projects/million

Slide 23

Slide 23

What information should be captured for links/buttons? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 24

Slide 24

Links & buttons should be identified as focusable elements in the design and should include the different states and information about the purpose

Slide 25

Slide 25

Link & button states Source: figma.com/community/file/953682768192596304

Slide 26

Slide 26

Link & button annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 27

Slide 27

Alternative text

Slide 28

Slide 28

Missing alternative text 2022 — 55.4% 2021 — 60.6% 2020 — 66.0% 2019 — 68.0%

Source: webaim.org/projects/million

Slide 29

Slide 29

Which images/icons are essential? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 30

Slide 30

Alternative text needs to be meaningful and added to all essential images and icons — be careful to hide all decorative and non-essential imagery

Slide 31

Slide 31

Does the content still make sense? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 32

Slide 32

Alternative text annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 33

Slide 33

Headings

Slide 34

Slide 34

Skipped & missing headings 2022 — 50.3% 2021 — 49.0% 2020 — 51.5% 2019 — 51.2%

Source: webaim.org/projects/million

Slide 35

Slide 35

How many headings are on this page? What levels? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 36

Slide 36

Headings should include programmatic levels that pay attention to reading order — be sure to include everything that looks like a heading

Slide 37

Slide 37

Heading order Source: figma.com/community/file/953682768192596304

Slide 38

Slide 38

Heading annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 39

Slide 39

Form labels

Slide 40

Slide 40

Missing form labels 2022 — 46.1% 2021 — 54.4% 2020 — 53.8% 2019 — 52.8%

Source: webaim.org/projects/million

Slide 41

Slide 41

Which form elements should be annotated? Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 42

Slide 42

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

Slide 43

Slide 43

Form relationships Source: figma.com/community/file/953682768192596304

Slide 44

Slide 44

Form annotations Source: figma.com/file/elM2duOOQacmXAUNlyclMx/Demo

Slide 45

Slide 45

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

Slide 46

Slide 46

Recognizing the need is the primary condition for design — Charles Eames

Slide 47

Slide 47

Thanks! Slides/Resources: noti.st/cariefisher

LinkedIn: linkedin.com/in/cariefisher

Mastodon: mstdn.social/@cariefisher

Twitter: twitter.com/cariefisher