The role of Content Design in creating an accessible experience is vital. Content Designers should strive to create experiences that are tonally on-brand and 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 every user.
We aim for all written content to meet the Web Content Accessibility Guidelines (WCAG 2.2 AA) and all design decisions to be inclusive.
Creating content
Best practices for building accessible experiences
- Write in short sentences. It makes content much easier to read
- Keep paragraphs short and a similar length
- Use bullet points to break up large blocks of text
- Aim to make bullet points similar lengths so they're easy to read
- Create clear, scannable headers
- Use plain English. The average reading age in the UK is 9
- Don’t use puns or idioms as users may not understand them
- Create label copy on buttons that clearly describes the action
- Include destination names in links so it’s clear where they take the user
- Use emojis sparingly and aim to use them at the end of sentences
- Avoid using abstract iconography, especially without a descriptive label
Language
Use inclusive language
There are a number of approaches to consider when talking about disability. Identity-first language leads with a person’s diagnosis, such as ‘an Autistic person’ and person-first language puts a person before their diagnosis, such as ‘a person with Autism’.
In the United Kingdom, the preference is mostly identity first, however, it’s worth noting that there’s nuance from country to country. Always check a country’s regional disability guidance.
Use respectful, positive and enabling language for and about disabled people:
- “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
- “wheelchair user”, never “confined to a wheelchair”
How to spec designs
It's vital that disabled people can easily navigate, understand, and use Skyscanner. Use the annotation toolkit in Figma to add context to designs to make sure they’re built in a way that's accessible for everyone.
Define the order of content
Use the annotation toolkit to mark the focus order of interactive elements for keyboard users. A logical focus order enables users to tab through the elements and make any actions using a keyboard.
Make sure the focus order is localised correctly for different markets. For instance, left to right and top to bottom are appropriate for a Western audience.
Group relevant content together
Grouping relevant elements together helps improve the screen reader experience. This is useful when the content may be organised or designed in a way that visually makes sense but could sound unusual when announced. For example, the group in the example would be announced as one block when grouped, ‘Famous for sightseeing’, instead of ‘Famous for’ and ‘sightseeing’.
Image descriptions
Add contextual information to meaningful images
Make any visual experiences accessible for screen reader users by adding a description for informational and emotional images. This is called ‘alternative text’ (alt text), which is information that describes the function or description.
Follow these tips for writing alternative text labels for different types of images and graphics.
Decorative images
A decorative image is often a graphic or icon that — if excluded — would have no impact on the experience. Alt text isn’t required for these and is best avoided to reduce noise.
Informative images
Add alt text if the image supports or adds a visual representation of the experience. For example, a background image on a homepage campaign.
Functional images and icon-only labels
It’s essential to add alt text if the image or icon is functional and helps the user to fulfil an action. For example, a magnifying glass icon could be labelled ‘Search’.
Images and graphics in emails
Although it’s best practice to avoid embedding text in images, it’s sometimes unavoidable in certain types of content. When creating email communications, add alt text to give clear context to screen reader users. It’s also good practice to surface important information written as text at the top of the email as some users may have images blocked.
Form fields
Make hint text clear for screen readers
Where possible, show any hint text before a form field, or specify that screen readers announce the content when a user navigates to the entry field.
Avoid using placeholders in form fields
Aim to avoid suggestive copy in form fields as it may lead users to think the information has already been entered. It’s often too pale for people to read, and it disappears on focus, meaning important information could be missed. If the copy provides information on how to fill in the field, it should be always present as hint text.
It’s best practice to show error messages before form fields
If a user makes a mistake when inputting information in a form field, show any error messages above the field to make sure the information is captured by screen readers, otherwise, they may miss the message. This is also useful when a user has autocomplete enabled as it hides content below fields.
Captions and transcripts
Include captions and transcripts to make sure video content is accessible to everyone. There are many reasons users access transcripts and captions – hearing-impaired users may not be able to hear audio from videos or content, users with cognitive impairments may prefer to read information, and many situations make captions the preferred way of consuming content. 40% of Netflix users have captions turned on, and up to 80% of online videos are consumed through captions.