Review MOJ Pattern Library against WCAG 2.2 criteria

[gregtyler]

Summary

Now that WCAG 2.2 is published, we need to review the components and patterns of the Pattern Library—and the documentation site itself—against the new criteria. We should then fix any issues we find, or offer additional guidance if we identify implementation risks.

New criteria in WCAG 2.2

Based on w3.org

• 2.4.11 Focus Not Obscured (Minimum) (AA)
• 2.4.12 Focus Not Obscured (Enhanced) (AAA)
• 2.4.13 Focus Appearance (AAA)
• 2.5.7 Dragging Movements (AA)
• 2.5.8 Target Size (Minimum) (AA)
• 3.2.6 Consistent Help (A)
• 3.3.7 Redundant Entry (A)
• 3.3.8 Accessible Authentication (Minimum) (AA)
• 3.3.9 Accessible Authentication (Enhanced) (AAA)

[gregtyler]

Components

2.4.11 and 2.4.12 Focus Not Obscured

• Primary navigation search toggle may do this if there is interactive content below the pop-out search box
  • I think the most consistent solution to this is to minimise the pop-out when it loses focus
  • Otherwise, we could tell implementers to not position content there, or to minimise the box if content is focused. But that would push a lot of work onto implementers, and is likely to not work consistently.

Layout	With pop-out expanded (obscured link has focus)

• Button menu also has a pop-out but it minimises when the focus is lost, ensuring that focused content is not obscured
• Scrollable pane supports off-screen content but the browser will bring it into view if focussed

2.4.13 Focus Appearance

• Many of our components adopt their focus styles from the GOV.UK Design System (since they are links or buttons), which pass this criteria
• Add another makes heading interactive, giving them a focus style based on Design System links:
  • 
• Filter introduces filters as a new interactive component:
  • 
• Side navigation introduces navigation links as a new interactive component:
  • 
• Primary navigation search toggle has a custom focus style based on Design System links:
  • 

2.5.7 Dragging Movements

• Multi file upload can be dragged to, but users can also use keyboard or mouse to select files to upload

2.5.8 Target Size

• Badges are the smallest component in the Pattern Library. They are not intended to be interactive, but are 24px tall

3.2.6 Consistent Help

• None of the components have built-in help

3.3.7 Redundant Entry

• None of the components specifically require double-entry

3.3.8 Accessible Authentication

• Password reveal supports being pasted to, autocomplete and password managers (in both "show" and "hide" modes)

[gregtyler]

The Pattern Library site

Reviewing custom components and our implementation of shared GDS and MOJ components

2.4.11 and 2.4.12 Focus Not Obscured

• The "Back to top" link floats on tall screens but always sits in a dedicated horizontal column, and always below navigation links, so is never at risk of covering other text
• The "Open this example in a new window" link can sit above focussed content
  • An easy fix for this is to move the link to sit as a block above the example, rather than floating over the top
  • In both examples below I've shrunk the example box to show the problem more clearly

Current problem (focussed tag partially obscured under float but could be fully)	With block example link

2.4.13 Focus Appearance

• Maybe an inconsistency rather than a problem, but the open example link does not change font colour when focussed:
• Similarly, the "Back to top" link doesn't quite match other links:
• The "Copy code" button has no clear focus style (relies on browser defaults):

2.5.7 Dragging Movements

• There are no dragging elements in the site

2.5.8 Target Size

• None of the custom site elements are smaller than 24px on either axis

3.2.6 Consistent Help

• Every page links to the GitHub and Slack channel at the end of its content
  • Both of those require some level of engage or authentication, so we should consider providing a contact email address also
  • We should also consider whether this location is predictable enough, as content height determines where on the page it appears. Creating a contact page and linking to it in the footer would be more predictable

3.3.7 Redundant Entry

• No entry is required in the site

3.3.8 Accessible Authentication

• There is no authentication in the site

[gregtyler]

My suggestions

• Make the primary navigation search toggle disappear when focus is lost (2.4.11, 2.4.12)
• Make the "Open example" link block-level rather than floating (2.4.11, 2.4.12)
• Align focus style of following items with the Design System (2.4.13):
  • Open example link
  • Back to top link
  • Copy code button
  • Side navigation item link
• Create "contact us" page, including an email contact address, and link to it in the footer of all pages (3.2.6)

[gregtyler]

We discussed the Primary navigation search toggle today, and queried whether the proposed solution would be a backwards step for usability if users didn't expect the auto-closing behaviour. An alternative suggestion was to add an explicit close button, so that users are aware that it is open and closable.

We specifically discussed the WCAG wording around user-opened content:

Content opened by the user may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered hidden due to author-created content.

This may be somewhat answered a mitigation suggestion that aligns with our original proposal:

When focus leaves the additional content, the additional content is hidden or collapsed. This is very similar to patterns discussed previously under Non-persistent opened information. A distinguishing factor can be that the user's last point of interaction in the disclosure is preserved (it persists) even though it may be hidden until a user returns. Some trees and left navigation patterns behave this way.

For now, I'll prototype a version that auto-closes for testing and wider feedback. We can specifically inspect the usability concerns and try another approach if they prove to be a blocker.

[gregtyler]

Fixed in 2.1.0 (via #545)