Accessibility

We believe that travel should be for everyone. We want our products to be usable by all, which means making them accessible for all.

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.

Logical order

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’.

Grouping

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.

Decorative image

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.

Informative image 3

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’.

Content design button

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.

Form field suggestive

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.