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 Product Design in creating an accessible experience is vital. Designers should strive to create experiences that look great 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 components to meet the Web Content Accessibility Guidelines (WCAG 2.2 AA) and all design decisions to be inclusive. We base Backpack components and guidance on the accessibility considerations listed here.

Colour

Design with contrast in mind

The foreground colour should stand out against the background to make objects easier to see. To meet technical requirements, we must meet or exceed the following:

Regular text (smaller than 24px or 19px bold) should have a minimum contrast of 4.5:1

Large text (24px or 19px bold and larger) should have a minimum contrast of 3:1

UI components should have a minimum contrast of 3:1

The only exceptions are for decorative text and text on components in inactive states.

Our Product Design swatch palette has been designed so ‘AA’ text colour + background swatch combination is accessible for Small and Large text. It’s also safe to use for UI components.

If you don’t see an ‘AA’ symbol, this colour is not intended to be used with text.

Be aware of colour blindness

Colour blindness affects 8% of men and 0.5% of women. Checking your design using tools like Stark or Sim Daltonism helps you see if your design still works.

Don't rely on colour alone

Colour-blind people may not be able to easily perceive or understand content when colour is the only means of communication. Support your designs with additional cues, such as underlines, iconography, patterns, or placement on the screen.

Text

Create a pleasurable reading experience

Typography, font size, line length and text decoration can impact the reading experience for many, including people with low vision, dyslexia, and limited literacy skills – some things to consider.

The minimum font size of body copy is at least 16 pixels

Fit text within the optimal line length of 45-75 characters per line

Avoid italics and all caps where possible

Left-align body text

Don’t underline words unless it’s a clickable link

Use bullet points to break up text

Sometimes visually impaired screen reader users may benefit from hearing content in a different order than is visually presented. Try to prevent this first in design as it may lead to confusing experiences for others. If the reading order needs to be changed then annotate your design with the correct element order

Use headings to create a consistent hierarchy

Headings not only help people scan content to find what they need, but they also show the hierarchical structure of the page.

You can think of heading levels as a book with the main title, chapters and subheadings:

Heading 1: The title of the page – there should only be one per page

Heading 2: The titles of the various sections on the page – there can be as many as needed

Heading 3: Subheadings contained within the sections

Don’t skip heading levels

Using correct heading levels helps screen reader users understand the hierarchy of the information on a page. It’s best practice not to skip levels to avoid confusion eg. don’t jump from a heading level 2 to a heading level 4.

Layout

Use ample white space

White space allows content to breathe visually and reduce clutter. Using white space can prevent a page from feeling overwhelming and helps people find and read the content more easily.

Make navigation consistent

Presenting navigation in a familiar and consistent location benefits everyone.

Here, we’re talking about text links, site logos, search functionality, and skip links.

Images

Provide text descriptions for all meaningful images

Informational or functional images require a text description to describe the essential information to screen reader users.

Write visually hidden copy at the same time as the visible copy, in the same tone of voice.

Alt Text good

Separate text from images

Images of text can lead to visually jarring issues, such as fuzzy text, or be even less inclusive for some users who may not be able to understand the content. Avoid embedding text inside images.

Use inclusive imagery

Make image content inclusive - consider gender, nationality, age, body shape, sexuality, religion, beliefs, disability, etc.

Interaction

Create a logical tab order

Some people may only use a keyboard. Creating a logical tab order means they’ll be able to navigate through all the interactive components easily, and in a logical order.

This is usually from left to right and top to bottom. It helps to annotate designs to show the tab order of more complex pages.

Create large touch targets

Small targets can be difficult to tap or click and problematic for people with fine motor control impairments or tremors. To make things easier, we should ensure size and surrounding spacing meet or exceed the minimum target sizes of:

Web: 24 x 24 CSS pixels (read about the exceptions to this rule)

Android: 48 x 48 dp

iOS: 44 x 44 pt

Provide alternatives to gestures

For some, gestures like swiping, pinching to zoom, or dragging and dropping objects may be complex interactions. Include alternative methods that people can complete with a single tap or click.

Motion

Be careful with motion

Motion may create a delightful experience for some or an unpleasant or debilitating experience for others.

As many as 35% of people over 40 experience occasional or chronic vestibular disorders, and it’s estimated that globally 3.85% of people have active epilepsy.

Here are some things to consider to make our designs more inclusive.

Make it easy to start, pause, and stop animation or video

Avoid blinking or flashing images

Avoid parallax scrolling effects

Respect accessibility settings. Consider alternative solutions that respect the device settings should parallax or motion be desired.

Test your designs for accessibility

There are some simple checks that every designer can implement in their workflow, such as:

Check foreground and background colours of text using tools such as the WebAIM contrast checker or Stark plugin for Figma.

Use plugins, like Stark plugin for Figma or apps, like Sim Daltonism, to check that the designs work for people with various types of colour blindness

Preview your designs in grayscale (System preferences / Accessibility / Display / Colour Filters / Grayscale) to check that you don’t rely on colour alone to convey meaning.

Hand over accessible design specs

Annotate meaning

A visual representation of a screen only tells part of the story. Using the Annotation toolkit in Figma can help the developer clearly understand both what is and what’s not visualised.

For example:

What’s the tab order?

What are the heading levels?

What’s the alternative text for an image?

What would a screen reader announce for an icon-only button?

Wrap-up

Ask yourself who your design has excluded

Early intentional acts of inclusion help you prevent future unintentional acts of exclusion. - Derek Featherstone, VP of Accessibility and Inclusive Design, Salesforce.

This important question will help you see if there are better ways to solve the design challenge that would include more people.

For example:

How is the overall experience for a low vision user with larger font sizes set on their mobile?

How does a keyboard user navigate around the site? Are there decisions we can make that could improve their experience?

How does a Deaf user experience audio-visual content? Are there any barriers, and how could we remove them?

How would somebody with low literacy experience more complex pages? Can we make improvements here?