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.

of

Annotating designs for accessibility Slide 1 Annotating designs for accessibility Slide 2 Annotating designs for accessibility Slide 3 Annotating designs for accessibility Slide 4 Annotating designs for accessibility Slide 5 Annotating designs for accessibility Slide 6 Annotating designs for accessibility Slide 7 Annotating designs for accessibility Slide 8 Annotating designs for accessibility Slide 9 Annotating designs for accessibility Slide 10 Annotating designs for accessibility Slide 11 Annotating designs for accessibility Slide 12 Annotating designs for accessibility Slide 13 Annotating designs for accessibility Slide 14 Annotating designs for accessibility Slide 15 Annotating designs for accessibility Slide 16 Annotating designs for accessibility Slide 17 Annotating designs for accessibility Slide 18 Annotating designs for accessibility Slide 19 Annotating designs for accessibility Slide 20 Annotating designs for accessibility Slide 21 Annotating designs for accessibility Slide 22 Annotating designs for accessibility Slide 23 Annotating designs for accessibility Slide 24 Annotating designs for accessibility Slide 25 Annotating designs for accessibility Slide 26 Annotating designs for accessibility Slide 27 Annotating designs for accessibility Slide 28 Annotating designs for accessibility Slide 29 Annotating designs for accessibility Slide 30 Annotating designs for accessibility Slide 31 Annotating designs for accessibility Slide 32 Annotating designs for accessibility Slide 33 Annotating designs for accessibility Slide 34 Annotating designs for accessibility Slide 35 Annotating designs for accessibility Slide 36 Annotating designs for accessibility Slide 37 Annotating designs for accessibility Slide 38 Annotating designs for accessibility Slide 39
Upcoming SlideShare
What to Upload to SlideShare
Next

4 Likes

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

571

On Slideshare

0

From embeds

0

Number of embeds

20

Actions

Downloads

0

Shares

0

Comments

0

Likes

4

×