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.
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
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
SarahShift 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
SarahIsn’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 annotationsWhat 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
ClaireAdd 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