Making the NHS.UK focus state accessible (with help from GOV.UK)
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.
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
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:
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).
I used the colour contrast checker to check the text contrast with the object background and the object contrast with the page background.
With the colour accessibility simulator, I simulated many different colour vision deficiencies, including protanopia, tritanopia and monochromacy.
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
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’)
Hover state style
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.
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
