A presentation at axe-con 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
Accessibility annotations are similar in concept to design annotations in that they are often added to a wireframe or design to help explain elements that a developer may not otherwise perceive, understand, or account for during implementation. Instead of highlighting design elements, accessibility annotations focus on areas where accessibility conformance standards will come into play once the design has been translated into code. Today there are hundreds of annotation toolkits, plugin options, and just as many articles, tutorials, and demos explaining how they work.
While it is true that accessibility annotations have made communication between the designer and developer more straightforward, what exactly is being said? Are developers getting too much information or not enough? Since it is not possible to annotate every little aspect of accessibility in a design file, what annotations are essential for the greatest user impact?
This talk will explore accessibility design annotations from the perspective of a front-end developer who has been handed many a design file over their career and had to make the most accessible choices possible based on limited information.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.