Oli Powell
Senior Product Designer
A11Y_Cover.jpg

An A11Y Awakening

Designing an accessible FT.com

eye.jpg
 

Before I joined the Financial Times, its website had gone through an extensive remodel that was two years in the making. The new version was a success, super fast and generally better, but all that prodding and probing had taken its toll - the website's visual language had suffered and its accessibility game was way off.

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. It helps to prevent discrimination against people with disabilities, by conforming to coding standards such as WCAG (Web Content Accessibility Guidelines).

Some users with limited vision prefer to view websites in high contrast mode for example

Some users with limited vision prefer to view websites in high contrast mode for example

The World Bank Group estimates that 1 billion people live with a disability –that’s 15% of the world’s population. So it’s vital that we design responsibly and consider the impact of our work on others.

After its maiden voyage, we undertook an a11y project to improve standards across FT.com, to ultimately gain AA Level WCAG accreditation — no mean feat for a newly-fledged publishing platform I can assure you. From colour contrast to button states, design 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.

 
 
Stark for Sketch - A colour-blind simulator and contrast checker.

Stark for Sketch - A colour-blind simulator and contrast checker.

 
 

The a11y project also provided an opportunity to reform our design language. Subsequently feeding those updates to our component library, to provide a compliant and consistent brand experience to all digital products that fell under the FT umbrella.

So we got to work, starting with the colour component. After all, colour has been a defining attribute of the Financial Times since it debuted the pink pages in 1893, and it didn't seem like we were getting rid of it anytime soon.

Working with Origami (guardians of FT frontend components and protectors of the realm), we streamlined a palette of 64 down to just 16, including a slightly pinker and more appropriately titled “paper”. Additionally, we developed a system that can dynamically produce tints and shades from the palette, and generate contrasted text based on an element's background colour. Happy days!

 
 
Origami Colour Mixer

Origami Colour Mixer

 
 

Because the system uses Sass mixins and functions to do all this wizardry, the component can automatically test colours to see if they pass WCAG. If a particular combination fails to pass the minimum requirements, it will kindly serve you an error.

 
 
Origami Contrast Checker

Origami Contrast Checker

 
 

We didn't stop there of course, after colours, came the surprisingly less complicated Typography (although I still have nightmares about Major Third’s and Perfect Fourth’s), then Buttons, and so on and so on.

FT.com is forever changing, 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. There will be things we’ve missed, things we’ve not even considered, but the most important thing, is that we keep conversations flowing to design better and design responsibly.

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. My a11y awakening started out as a project, a means to an end, but it’s a journey that will continue far beyond the pink pages, ingrained into my design thinking, not always perfect, but learning every step of the way.

people.jpg