Successfully reported this slideshow.
Your SlideShare is downloading. ×

Annotating designs for accessibility

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
C#.NET Developer
C#.NET Developer
Loading in …3
×

Check these out next

1 of 39 Ad

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.

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.

Advertisement
Advertisement

More Related Content

Similar to Annotating designs for accessibility (20)

More from Intopia (20)

Advertisement

Recently uploaded (20)

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

Editor's Notes

  • Mention where slides are available – add link in slide link bit
  • Sarah

    Won’t be deep diving into particulars of creating accessible designs – focusing on areas that should be considered and documented at design stage

    Encourage questions – time at end for more Q&A

    Page structure
    Page regions
    Headings
    Images
    Content order
  • Sarah Shift left – agile methodology

    Test stuff earlier in the product lifecycle

    Why not do the same for accessibility?

    Often left until developer or even after the product is finished
  • Sarah

    The shift-left model is common across DevOps (development and operations) which encourages quality to be addressed as early on in the process as possible.
    Image description
  • Sarah Isn’t accessibility just for developers? NO, it’s everyone's responsibility

    A large amount of a11y defects come from design


    How much would you pay to save a product with bad UX? (konceptapp.com)
  • Claire

    We’ve talked about why we should bring a11y forwards – now we are going to talk about how via annotations What do we mean by annotations & what are we looking to achieve?
  • Claire

    By annotations we are talking about further documentation for the design.

    Like an architectural blueprint, we want all the information to be clear. If something is missing, how thick the foundations are for example – the house might fall down. We want to create:

    Consistent documentation
    Easy to understand and act upon
    Common understanding

    Annotating designs with accessibility information is a powerful way to focus on accessibility early in the design
  • Claire

    Save time
    Bring conversations up front
    More eyes
    Build collaboration
    Increase communication
    Helps build test cases
    Clear what is required for accessibility
    Takes out assumptions
    Increases accessibility knowledge across organisation
    Put it into practice – embed accessibility into your way of working
  • Sarah

    Jack Nicolai, Jeremy Elder and Indeed have annotations kits available.

    Across Sketch, Adobe XD, Illustrator and InVision Studio

    Taken inspiration from bits of these libraries to create an example to show you today

    We will be showing demos using Figma but annotations can be applied anywhere
  • Claire Add a bit here about the annotation system we will be using and what its purpose is
  • Sarah
  • Sarah

    Ways used
    Quick benefits of doing now
  • Claire

    -describe regions + they are numbered + what's in each region
    -Numbered clearly – start here
    -outline show what's in and how nested
  • Claire

    After – elaborate documentation in comments

    Info to include - what is it and if it has a label (touch very briefly on why label)
  • Claire
  • Claire
  • Sarah
  • Claire
  • Claire
  • Sarah
  • Sarah
  • Claire
    Develop your own internal rules around image management

    Decorative unless specified for example or mark up all images
  • Sarah
  • Sarah
  • Claire

    Comment thing to show intent behind decision
  • Claire

    Focus management for modals is commonly overlooked
  • Sarah
  • Sarah
  • Claire
  • Sarah
  • Sarah
    Accessibility at scale
    Consistent and template
    Firm rules / understanding
    Reduces effort over time
    Build knowledge across organisation


    Especially for larger brands that have multiple systems and websites etc.
    Good for your brand
    Good for your staff
  • Sarah
  • Claire
  • Sarah
  • Claire

    Don’t forget to consider the states of your components

    This can be commonly overlooked in the design stage particularly focus and error states

    Ensure you are considering and creating accessible
    Focus states
    Hover states
    Error states

    Also keep in mind when something should or shouldn’t be able to become disabled
  • Sarah
  • Sarah

    Have a go:
    Use one of the existing annotation systems such as Jeremy Elder’s annotations or the one from Indeed
    Watch out for ours which we’ll publish to the Figma community soon
    Make your own, build on your own existing design system/processes, think about how annotations can be used for more than just accessibility
    Start small:
    Don’t be daunted
    Pick something to start with that is going to have a big impact
    Lead the way
    Accessibility is all about momentum
  • If you have any questions, you don’t feel comfortable asking during the Q&A we are on the slack channel

×