Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next

4

Share

Annotating designs for accessibility

Slides from AccessU presentation presented by Sarah Pulis and Claire Webber.

Annotating designs with accessibility information is a powerful way to focus on accessibility early in the design phase, as well as communicate your accessibility requirements to developers and testers. Sarah and Claire will cover how to add accessibility annotations in components, patterns and complete wireframes using popular design tools such as Figma.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Annotating designs for accessibility

  1. 1. Annotating Designs for Accessibility AccessU 2021 Sarah Pulis Director, Accessibility Services @sarahtp May 2021 Claire Webber Digital Accessibility Consultant @ClaireLWebber
  2. 2. Overview What are annotations? Annotation examples So, what next? Accessible design
  3. 3. Accessible design
  4. 4. Shift-left
  5. 5. Estimates of relative cost of re-work Source: Forrester
  6. 6. Annotations
  7. 7. Easy to act upon Common understanding Consistent documentation
  8. 8. Save time More eyes Collaboration Put into practice
  9. 9. Examples
  10. 10. Page structure
  11. 11. Page regions Group content into common page regions and identify the regions and label as needed in your designs
  12. 12. Headings Organise content using correctly structured headings and identify headings and their level in your designs
  13. 13. Images
  14. 14. Informative images Identify informative images and provide a text alternative that conveys the meaning or content in your designs
  15. 15. Content order
  16. 16. Content order Show content and focus order in your designs to make sure it is predictable, logical and intuitive
  17. 17. Other annotations
  18. 18. Semantics Identify the role, name, state and properties of a custom control and how it should work
  19. 19. Design systems
  20. 20. Scale Consistency Less effort Be accessible
  21. 21. Colour Use colours that contrast well for all important information
  22. 22. States Make sure the states for UI component are easy to see – focus, hover, selected just to name a few!
  23. 23. So, what’s next?
  24. 24. Have a go Start small Lead the way
  25. 25. 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
  26. 26. Let’s chat @Intopia Intopia intopia.digital hello@intopia.digital Sarah Pulis Director, Accessibility Services Claire Webber Digital Accessibility Consultant @sarahtp sarah@intopia.digital @ ClaireLWebber claire.webber@intopia.digital
  • vfowler

    Sep. 6, 2021
  • BaZad1

    Aug. 10, 2021
  • AngelaClark1

    Jun. 25, 2021
  • MarinaPetric

    May. 18, 2021

Slides from AccessU presentation presented by Sarah Pulis and Claire Webber. Annotating designs with accessibility information is a powerful way to focus on accessibility early in the design phase, as well as communicate your accessibility requirements to developers and testers. Sarah and Claire will cover how to add accessibility annotations in components, patterns and complete wireframes using popular design tools such as Figma.

Views

Total views

525

On Slideshare

0

From embeds

0

Number of embeds

18

Actions

Downloads

0

Shares

0

Comments

0

Likes

4

×