Claire Webber and Sarah Pulis' presentation on annotating designs for accessibility as a part of Inclusive Design 24, held on 23 September 2021.

1. Annotating designs for accessibility
ID24 2021
Sarah Pulis
Director, Accessibility Services
sarahtp
Claire Webber
Digital Accessibility Consultant
ClaireLWebber

2. Overview Accessible design
What are annotations?
Annotation examples
So, what next?

3. Accessible
Design

4. Shift-left

5. Annotations

6. Consistent
documentation
Common
understanding
Easy to
act upon

7. Save time More eyes Collaboration Put into practice

8. Examples

11. Using
annotations

12. Page regions
Group content into common
page regions and identify the
regions and label as needed in
your designs

15. Headings
Organise content using
correctly structured headings
and identify headings and their
level in your designs

17. Informative images
Identify informative images and
provide a text alternative that
conveys the meaning or content
in your designs

19. Order
Show content and focus order
in your designs to make sure it
is predictable, logical and
intuitive

22. Semantics
Identify the role, name, state
and properties of a custom
control and how it should work

25. Design systems

26. Scale Consistency Less effort Be accessible

27. Colour
Use colours that contrast well
for all important information

29. States
Make sure the states for UI
component are easy to see –
focus, hover, selected just to
name a few!

31. So, what’s
next?

32. Have a go Start small Lead the way

33. What’s next for
us?

34. Let’s chat
Sarah Pulis
Director, Accessibility Services
@sarahtp
sarah@intopia.digital
Claire Webber
Digital Accessibility Consultant
@ClaireLWebber
claire.webber@intopia.digital
@Intopia Intopia intopia.digital hello@intopia.digital

35. Resources
• Accessibility Toolkit from Jack Nicolai
• Accessibility Bluelines by Jeremy Elder
• A11y Annotation Kit by Indeed (Figma)
• Auditing Design Systems for Accessibility By Anna Cook