WCAG: Focus indicators inconsistent through the site (Vision Australia additional feedback #1)

[CJE001]

User story

As a keyboard user
I want consistent keyboard display
So that I can identify where I am on the page

Description

WCAG 2.2 Level AA requirements for focus indicators remain the same as 2.1:

o elements that receive keyboard focus must have a visible focus indicator
o focus indicators must have a 3:1 contrast ratio with the adjacent background
o the focus indicator must not rely on the use of colour alone.

Ideally, a consistent focus indicator would be used throughout, although this is not required under WCAG.

The new 2.2 criterion 2.4.13 Focus Appearance (which was unfortunately moved to AAA) takes the requirements up a notch, and if possible, it would be ideal to meet these requirements. This could be most easily achieved by making sure that focused components:

o have a focus indicator of a solid outline that is at least 2CSS pixels thick
o the focus indicator has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states
o the focus indicator has a contrast ratio of at least 3:1 with the adjacent background

For example, if your background was white (#ffffff), and you had a 2px outline in black (#000000), the criterion would be met (21:1 contrast ratio between the default white and the focused black pixels). Note – this is not the only way to meet 2.4.13.

It's also advisable to create a 'universal' focus indicator that works with all backgrounds and Windows High Contrast Mode (WHCM). This could be achieved with a technique such as combining an outline with a box-shadow, for example:

:focus-visible {
outline: 2px solid white;
box-shadow: 0 0 0 6px black;
}

The GOV.UK focus indicator pattern uses this technique, but extends this a little by adding a background colour (yellow). They also use a transparent outline, so that the focus indicator is retained in WHCM.

Acceptance criteria

Given I am a keyboard user who relies on keyboard navigation
When I tab through focusable elements
Then I expect consistent use of focus indicators.

[fionamorrison23]

Hi @jcloys can you please test this against CivicTheme core to ensure that this is not related to colours in the sub-theme on the DTA site? Thanks.

[jcloys]

This is more of a suggestion and not a failure. If we would like to add a box shadow to work with windows high contrast then sure.

[fionamorrison23]

Leaving this open, however, this is not a fail for WCAG AA compliance, noting jcloys comment above.