WCAG 2.2: Investigate the use of focus styles on large target areas

[querkmachine]

What

Some components—notably the accordion and step-by-step navigation—include large clickable regions to expand and collapse each section.

Currently, these areas turn light grey on hover.

However, the focus style used on these elements does not cover the same area.

Why

The WCAG 2.2 Level AAA 'Focus Appearance' criterion states:

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

The focus style not encompassing the entire clickable area may constitute a failure under this criterion.

Additionally, the current styles may fail the Level AA 'Focus Not Obscured (Minimum)' and Level AAA 'Focus Not Obscured (Enhanced)' criteria when used in combination with certain assistive technologies, such as screen magnifiers, as the focus-styled elements may not be visible on the user's screen even if other parts of the clickable region are.

Assumptions

• A screen magnification user may not see the focus style if their magnifier is centred to the right of the heading, causing the text and focus style to not be visible on screen.

Timebox

3 days

We should review progress after this period of time has elapsed, even if the spike has not been 'completed'

Who is working on this?

Spike lead: ?

Spike buddy: ?

Questions to answer

• Is the current focus style (text focus only) adequate to meet 'Focus Not Obscured (Minimum)'?
• Is the current focus style (text focus only) adequate to meet the Level AAA criterion ('Focus Appearance' and 'Focus Not Obscured (Enhanced)')?
• Is the alternative focus style (entire link) adequate to meet 'Focus Not Obscured (Minimum)'?
• Is the alternative focus style (entire link) adequate to meet the Level AAA criterion ('Focus Appearance' and 'Focus Not Obscured (Enhanced)')?

Done when

You may find it helpful to refer to our expected outcomes of spikes.

• Questions have been answered or we have a clearer idea of how to get to our goal
• Findings have been reviewed and agreed with at least one other person
• Findings have been shared, e.g: via a write-up on the ticket, at a show & tell or team meeting
• A decision has been made on whether we need to amend the focus style used by the components
• If necessary, an issue to amend the focus style has been opened

[36degrees]

Relevant discussion in the WCAG repo here: w3c/wcag#1337

[querkmachine]

As perhaps some other assumptions to test, I have a concern that there is no easy answer to this:

Our current (assumed) probem is that the current focus style does not highlight the entire area, so a magnification tool user whose viewport isn't near the text could not tell that the link they are looking at is focused.

Conversely, however, our focus style depends upon the combination of the black bottom border and the yellow background—as the yellow background alone does not provide sufficient contrast when used on white. Even if we were to make the entire heading take on the focus style, the lack of the 'underline' doesn't mean the focus style will necessarily be visible to someone with low vision.

[CharlotteDowns]

Design prototyping

I've been prototyping some thoughts on what an updated focus state could look like in this google slide deck.

[querkmachine]

Meeting Focus Appearance might have to be a bit of a stretch goal, as we would likely need to completely overhaul our focus styles to meet the area-based requirement.

The requirement itself is generally difficult to calculate, as it is different depending on the size of the element.

How the area based requirement works

Note

This is based on my personal understanding of the criterion. The below calculations may not be the intended or expected way to measure according to the criterion.

I'm also not the best at maths, so there may be faults in my calculations here! Be warned!

The focus style must enact a visual change that is equivalent in area to a 2px outline being placed outside the perimiter of the element being focused.

For example, if we have a rectangular button that is 120 pixels wide and 40 pixels tall, the total perimeter is equivalent to (width + height) × 4 + 16)¹.

In this case of this button, the minimum area that needs to visually change is (120 + 40) × 4 + 16 = 656 pixels.

Outlines are contextual to the shape of the element. Circles are a bag of fun. The easiest calculation I've worked out to get the required focus area of a circular element is to calculate the area of an outer circle and subtract the area of the element: (π × (radius + 2)²) - (π × radius²)

For example, for a 50 by 50 circle, we would get a result of 327 pixels.

In all cases the minimum visual change must be a 3:1 contrast ratio between the unfocused and focused colour. In the context of Frontend, this means that the yellow portion of the current focus style does not count if the unfocused colour is white, only the black portion does.

Update: Better maths for fun and profit

The calculations in the rest of this comment are a bit rag-tag and difficult to translate into code, so here are some simpler, more code-friendly alternatives. (They could probably still be made simpler somehow.)

Area of a uniform outline (equal offset and thickness on all sides) for a rectangle:
((width + (offset + thickness) * 2) * (height + (offset + thickness) * 2)) - ((width + offset * 2) * (height + offset * 2))

Area of a uniform outline (equal offset and thickness on all sides) for a circle:
(pi * (width / 2 + offset + thickness) ^ 2) - (pi * (width / 2 + offset) ^ 2)

When calculating the minimum area required by the criterion, use an offset of 0 and a thickness of 2.

Current Frontend elements

Default button

The button is 174 by 38 pixels². The minimum area of visual change needed is 864 pixels.

The black line applied on focus is 174 by 2 pixels, resulting in a total change of 348 pixels.

However, because the initial button colour is dark green, the yellow background contributes to the 3:1 contrast ratio requirement, so the area of contrasting change is actually 6,612 pixels, easily meeting the criterion.

Secondary button

The button is 171 by 38 pixels². The minimum area of visual change needed is 852 pixels.

The black line applied on focus is 171 by 2 pixels, resulting in a total change of 342 pixels.

Unlike the default button, the light grey background of the secondary button does not have a 3:1 contrast ratio with the yellow background of the focus style, so the button does not meet the requirements of the criterion.

Inline text link (single line)

The link is 110 by 25 pixels. The minimum visual change needed is 556 pixels.

The black line applied on focus is 110 by 4 pixels, resulting in a total change of 440 pixels.

The yellow background does not provide sufficient contrast with the light grey to contribute to the area, nor does the additional yellow added above the link on focus. The inline link does not meet the requirements of the criterion.

Inline text link (multiple lines)

For inline links that break across multiple lines, the Focus Appearance criterion specifies that the area should be calculated as though the link were on a single line. As such the first line's width (552 pixels) and second line's width (208 pixels) are combined to make a target area of 760 by 25 pixels. The minimum visual change needed is 3,156 pixels.

The black line applied on focus is similarly split, however the manner of implementation means that the second line obscures the focus style of the first. Combined with the slight offset by the non-link text at the start of the paragraph, as a result, the black portion of the focus style is only visible for 587 of that 760 pixel width.

The black line applied on focus is visible for 587 by 4 pixels, resulting in a total change of 2,348 pixels.

As before, the yellow does not have sufficient contrast to contribute to the area. The inline link does not meet the requirements of the criterion.

Inline text link (inverse)

I haven't explicitly tested it, but as we use the same focus style on inverted colour backgrounds, the opposite becomes true—the yellow portion contributes to the area and the black underline does not. In this context, we can probably safely assume that the existing focus style meets the criterion.

Text input

Text and text-like inputs are an interesting case, as we use a bespoke focus style for them that increases the visual thickness of the existing border. In this case, only the added thickness contributes to the visual change, the original border does not. The additional thickness is also applied to the inside of the element, rather than the outside.

The input is 219 by 40 pixels. The minimum visual change needed is 1,052 pixels.

The black box-shadow applied on focus is 2 pixels thick, however it is applied to the inside of the input. We can work out how much area this is taking up by using the same perimeter calculation used to work out the needed change, but by subtracting 8 from the width and height — 4 pixels for the border on each side, 4 for the box-shadow on each side.

This gives us a resulting contrasting change of (211 + 32) × 4 + 16 = 988 pixels, falling short of the requirements of the criterion. This is ultimately true regardless of the width of the text input.

Radio button

Like text inputs, the round boy's focus style is a 2px increase in thickness applied to the inside of the input. From this, we can assume that it will fail the requirement just like text inputs do. But these are round, so let's do the maths anyway.

The radio button is visually rendered as a 40 by 40 pixel circle, so applying a 2 pixel perimeter to it would give us a minimum visual change requirement of (π × (20 + 2) ^ 2) - (π × 20 ^ 2) = 264 pixels.

Like the text input, we can find out the change being applied by shrinking our diameter value by 8 pixels (or rather, radius by 4 pixels), giving us a resulting contrasting change of (π × (16 + 2) ^ 2) - (π × 16 ^ 2) = 214 pixels, failing the requirement.

Notification banner and error summary

Both of these components currently only apply a yellow outline when focused. As yellow does not provide sufficient contrast with white, for the purposes of Focus Appearance, these elements have 0 pixels of contrasting change and thus fail the criterion.

Linked image focus style

The linked image focus style merged in #3819 surrounds the contents in a 4 pixel black border that is offset by a 4 pixel yellow border.

The image is 300 by 195 pixels. The minimum visual change needed is thus 2,044 pixels.

As the black portion of the focus style is here offset outside of the element, we add 8 pixels to each dimension to account for the yellow border and scale the other values for a 4 pixel border ¹ to get (308 + 203) × 8 + 64 = 4,152 pixels, easily meeting the criterion.

On dark backgrounds, the inner yellow border is exactly 2,044 pixels, also meeting the criterion in this context.

Footnotes

1. The 4 extra pixels originate from the outline width (2 pixels, in the criterion) multiplied by 2 to account for the duplication on each side of the element. The 16 extra pixels here are to account for the four groups of 4 pixels that make up the corners of the outline. ↩ ↩²

2. Buttons have a 2 pixel box-shadow applied below them, so they visually appear to be 40 pixels tall. However, this box-shadow is not clickable, so I've not counted it in these calculations. ↩ ↩²

[CharlotteDowns]

This has prompted a review and rationalisation of our approach to styling focus states govuk-design-system. I'm closing this card in favour of moving the conversations to the govuk-design-system/3007.

For the moment I think we are agreed this is a stretch goal of the WCAG 2.2 related updates and actions.

[dav-idc]

During my WCAG 2.2 'complex testing' epic work, I've discovered that our lack of a conclusive image focus style affects our focus state for the crest in the footer. Just wanted to make a note here.

Our current focus state for the crest in the footer relies on areas of transparency in the image. And the overall effect is very low contrast between the yellow focus background and the grey crest.

I've made a note in my testing spreadsheet that this image focus state work interacts with the testing of the footer crest focus appearance.

It looks like the crest focus appearance will need to wait for the work to start on the 'Rationalise our approach to styling focus states' ticket.

[CharlotteDowns]

I’m happy to look into this on Monday.

…

On Fri, 20 Oct 2023 at 17:50, David Cox ***@***.***> wrote: During my WCAG 2.2 'complex testing' epic <#4347> work, I've discovered that our lack of a conclusive image focus style affects our focus state for the crest in the footer. Just wanted to make a note here. Our current focus state for the crest in the footer relies on areas of transparency in the image. And the overall effect is very low contrast between the yellow focus background and the grey crest. [image: The grey footer crest with a yellow focus applied.] <https://user-images.githubusercontent.com/98318778/276996689-7723143c-fc67-46fa-8e43-115a1b29032c.png> I've made a note in my testing spreadsheet <https://docs.google.com/spreadsheets/d/1PpKvhCGZJb1j0ZUUY2ZuA0CBQeu04yFD1bumiL8wGX8/edit?usp=sharing> that this image focus state work interacts with the testing of the footer crest focus appearance. It looks like the crest focus appearance will need to wait for the work to start on the 'Rationalise our approach to styling focus states' ticket <alphagov/govuk-design-system#3007>. — Reply to this email directly, view it on GitHub <#3839 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANNHM6H7OVZI6OAQ7T2TJ6LYAKTV5AVCNFSM6AAAAAAZQHY3ZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZTGA3TCMZZHA> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[CharlotteDowns]

Footer image link review and suggestions

Until we kick off 'Rationalise our approach to styling focus states' ticket, I suggest surrounding the footer image with a similar black border as is used in the @mixin govuk-focused-box used for the linked image focus style.

We defined the footer image link style as a 'logo focus style' in the grouping focus states team workshop (2021, updated in 2023 with additional thoughts from newer members of the team). We suggested the following principles/pieces of guidance/rules for focus states for logos:

Use a combination of yellow and black, to ensure contrast with both light and dark backgrounds. Don't try to style the borders of complex shapes like logos.

Thing to note 23/10/2023:
The crown copyright text is hard to read when the link is fully enclosed. We also have written guidance to deter the use of the govuk-focused-box on things that aren't only images.