Second round of WCAG 2.2 visual prototyping

[CharlotteDowns]

What

Making changes to the design sprint prototypes (pull request #2955) based on the findings from the research. This work is to help our users update to WCAG 2.2.

All findings from the research have been recorded in the design sprint user research findings padlet board

Goal for the Project:

To support existing users in understanding WCAG 2.2 and ensuring their services meet the WCAG guidelines.

Why

So that teams using the design system can be compliant.

Who needs to work on this

Charlotte, Volunteers

Who needs to review this

The Design Sprint team

Done when

• Changed the colour of the WCAG 2.2 tag
• Added a WCAG 2.2 summary at the top of component/pattern affected pages

Things we need to apply in a higher fidelity prototype

• Link directly to the list
• Use highlight links to link to content in the summary to content within the page

Other concerns

If we make the WCAG 2.2 tag blue will this be confusing on pages with the 'Experimental' tag?

What is the strategy behind this design, how long should the banner and tags be on the pages that are effected? Is a year after the release of WCAG 2.2 too generous or not enough? Particularly as the legal obligation will only come into play 1 year from the publication date. Teams may not be proactive in this case and may only start doing the work at the enforcement date.

[CharlotteDowns]

Experiment 1: Blue Notification banner, Blue tag

First go at what a Notification banner component could look like to summarise WCAG 2.2 within a component/pattern page.

Rationale:

We want to ideally use a component available with the Design System.

Notification banner seems like the best fit in terms of how we describe it in the guidance – it’s there to highlight something important that affects the user, and it’s a temporary / time-sensitive message.

Risks:

• Does it make sense in this case for the notification banner to come before the h1? What would moving it mean?
• Is the Notification banner the right component?
• Improvements to content design of the summary are a must!

[CharlotteDowns]

Experiment 2: Blue inset text, Blue tag

Second go with Inset text component to summarise WCAG 2.2 within a component/pattern page.

Rationale:

We are using the inset text component to differentiate a block of text from the content that surrounds it. It seems to work better visually on the page than the Notification banner. In our user research of the first version of the prototype we found that users found that when we used the grey inset text in conjunction with a tag that it was difficult to distinguish WCAG 2.2 related content and other content where we have used inset text but doesn't relate to WCAG 2.2.

I noticed the inset text (the confirmation code content example) and thought that might be it.

“It makes the rest of the guidance difficult to parse"

It is why we changed the colour of the inset text component to blue in this experiment. Changing the colour of the tag component across the page to blue as well will hopefully differentiate the content further from existing content that uses inset text. It also intends to teach the user about the tag, and call attention to it being new.

Risks:

• Our users might expect to find a blue version of the inset text component in our Design System for similar use cases. Is this something we could support?
• That the intent of summarising the rest of the page using blue inset text but not repeating it at mentions of WCAG 2.2 further down the page still confuses users.

Experiment 3: Purple inset text, Purple tag

Same as experiment 2 but with a purple tag and purple border on the inset text.

Rationale:

During prototyping we had an 'Experimental' tag used on some components/patterns/guidance that used the default blue tag component. Differentiating the WCAG 2.2 tag with another colour was a solution that allowed both to sit in the same page. We used a grey tag in our first version of the prototype but some users missed it or found it difficult to spot amongst the other content.

as you’re scrolling down it sort of blends in

We used a purple tag and changed the inset text component to purple in this experiment.

Risks:

• It has similar risks to Experiment 2.
• Users may wonder why we've chosen to use purple instead of any other colour.

Experiment 4: Blue inset text, Blue tag, Heading

Same as experiment 2 but with a heading instead of paragraph text

Rationale:

Using a heading within the guidance that the inset text component highlights could make it clearer to users that the content is a summary.

Risks:

• That we don't provide an example of the inset text using a heading (are there reasons for this?)
• That we don't have Nunjuck macro options to support this.
• That the revised content for the heading makes it more difficult to get to the rest of the content on the page.
• That it is difficult to implement into the heading structure for the current guidance pages.

[CharlotteDowns]

We will prepare versions of these prototypes for Organise and run a team crit of updated prototype #3245 and move it forward in that issue.

Revised: we will take one of these versions of the summary into a prototype to get the team to crit.