At Thoughtworks, we have the privilege of serving some of the world’s leading automotive companies as they revolutionize the digital landscape of mobility. Software and web interfaces are becoming as critical to the driving experience as the steering wheel of a car. In this rapid transformation, companies that succeed in making their digital interfaces accessible and inclusive are better equipped to attract thousands of new customers and retain the loyalty of existing ones.
One such client, a leading maker of luxury sport vehicles, also recognized the imperative to comply with legal requirements laid out by laws such as the American for Disabilities Act in the United States and the imminent European Accessibility Act passed by the EU Parliament and taking effect in 2025. These laws aim to ensure access to information and services for the broadest segment of the population regardless of temporary or permanent disability – an aim that is in line with the company’s own goals and values.
To accomplish this, the company instituted a policy to follow the Web Content Accessibility Guidelines (WCAG) at the level AA. This applied to planned upgrades to the company’s website and its global header, which would carry the user experience of the luxury brand throughout the online automotive shopping experience. To accomplish the WCAG AA grade, the header needed to support screen readers, keyboard accessibility features and other forms of assistive technology.
The company partnered with Thoughtworks to develop this global header, and enable navigation across all its digital web applications, products, and for all countries, in all languages–and for users of multiple abilities.
We designed and engineered the header to be integrated and reused by all company application teams responsible for delivering its web products and services to end users. Most importantly, the component seamlessly embedded a high level of accessibility across all the company’s platforms because it was built with inclusive design from the ground up.
To dive into detail, the global header enables users to smoothly navigate through the company’s website using an overview of all car models, and one can do this via mouse, keyboard or other devices. Users can view a specific model to get more information about it. The Thoughtworks team partnered together with the client product owner to deliver the following accessibility features:
- Keyboard compatibility: provides a way for users to move between the global header links and images with the keyboard without using a mouse.
- Assistive technology support: provides a way for users to use a screen reader to navigate through the header.
- Skip Navigation: provides a way for users of assistive technology to skip the header section to access main content on the website.
- Optional Accessibility Statement: An optional statement displayed in some countries explaining the leading maker of luxury sport vehicles commitment to accessibility and how users can contact the company to raise any issues related to accessibility.
- Proper color contrast in the design inline with the client design system.
As part of the product life cycle development, the team adopted practices to help improve the overall quality of accessibility for the component through the following:
- Adhering to a design system that supports accessibility by default. As part of the transformation, the company introduced a design system and provided accessibility training for the user experience designers leading the design system initiative. This meant that the design elements that were provided by the designers contained proper color contrasts, buttons, and interactive elements that supported accessibility by default.
- The team worked closely with an accessibility subject matter expert to get guidance on how well the design complied with WCAG AA. In addition, the accessibility expert also performed manual tests to help the team uncover potential accessibility issues.
- The team implemented automated accessibility tests to run in the pipeline and to prevent the release if issues were detected.
Benefits
The company not only met legal accessibility requirements, it also opened new possibilities for the client to cater to more customers with accessibility needs by providing inclusive user journeys. It enabled designers and developers to grow in awareness and expertise about accessible design and to design apps and write code which adhere to web standards and accessibility best practices.
Disclaimer: The statements and opinions expressed in this article are those of the author(s) and do not necessarily reflect the positions of Thoughtworks.
