The role of Content Design in creating an accessible experience is vital. Designers should strive to create experiences that are tonally on-brand and that are usable by everyone.
We need to understand the people who use our products and the different ways they interact with them. We also need to remember that accessibility not only helps people with disabilities – it helps us all.
We aim for all written content to meet the Web Content Accessibility Guidelines (WCAG 2.1 AA) and all design decisions to be inclusive. We base Backpack components and guidance on the accessibility considerations listed here.
Content writing
Best practices for accessibility
There are a few best practices to consider when writing content with accessibility in mind. The Web Content Accessibility Guidelines (WCAG) 2.1 provide clear guidance on how to create accessible content. It's best to check these if you have any queries. Here are some of our top tips:
- Write in short sentences, around 25 words. This makes sentences easier to read
- Use clear headers so users can navigate, scan and comprehend text easily
- Use simple English. The average reading age in the UK is 9
- Don’t use puns or idioms, this can cause confusion if people don’t understand
- Where appropriate, use bullet points to break up blocks of text
- When using bullet points, try to make sentences/points similar lengths so they're easy to scan
- Make CTAs and links clearly contextualise where the user will be taken to or what action will be carried out
- Use emojis sparingly because alt text <smiling face with heart eyes> can be very long. Then imagine hearing this three times!
Creating content for interfaces
- Add text in code and avoid placing it directly onto an image
- Present information the traveller needs to complete before they take action, e.g. label, instruction then field afterwards
- If microcopy is placed under a confirmation button, ask your Engineer to order it in the code so it's read out before the user gets to the text entry field
- Don't rely only on visuals for context
- Use alternative text to describe informative, functional or emotionally rich images and icons.
Language
Use inclusive and accessible language
Person-first language puts a person before their diagnosis, such as a person with Autism. Identity-first language leads with a person’s diagnosis, such as an Autistic person. For most disabilities, preferably use person-first language, but in some instances, such as in the Deaf community and among some autistic people, identity-first language is preferred.
- Where possible, ask the audience what their preference is.
- When writing for people with Autism, use person-first and identity-first language interchangeably.
Use respectful, positive and enabling language for and about people with disabilities:
- “has” or “was diagnosed with”, not “suffers from”
- “blind person” never “the blind”
- “disabled person” for the UK
- “person with a disability” for the US and Australia
If you’re talking directly to a traveller you should aim to use the appropriate language for their region.
If you’re creating content read by multiple regions, using terminology appropriate for everyone may not always be possible. Providing you’re emphasising the ‘personhood’ aspect and showing compassion in your writing you hopefully won’t cause any offence.
See Glossary of standardised terms for more details on.
Preparing designs
Marking up Figma files for accessibility
An important consideration when designing content is to make sure people with diverse abilities can navigate, understand, and use our interface with ease.
We have annotation tags in Figma for explaining content that may visually make sense, to make sure it's clear for all users. You can find our annotation tags in Figma.
Here are some tips for how to mark up your files when working with Product Designer.
Focus order
- Mark up the focus order of content for users tabbing through on a range of devices
Group content
- Group together the content you wish to be read as one collective statement
- Include a description for informational and emotional images with alternative text labels
Icon-only labels
- Describe what will happen for functional labels that only contain icons, e.g. a magnifying glass could be labelled with “Search”
Add context
It’s important to enhance information by giving extra context when needed. An interface may make sense to a user who’s can see it visually, but we need to make sure a design makes sense on a screen reader, too.
A great practice for creating context is speaking aloud about what the interface is doing.