Annotating Designs For Accessibility

A presentation at a11yTO in in Toronto, ON, Canada by Anna E. Cook

Annotating Designs for Accessibility by Anna E. Cook

Annotating Designs for Accessibility by Anna E. Cook

Hi, I’m Anna!

Hi, I’m Anna!

What we will discuss

What we will discuss

Recap: design and accessibility

Recap: design and accessibility

Few designers are taught about accessibility.

Few designers are taught about accessibility.

67% of accessibility issues can originate in design

67% of accessibility issues can originate in design

Shift Left

Shift Left

We need designers to account for accessibility

We need designers to account for accessibility

We need designers to account for accessibility beyond visual design.

We need designers to account for accessibility beyond visual design.

What are accessibility annotations?

What are accessibility annotations?

Accessibility annotations are specifications that divide gaps in visual designs and prototypes.

Accessibility annotations are specifications that divide gaps in visual designs and prototypes.

Accessibility annotations have existed for years but have popularized in the past 2–3.

Accessibility annotations have existed for years but have popularized in the past 2–3.

Annotation kits tend to be managed like component libraries

Annotation kits tend to be managed like component libraries

Specification could not be indicated through the mockup or prototype itself

Specification could not be indicated through the mockup or prototype itself

Annotations tend to be overlaid on mockups, or on individual components used in a mockup

Annotations tend to be overlaid on mockups, or on individual components used in a mockup

Commonly used annotations

Commonly used annotations

Commonly used accessibility annotations

Commonly used accessibility annotations

Alt text

Alt text

Button labels

Button labels

Focus order

Focus order

Form labels and legends

Form labels and legends

Input feedback

Input feedback

Heading structure

Heading structure

Keyboard interactions

Keyboard interactions

Components in use

Components in use

Other annotations found in various kits

Other annotations found in various kits

How should accessibility annotations be used?

How should accessibility annotations be used?

Accessibility annotations shouldn’t be used on everything everywhere.

Accessibility annotations shouldn’t be used on everything everywhere.

Annotations should only be used as needed.

Annotations should only be used as needed.

Annotation density

Annotation density

What are the issues with accessibility annotations?

What are the issues with accessibility annotations?

If designers don’t understand accessibility, annotations aren’t useful.Designers must be trained to understand basic accessibility before they use annotations.

If designers don’t understand accessibility, annotations aren’t useful. Designers must be trained to understand basic accessibility before they use annotations.

Accessibility annotations can’t fix bad patterns.But they can help designers better understand why those patterns are bad in the first place.

Accessibility annotations can’t fix bad patterns. But they can help designers better understand why those patterns are bad in the first place.

Accessibility annotations tend to require manual specing.Maybe they could be less manual if design tools better accounted for accessibility

Accessibility annotations tend to require manual specing. Maybe they could be less manual if design tools better accounted for accessibility

Should we use accessibility annotations?

Should we use accessibility annotations?

Annotations are a communication and thinking tool.

Annotations are a communication and thinking tool.

It depends…

It depends…

Thank you!

Thank you!

Credits

Credits

Annotation kits referenced

Annotation kits referenced

Sources

Sources

Thanks to...

Thanks to...

A core aspect of accessibility comes down to our designs, from the patterns we create to what we work with developers to build. What we include in our designs and prototypes can communicate many core aspects of accessible design, but some pieces get lost. When designs and prototypes alone are not enough, we can use accessibility annotations. In this workshop, attendees learn what gaps that accessibility annotation can fill and when and how to use them.