An A11Y Awakening
Designing an Accessible FT.com
In 2016, the Financial Times launched a new version of its website. Now one of the fastest news sites in the world, with a 30% increase in engagement, the launch was a success for many readers — but not for everyone.
The World Bank Group estimates that 1 billion people live with a disability –that’s 15% of the world’s population.
Accessibility for the web, or “a11y” (which is a type of abbreviation called a numeronym), is the practice of ensuring web content is accessible for everyone by conforming to standards such as WCAG (Web Content Accessibility Guidelines).
Accessible websites ensure that individuals with disabilities, such as visual, auditory, motor, or cognitive impairments, can access and experience content inclusively. This allows everyone regardless of their abilities, to access the same information and services.
Serving all users
Two years of prodding and probing had taken its toll on FT.com’s visual language and its content had become inaccessible for some of our users. After its maiden voyage, we started an a11y project in collaboration with the Digital Accessibility Centre to overhaul FT.com from the ground up to meet WCAG 2.1 standards.
This enabled FT.com to achieve AA accreditation, which is no mean feat for a site with over 20 million monthly users, I can assure you. It was only made possible by an incredible Product team and stakeholders who understood the assignment.
From colour contrast to button states, our design teams played a pivotal role, and the entire process made us think differently about the choices we make.
We installed plugins like Stark and Oracle, and initiated best practices across teams, because, let’s face it, accessible websites are undeniably better. They’re coded better, which makes them faster, they have better SEO and they’re just better to use for everyone.
The a11y project created an opportunity for us to reform our design system, and codify these standards into our component library. Providing a compliant and consistent experience for all our users across all our products.
We started with colour since every component depends on it, but most importantly colour contrast is critical to making content accessible.
We streamlined an unwieldy core palette of 64 down to a more manageable 16 and systemised the colours based on HSB (Hue, Saturation, Brightness) to allow us to develop a dynamic colour mixer.
The colour mixer allows a designer or engineer to produce tints and shades from the core palette, for greater flexibility, and because the system uses Sass mixins and functions to do all this wizardry, we can automatically test colours to see if they pass WCAG AA. If a particular combination fails to pass the minimum requirements, it will kindly serve you an error.
After colour, came typography, then buttons, and so on, to create a robust and accessible component library.
Embracing Imperfection
FT.com is constantly evolving, it deploys hundreds of updates a month without you knowing it. As hard as it is to admit, perfection is seldom achieved in such a progressive environment — but that’s not a bad thing. Our world is changing every day, and it’s how we adapt and respond during these changes that will enable us to create truly inclusive experiences.
Achieving WCAG accreditation had its challenges, but imagine trying to fill out a form you can’t see or clicking a button you can’t press. The a11y project started as a means to an end, but it’s a journey that will continue, baked into our design thinking, learning every step of the way.
