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.1 AA) and all design decisions to be inclusive. We base Backpack components and guidance on the accessibility considerations listed here.
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.
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.
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
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.
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.
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.
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.
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.
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
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.
- 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?
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.
- 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?