Making the NHS.UK focus state accessible (with help from GOV.UK)

Dave Hunter
Mar 13 · 6 min read

The NHS is for everyone, so all NHS digital services need to be accessible to everyone. That’s why the team I work in, the NHS digital service manual team, recently made the NHS.UK frontend more accessible by redesigning the focus state styles — with help from the GOV.UK Design System team.

Spider-man with the GOV.UK focus state style pointing at a Spider-man with the NHS.UK focus state style.
Spider-man with the GOV.UK focus state style pointing at a Spider-man with the NHS.UK focus state style.
Spider-man (with the GOV.UK focus state style on his head) pointing at Spider-man (with the NHS.UK focus style on his head).

What is a focus state?

Some people use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. The focus state lets users know which element they’re currently on and that it’s ready for them to interact with.

The problem with the old focus state

Existing focus state style, with a warm yellow focus colour, black text colour and light grey adjacent colour.
Existing focus state style, with a warm yellow focus colour, black text colour and light grey adjacent colour.
The old focus state style on NHS.UK: a warm yellow focus colour, black text colour on a light grey adjacent (page background) colour.

In the Web Content Accessibility Guidelines (WCAG) 2.1 guidelines it states: “The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s)”.

The old focus state was failing WCAG 2.1 because the focus colour and page background (adjacent) colour had a contrast ratio of 1.56:1. So some people with a colour vision deficiency (around 1 in 12 men and 1 in 200 women) couldn’t use the focus state, as they wouldn’t be able to recognise the difference between the focus colour and page background colour.

Working and learning from GOV.UK

Lucky for us, the GOV.UK Design System team had the same problem and had been working on a solution for a few months.

I messaged Dave House, the then designer on the team. Dave kindly agreed to meet and share all the hard work he and the team had done. He spoke about the team’s in-depth research into the WCAG 2.1 guidelines (even building their own colour contrast checker), multiple design iterations and accessibility testing feedback they received from the Digital Accessibility Centre.

A few weeks after our meeting, the GOV.UK Design System team released the new GOV.UK focus state style:

GOV.UK’s new focus style for a link against different background colours.

The GOV.UK focus state has been cleverly designed to work on both dark and light backgrounds. The yellow has a high contrast with dark backgrounds and the thick black border has high contrast against light backgrounds.

Considering how much we liked the GOV.UK solution and the amount of time/effort spent making it, we decided that the smart thing to do would be to start with the GOV.UK design solution and concentrate our efforts on testing what colours worked for the NHS. This allowed us to fix the problem sooner, therefore saving time and public money.

Our design process

Testing colours

Using a colour contrast checker (the one that the GOV.UK Design System team built) and a colour accessibility simulator, I tested a variety of colour combinations (including colours based on the NHS colour palette and others on standard highlighting colours).

A selection of colour combinations we tested.

I used the colour contrast checker to check the text contrast with the object background and the object contrast with the page background.

Screenshots of the colour contrast checker.

With the colour accessibility simulator, I simulated many different colour vision deficiencies, including protanopia, tritanopia and monochromacy.

Screenshots of the colour accessibility simulator using the protanopia, tritanopia and monochromacy filters.

After testing the colour contrast, colour vision deficiencies and taking into consideration the NHS brand, we agreed on what colours to test with users:

  • NHS yellow — for the focus colour
  • NHS black — for the focus text and border colour
The new NHS.UK frontend focus state styled for a link against different background colours.

This colour combination works well because:

  • it has good contrast for both light and dark backgrounds
  • it is clear when you add a colour filter (for users with a colour vision deficiency)
  • the colours already exist in the NHS colour palette (keeping ‘on brand’)
The new NHS.UK frontend focus style for radios.

Hover state style

The old NHS.UK frontend link styles (link > hover > focus).

As well as restyling the focus state, I needed to look at the old hover state style. The two styles were almost identical and I questioned whether they should be.

I did a bit of research and on Twitter, I found some interesting threads. One from Sāra Soueidān saying “I don’t match them (hover and focus states)— I make my focus styles more prominent.” and that a “Hover is easier to detect…”. And one from Joe Lanman, questioning whether “the cursor changing would be enough?”.

Taking all this into consideration, I created a design hypothesis and iterated the styles. Removing the yellow background but maintaining some affordance by removing the underline and changing the text colour.

Design hypothesis for the hover state

If we make the hover style less prominent
Then users will still be able to detect the link
Because they already know where they are on the page
We will know this when users navigate through the pages without any problems.

The updated NHS.UK frontend link styles (link > hover > focus).

Testing with users

As well as making the styles compliant with WCAG 2.1, we also need to make sure that they were usable.

For this, we put the styles through some usability tests. I recreated pages of the NHS website using the NHS.UK prototype kit and recruited a variety of test participants, including people:

  • with and without colour vision deficiencies
  • who do and do not rely on focus states to navigate a web page

At NHS Digital we have something called the Ability Network (a staff network that champions people with diverse abilities and works to empower people ​with long-term conditions, disabilities and neurodiversity in the workplace). Members of the Ability Network kindly volunteered to participate in the usability testing.

Participants completed several tasks, including seeking information (navigating through pages) and filling in online forms.

We were looking to prove or disprove our design hypotheses by seeing if:

  • changing the hover state affected the user’s experience
  • the focus state styles helped users who relied on them
  • the focus state styles affected the users who don’t rely on them

Test findings

Testing went well, all participants completed the tasks (navigating through the prototype successfully) without any problems. Users who didn’t rely on focus states didn’t notice them and users who did rely on the focus states found them useful.

Following the success of the usability testing, the new focus state styles were added to the NHS.UK frontend, alongside guidance within the NHS digital service manual.

Sharing is caring

“Make things open. It makes things better” — a design principle both the NHS and the government share. With the GOV.UK Design System team working in the open, we were able to quickly find a solution to our problem.

If you use the new NHS.UK focus state styles, you can help us and the community by sharing any research or feedback on GitHub.

A nice message from the community…

https://twitter.com/paulmsmith/status/1192850671831277569

A nice shoutout from Paul Smith on Twitter (https://twitter.com/paulmsmith/status/1192850671831277569)

Dave Hunter

Written by

Interaction Designer @ NHS Digital. Working on the NHS service manual (design system, NHS.UK frontend and NHS.UK prototype kit).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade