Test components and patterns for complex WCAG 2.2 criteria (target, focus appearance, focus not obscured)

[dav-idc]

What

In our initial WCAG 2.2 style component and pattern assessment spreadsheet, I listed several entries as needing more testing.

I then promptly forgot about it and we never tested those.

So this is the epic to get those tested and then take action on any pieces that need design, development or guidance updates.

The initial assessment sheet (only look at the rows entries that have Work category = "Testing")

My new testing sheet (this is where the majority of the work will happen)

Why

There's 3 WCAG 2.2 criteria that are a bit more technical and inspection heavy than the others:

• Focus not obscured
• Target size (minimum)
• Focus appearance

Who needs to work on this

Accessibility specialist

Who needs to review this

Developers, Interaction designer

Tasks

• Create assessment spreadsheet for testing complex WCAG 2.2 criteria
• Update designs and development based on WCAG 2.2 complex testing
• Update guidance based on WCAG 2.2 complex testing

WCAG 2.2 issues to resolve

Beta Give feedback

1. WCAG 2.2: Increase header menu button min-height to 24px #4357
   WCAG 2.2 accessibility accessibility-concern header 🐛 bug +5
   
2. WCAG 2.2: Scroll bar within combobox is difficult to activate, due to width (15px wide) accessible-autocomplete#604
   accessibility 🐛 bug +2
3. WCAG 2.2: Cookie banner || Focus not obscured govuk-design-system#3256
   WCAG 2.2 accessibility cookie banner guidance +4
4. WCAG 2.2: Revisit button focus state #4469
   WCAG 2.2 accessibility accessibility-concern button +4
5. WCAG 2.2: Explore how to handle focus state of short links #4470
   WCAG 2.2 accessibility accessibility-concern typography +4
6. WCAG 2.2: Tab focus state risks failing 2.4.13: Focus appearance #4471
   WCAG 2.2 accessibility accessibility-concern tabs 🐛 bug +5
7. WCAG 2.2: Investigate thickness of input focus state border #4472
   WCAG 2.2 accessibility accessibility-concern +3

[dav-idc]

The testing sheet is now complete!
https://docs.google.com/spreadsheets/d/1PpKvhCGZJb1j0ZUUY2ZuA0CBQeu04yFD1bumiL8wGX8/edit?usp=sharing

Next step will be to glean potential Github issues that can be made from the 'focus appearance' entries (rows 31 to 61).

[dav-idc]

My final thoughts, for whomever picks this up:

• assign someone to take over, possibly beeps or an interaction designer
• definitely finish up those 3 tickets in the task list above ('WCAG 2.2 issues to resolve')
• decide what to do about the 30 ‘focus appearance’ entries near the bottom of that spreadsheet — there’s a ‘second
• at a minimum I would strongly recommend we update our focus state or overall styling for:
  • secondary buttons
  • inverse buttons
  • tabs (the rectangular tab bit)
  • black links (back, breadcrumbs)

[owenatgov]

@querkmachine made this comment investigating all our focus states and how well they meet (or don't meet) 2.4.13: focus appearance.

Looking at the testing spreadsheet, it appears that David was slightly more lenient in his interpretation. Most notably for inline links (see the row in the calculator for the check answers pattern for an equivalent visual element to test) David has taken into account the contrast change of the text itself which means it just passes. For everything else, David's testing lines up with @querkmachine's testing.

@querkmachine has recommended that our focus states overall need a more thorough review. The issues I've added to the "issues to resolve" task list are potential quick wins but we should think about how we present our focus states more thoroughly via alphagov/govuk-design-system#3007 at some point.