Scaling accessibility with a design system

This is the intro post in a series about my experience of designing accessible web components, then scaling their impact through a design system.

I’m the lead UI designer in a design systems team at Lloyds Banking Group. Lloyds is the UK’s largest retail bank with around 30 million customers. To complicate things further our design system is multi-brand, covering Lloyds, Halifax, Bank of Scotland and MBNA. Any change we make to a component affects all brands, though the upside to this is any accessibility fixes are also multiplied outwards. Through a lot of trial and error we are slowly starting to propagate accessible components at scale.

A cartoon man and woman smiling

Learning, building a community, gaining allies

When I joined the team 18 months ago I’ve got to admit that didn’t really know all that much about web accessibility. In an effort to pull up my socks, and quickly, I’ve been on an interesting journey.

I’ve read extensively about accessible and inclusive design, taken part in user testing and got out into the community at talks and meetups. I’ve nerded my way through the entire Web Content Accessibility Guidelines open_in_new and facilitated reviews of our components with organisations like AbilityNet open_in_new and the Digital Accessibility Centre open_in_new. Most importantly I’ve learned that accessible components don’t necessarily lead to an accessible end product!

Regulatory and legal obligations aside, Lloyds has a genuine commitment to making inclusive products. Accessibility is a high priority within product labs and baked into the workflow. There is an active Accessibility Guild, tools, testing and clinics that as a designer you’re encouraged to take part in.

Ultimately, accessibility is a collaborative effort across disciplines and to succeed we’ve had to get everyone on-board; managers, product owners, designers, developers, and copywriters. We’ve learned how essential it is to build a community around a design system, gain allies within products teams, take onboard feedback, own our mistakes and improve.

A lot of guidance about accessibility is pitched at developers so I plan to write a series from a designer’s perspective; the positive changes you can make from the outset of a project through considered design.

Whilst I’ve learned so much in the past 18 months, I still feel like a bit of a fraud putting my thoughts into a blog. I’m certainly no accessibility expert, just a keen learner. Please call me out on anything I get wrong!

Cartoon picture of ugly duckling

But accessible are products are ugly

Mention accessibility to many creatives and you get a shudder. Hey, I’ve been there.

Aren’t accessible websites ugly colours? Won’t this restrict our creativity? But we’re not allowed to change the brand guidelines! We don’t have room in the sprint for all this extra work. No one with disabilities uses our product anyway. Besides, isn’t accessibility a developers job?

Accessibility is simple. It’s about making sure your product can be used by as many people as possible. It’s about being kind and ensuring that no one is being excluded. As the nerdy kid who was always picked last for the rounders team, I like this idea.

Perhaps it’s just the view from my curated Twitter bubble but it feels to me like the tide is turning. The term ‘inclusive design’ seems to have provided accessibility with a much-needed rebrand which is attracting a hipper crowd. Shouts of design leaders like Tatiana Mac open_in_new, Kat Holmes open_in_new and Mina Markham open_in_new are advocating towards a more inclusive, ethical and kinder web. Even in the wider world, I’m noticing the mean-spiritedness of politicians and authority figures seems to be causing a backlash of kindness. Could kindness and inclusion be the new light grey?

Cartoon of designer glasses

Hey designer, not everyone uses the web like you!

My attitude toward accessibility changed when I first visited DAC, the Digital Accessibility Centre. DAC employs a team with a range of disabilities who are specialists in testing digital products using assistive technology; screen readers, zoom tools and voice recognition software. My team at Lloyds got to met DAC’s testers and learn how they test our web components.

Watching DAC’s Low Vision and Screen Magnification Analyst test our web components changed the way I design. I realised how difficult it was to see a lightweight grey font and interact with low contrast form components. Observing regular users of assistive tech gives a different perspective on the challenges and advantages of tools like screenreaders. Testing for accessibility in an empathy lab or simulation will never afford you the same experience of chatting through journeys with people who regularly use these tools.

We increased the contrast on form field borders after seeing how visually impaired testers at the Digital Accessibility Centre struggled to see where to input information.
We increased the contrast on form field borders after observing how low vision testers at the Digital Accessibility Centre struggled to see where to input information.

Those space-saving Material Design form field labels open_in_new that animate on-click? I saw first hand what a headache these can be for a person using a zoom tool as the label can disappear off-screen as it floats up. And the testers who work at DAC are expert users, familiar with web workarounds and patterns.

Graphic showing how Material Design's form field label animates up into input box.
Material Design form input fields start inside the box, then animate on click to sit inside the input box border in teeny-tiny text. Adding the label above the input box makes the form field more accessible to everyone. Read this post on Why float labels are problematic open_in_new by Adam Silver.

It was a shock to realise I hadn’t been serving my whole audience. As a designer of products that help folks to manage their money, I realised I was doing a lot of customers a huge and frankly discourteous disservice by failing to appreciate the way they access the web. What had I subjected people to in pursuit of shiny things?

Cartoon mobile phone with the accessibility symbol

Getting to grips with WCAG

When I first started at Lloyds I was scared of WCAG. WCAG stands for Web Content Accessibility Guidelines open_in_new and is the benchmark for accessibility standards across digital products. If you’ve ever attempted to grapple with WCAG it is initially an overwhelmingly complex set of guidelines. It’s vast and reads sort of like a legal document, the kind that makes my brain go into “blah blah blah blah blaaah” mode, close my computer and decide to live off-grid in a yurt.

I realised the only way to engage with WCAG properly was to set aside a whole day and read the guidelines end-to-end. I then read through again, noting all the criteria related to design. Once I got to grips with it, I realised it was sensibly ordered by four principles of accessibility. When designing for the web, your content must be:

  1. perceivable
  2. operable
  3. understandable
  4. robust

Each WCAG guideline has a number of success criteria and also a conformance level open_in_new; these levels are A, AA or AAA. Conformance to a standard means that you meet or satisfy the success criteria.

The design system I work on at Lloyds is aiming for an AA level of conformance. AAA is a lot more difficult to achieve, especially with an old legacy system and established brand identity like ours. However, if I was starting a project from scratch, AAA is the standard I would be shooting for. Many big companies and organisations manage to achieve it. Aim high!

I plan to structure my posts around WCAG criteria and how we’ve attempted to meet an AA conformance level at scale through a design system. And the bumps in the road along the way.

Cartoon of a person meditating

A journey to a place of higher contrast and good karma

Have you ever made a design decision at the expense of your users because you thought it looked cool? Ever discounted groups of users because “no-one like that” will ever use your product? If you need redemption then join me on my journey from light grey to a place of higher contrast, accountability, and enlightenment.

First up – WCAG 1.0: making your designs Perceivable. Follow me on Twitter open_in_new for updates.


A big thank you to Marged Cother for reading this for me as part of Amy Hupe’s #10moreblog posts challenge.


Sources:

Thanks for the positive feedback!