https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/

We’ve made the GOV.UK Design System more accessible

A computer monitor showing the 'dates' section of the GOV.UK Design System

We’ve made some changes to the GOV.UK Design System to make it more accessible. We’ve done this to make sure all the things the Design System contains meet WCAG 2.1 level AA to help ensure compliance with The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.

This includes a new release of GOV.UK Frontend – the frontend framework that lets you use the Design System in your service. The release contains a number of breaking changes.

We’ve also released a new version of the GOV.UK Prototype Kit.

Here’s what’s changed, and what you need to do now.

What’s changed

In the Design System team, we’re continuously striving to ensure the Design System, Frontend and the Prototype Kit are as accessible as possible.

We test all of our components with a range of browsers, devices and assistive technologies, and carry out research with a broad range of users, including those with disabilities

We’ve made some important updates to improve the standard of accessibility for users. This includes making sure that the Design System and the styles, components and patterns it contains meet level AA of WCAG 2.1.

This will help ensure compliance with The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.

New focus states

The most easily recognisable change we’ve made is to focus states.

Some people use keyboards or other devices to move through a page by jumping from one interactive element to the next. Focus states let users know which element they’re currently on and that it is ready to be interacted with.

We’ve changed the focus style for all components to make sure they meet the new WCAG 2.1 level AA requirements for contrast and non-text contrast.

An image showing link focus style before the changes: black text on an orange background with a thin underline
Link focus styles before
An image showing link focus style after the changes: black text on an orange background with a thick underline
Link focus styles after
An image showing input focus style before the changes: a text box with a thin black and thin yellow border
Input focus styles before
An image showing input focus style after the changes: a text box with a thick black and thin yellow border
Input focus styles after

We’ve also published guidance explaining more about the new focus styles and how to apply them.

Updated GOV.UK colour palette and font

Alongside our work to make the Design System more accessible, we’ve also made some changes to the GOV.UK colour palette and fonts.

This work is not directly related to meeting WCAG 2.1 AA, but it made sense for us to include these updates as part of the same breaking release, to minimise disruption for those that need to make updates.

You can read more about these changes in this blog post.

What you need to do

If you’re already using GOV.UK Frontend and the Design System

If you’re using styles and components from the GOV.UK Design System in your service, you’ll need to update it to use the new version of GOV.UK Frontend to get the changes.

If you have created custom components for your service, you will need to manually update them to use the new styles and colours.

It’s really important to be aware that updating to the latest release of Frontend will not automatically mean your service is accessible and meets level AA of WCAG 2.1.

You still need to make sure your service as a whole meets accessibility requirements.

Read more about what you need to do in order to make sure your service is accessible.

If you are using GOV.UK Elements, Template or Frontend Toolkit

We will not be updating the following deprecated codebases:

  • GOV.UK Elements
  • GOV.UK Template
  • GOV.UK Frontend Toolkit

That means they will not meet level AA of WCAG 2.1. If you are using one of these codebases in your service, we recommend that you update to use the Design System as soon as possible.

If you are not able or do not want to do this, you can update styles manually. However, you should bear in mind that this will be more work, and you will not automatically get future updates.

Need help?

The GOV.UK Design System is supported by a full-time team at the Government Digital Service.

See the full details about the accessibility updates in the GOV.UK Design System.

If you have any questions or need help updating your service, you can get in touch by:

Sharing and comments

Share this page

2 comments

  1. Comment by Daniel G. Cabrero posted on

    This is a fantastic move towards adapting to and adopting better uses of technology for all - well done!
    Question, though: does this mean that this approach https://github.com/alphagov/govuk-design-system/pull/784/commits is now no longer relevant?

    Reply
    • Replies to Daniel G. Cabrero>

      Comment by Dave House posted on

      Hi Daniel,

      While the GOV.UK Design System and its contents now meet this standard of accessibility, having automated tools like aXe is still recommended. These can help flag up any issues that may be introduced over time. It’s also possible to create an inaccessible experience with accessible components, so teams should still use automated and manual testing on their own products and services even if they’re using the Design System.

      Reply

Leave a comment

We only ask for your email address so we know you're a real person

By submitting a comment you understand it may be published on this public website. Please read our privacy notice to see how the GOV.UK blogging platform handles your information.