How the community helped us add WCAG 2.2 guidance to the Design System

[CharlotteDowns]

We recently announced that we've published guidance updates to help service teams meet new WCAG 2.2 criteria.

Here’s a few ways feedback from our WCAG 2.2 workshops, surveys or research sessions has informed our decision-making.

On component and pattern pages...

We created WCAG 2.2 summaries

Survey respondents told us they’d like to see WCAG 2.2-specific information relating to each component and pattern, including:

• whether it meets WCAG 2.2
• a simplified explanation of how WCAG 2.2 affects the component or pattern
• things to do, and not to do, to meet WCAG 2.2 (dos and don’ts)
• a summary of this information at the start or end of an affected page

From this feedback, we decided to follow a similar approach as an error summary – so we added a summary of WCAG 2.2-related changes on each component and pattern page, along with jump links. We also made a list of every component and pattern affected by WCAG 2.2.

We highlighted WCAG 2.2-specific guidance

In initial prototypes, we’d taken a more standard approach to highlight WCAG 2.2-specific guidance in the body of component and pattern pages.

As we tested this with users, some participants gave feedback that it was difficult to find and identify what the highlighting was, as it looked too similar to other types of guidance we give.

Based on this feedback, we developed a more distinctive way to highlight WCAG 2.2 guidance. We now use a new ‘border box’ and uniquely-coloured WCAG 2.2 tag to avoid confusion with any other formatting on our website.

You can see this on every component or pattern affected by WCAG 2.2, such as the Header component.

Across the Design System website...

We improved navigation to accessibility guidance

In user testing, participants working on accessibility issues wanted to quickly get to a full list of components and patterns affected by WCAG 2.2.

They also expected to be able to find overall information about accessibility right away.

We used this information as evidence to support our decision to introduce a new Accessibility section to our website and top navigation.

We added more generalised WCAG guidance

In surveys, users told us they expected to see patterns or more general (non-component specific) guidance about the new WCAG 2.2 criteria.

Based on this feedback, we added some general-level guidance to the ‘Changes to the Design System to meet WCAG 2.2’ page.

The page focuses on giving practical advice to service teams and signposting relevant information on the Service Manual and WCAG websites.