WCAG 2.2: Images ‖ Focus Appearance / Focus Visible

[querkmachine]

What

The current focus style, when used on linked images, is only visible on the bottom edge of the link.

Resources

• Images styles page
• WCAG 2.2 criterion for 'Focus Appearance'
• WCAG 2.2 criterion for 'Focus Visible'

Why

The new WCAG 2.2 Level AAA criterion 'Focus Appearance' says:

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.

As the current focus style does not form a 2 pixel perimeter around and does not visually enclose the linked image, it fails to meet this criterion.

'Focus Visible', a Level AA criterion that exists in WCAG 2.1 and is currently included in WCAG 2.2 largely unchanged, says:

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

As our existing focus styles are created using box-shadows—which render outside of the element's bounding box—and are only visible below the linked image, the focus style is not visible to a user in situations where the image is at the bottom of the viewport, such as if the user has been automatically scrolled to that position when navigating through content with the keyboard.

In this situation, our current focus style could be argued to fail this criterion.

Who needs to work on this

• Developers

Who needs to review this

• Accessibility specialist
• Designer
• Developers

Done when

• Alternative focus styles for linked images have been investigated
• Next steps have been agreed