How we’re improving web accessibility at Duffel

At Duffel, we’re making it easier for any business to sell flights. To do that, our products need to be accessible to everyone. On the recent Global Accessibility Awareness Day, our user experience engineering team dedicated the day to improving the accessibility of the Duffel Dashboard.

The importance of web accessibility

Making a product accessible makes it better for everybody, not just those with acute accessibility needs. A famous example is OXO kitchen utensils, which were originally designed for people with arthritis but became broadly popular because they were comfortable to use for everybody.

Another example is the ramps into buildings which are often intended for wheelchair users but are also useful to people with prams, luggage, or those with impaired mobility and aren’t confident climbing stairs.

When talking about accessibility, many people think of long-term disabilities like blindness or deafness. Microsoft designed a helpful Persona Spectrum matrix to show how inclusive design can benefit people beyond this scope to include permanent, temporary, and situational scenarios.

Inclusive design often focuses on permanent scenarios which then has a positive knock-on effect on people in temporary and situation scenarios. In the context of web accessibility, supporting scalable font sizes benefits people with vision impairments and people who present their screen on a video conference call; having good colour contrast makes things clearer for vision-impaired people and people browsing the web in bright sunlight; and using simple language helps people with cognitive impairments and people learning to read in a second language.

Recognising Global Accessibility Awareness Day 2022

Global Accessibility Awareness Day (GAAD) started in 2011 to build awareness of the importance of accessibility and the best practices for people building software to improve accessibility in their products. Since then it’s grown into a notable day across the industry, with many companies taking part including well-known tech organisations like Apple, Netflix, and PlayStation all announcing new accessibility-related features on GAAD.

On GAAD 2022, our front-end developers and designers blocked out their calendars and prioritised accessibility. We already consider inclusive design as part of our work and GAAD was a great opportunity for us to take a deeper look, review progress, learn more, and make more improvements.

We’re working on meeting WCAG 2.1 AA, an industry-wide standard for accessible web experiences. This includes considerations to make the web accessible to a vast majority of users including those who use assistive technologies by adding descriptions to images, giving appropriate labels to form elements, using semantic markup, ensuring that text has a strong contrast ratio, and more.

Improving web accessibility at Duffel

We started GAAD with an introductory session to set out our aims for the day and split into teams focusing on different areas of our product to improve. To help us decide which areas to focus on we used tools like Google’s Lighthouse and AccessibilityChecker.org, as well as knowledge about best practices that we already had in the team.

Thanks to the whole team working on accessibility for the day, we were able to thoroughly review the Duffel Dashboard and tackle a few different areas:

• Content – making sure that text is easily readable and accessible to assistive technologies
• Keyboard navigability – making it easier to use Duffel without using a mouse
• Images – making sure images have relevant descriptions available to screen readers
• Headings – making sure headings are arranged in a logical order
• Lists and tables – checking they are navigable and understandable
• Forms and controls – checking all our user interface controls had the relevant labels and could be used with a screen reader, including error messages
• Animation – making sure animations respect users’ preferences to disable them globally
• Colour contrast – checking that the colours we use are accessible

After reviewing the state of our web accessibility, we shipped a number of improvements to...

• Add a main landmark to pages that were missing it to help people with screen readers to navigate more easily;
• Make sure that animations are toned down when people have the ‘reduce motion’ setting enabled on their device;
• Add focus, hover, and active states on buttons wherever they were missing to make it clearer which elements are interactive;
• Include aria-describedby in forms so error messages are correctly linked to the element they’re referring to;
• Make table rows and lists navigable using just a keyboard;
• Use an accessible heading structure on all pages.

As well as the quick fixes above, we’ve also pledged to continue focusing on accessibility throughout the product development lifecycle. We’re tackling this in a few ways, like including accessibility considerations early on in the design phase, adding automated accessibility tests with jest-axe on all new UI components, and manually testing code changes to make sure they include a good accessibility experience.

Accessibility shouldn’t be something we only think about once a year, and going forward it’ll be built into everything we do from the start. The earlier accessibility is considered, the easier and cheaper it is to include as noted by Shawn Henry in her book Just Ask: Integrating Accessibility Throughout Design.

The accessibility work on GAAD wasn’t just confined to the engineering team, our product design team was involved at every stage. They contributed to some of the fixes above and other activities like this chart of colour pairings to indicate which of our brand colours are accessible when used together as backgrounds and text.

Finally, here are our top tips and resources for improving web accessibility:

Keyboard shortcuts. ‘Accessibility’ can be shortened to ‘a11y’ – the eleven represents the number of letters between ‘a’ and ‘y’. You can set up a system-wide keyboard shortcut to replace the shortened version with the full word.

Accessibility props. Get some props into your workspace and make accessibility testing an interactive activity. For example, a pair of Cambridge Simulation Gloves can be used to simulate a reduction in your ability to use your hands. Get your colleagues to wear them and try to use your products so they can empathise with people who have an impairment.

Automated and manual tests. Use automated tests as a jumping off point for your own manual tests. Engineer Manuel Matuzović describes how automated testing tools are a good start but a good score doesn’t necessarily mean your product is accessible.

Read and learn. Read A List Apart, Deque and WebAIM to learn more about delivering a great, accessible experience to your users. Follow @Jennison, @JoeDevon, and @LeonieWatson for accessibility insights.

Engineering careers. Check out duffel.com/careers to explore open roles and join us to disrupt the travel industry and build tools accessible to everyone.