Uploaded byIntopia
Annotating designs for accessibility
The document discusses the importance of annotations in designing for accessibility, emphasizing how they facilitate a common understanding, save time, and improve collaboration. It provides examples of effective annotations such as labeling page structures, organizing content with headings, and ensuring color contrast for UI components. The document concludes by encouraging designers to start small in implementing accessibility practices and offers resources for further support.
Technologyâ—¦
More Related Content
Similar to Annotating designs for accessibility
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Annotating designs for accessibility
- 1. Annotating Designs forAccessibility AccessU 2021 Sarah Pulis Director, Accessibility Services @sarahtp May 2021 Claire Webber Digital Accessibility Consultant @ClaireLWebber
- 2. Overview What are annotations? Annotationexamples So, what next? Accessible design
- 3.
- 4.
- 5. Estimates of relativecost of re-work Source: Forrester
- 6.
- 7.
- 8. Save time Moreeyes Collaboration Put into practice
- 9.
- 11.
- 12. Page regions Group contentinto common page regions and identify the regions and label as needed in your designs
- 17. Headings Organise content using correctlystructured headings and identify headings and their level in your designs
- 20.
- 21. Informative images Identify informativeimages and provide a text alternative that conveys the meaning or content in your designs
- 23.
- 24. Content order Show contentand focus order in your designs to make sure it is predictable, logical and intuitive
- 27.
- 28. Semantics Identify the role,name, state and properties of a custom control and how it should work
- 30.
- 31. Scale Consistency Lesseffort Be accessible
- 32. Colour Use colours thatcontrast well for all important information
- 34. States Make sure thestates for UI component are easy to see – focus, hover, selected just to name a few!
- 36.
- 37. Have a go Start smallLead the way
- 38. Resources • Accessibility Toolkitfrom 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 Intopiaintopia.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
- #2 Mention where slides are available – add link in slide link bit
- #3 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
- #4 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
- #5Â 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
- #6 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)
- #7 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?
- #8 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
- #9 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
- #10Â 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
- #11Â Claire Add a bit here about the annotation system we will be using and what its purpose is
- #12Â Sarah
- #13Â Sarah Ways used Quick benefits of doing now
- #14 Claire -describe regions + they are numbered + what's in each region -Numbered clearly – start here -outline show what's in and how nested
- #15 Claire After – elaborate documentation in comments Info to include - what is it and if it has a label (touch very briefly on why label)
- #16Â Claire
- #17Â Claire
- #18Â Sarah
- #19Â Claire
- #20Â Claire
- #21Â Sarah
- #22Â Sarah
- #23Â Claire Develop your own internal rules around image management Decorative unless specified for example or mark up all images
- #24Â Sarah
- #25Â Sarah
- #26Â Claire Comment thing to show intent behind decision
- #27Â Claire Focus management for modals is commonly overlooked
- #28Â Sarah
- #29Â Sarah
- #30Â Claire
- #31Â Sarah
- #32Â 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
- #33Â Sarah
- #34Â Claire
- #35Â Sarah
- #36 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
- #37Â Sarah
- #38 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
- #40 If you have any questions, you don’t feel comfortable asking during the Q&A we are on the slack channel