Annotating designs for accessibility
•
5 likes•1,020 views
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.
More Related Content
What's hot
What's hot (20)
Similar to Annotating designs for accessibility
Similar to Annotating designs for accessibility (20)
More from Intopia
More from Intopia (20)
Recently uploaded
Recently uploaded (20)
Annotating designs for accessibility
- 1. Annotating Designs for Accessibility AccessU 2021 Sarah Pulis Director, Accessibility Services @sarahtp May 2021 Claire Webber Digital Accessibility Consultant @ClaireLWebber
- 2. Overview What are annotations? Annotation examples So, what next? Accessible design
- 4. Shift-left
- 5. Estimates of relative cost of re-work Source: Forrester
- 6. Annotations
- 8. Save time More eyes Collaboration Put into practice
- 9. Examples
- 11. Page structure
- 12. Page regions Group content into common page regions and identify the regions and label as needed in your designs
- 17. Headings Organise content using correctly structured headings and identify headings and their level in your designs
- 20. Images
- 21. Informative images Identify informative images and provide a text alternative that conveys the meaning or content in your designs
- 23. Content order
- 24. Content order Show content and focus order in your designs to make sure it is predictable, logical and intuitive
- 28. Semantics Identify the role, name, state and properties of a custom control and how it should work
- 30. Design systems
- 31. Scale Consistency Less effort Be accessible
- 32. Colour Use colours that contrast well for all important information
- 34. States Make sure the states for UI component are easy to see – focus, hover, selected just to name a few!
- 36. So, what’s next?
- 37. Have a go Start small Lead the way
- 38. 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
- 39. 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