WCAG 2.4.7 AA: Link has no visible focus indicator (Issue 29)

[CJE001]

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

Global issue – Back to top link
digital.gov.au beta | digital.gov.au (https://www.digital.gov.au)

Observed outcome

The back to top link does not have a visible focus indicator when it receives keyboard focus. The element has been given an outline-colour of transparent in the CSS.

Code used

.ct-back-to-top .ct-back-to-top__button, .ct-back-to-top .ct-back-to-top__button:focus, .ct-back-to-top .ct-back-to-top__button:active, .ct-back-to-top .ct-back-to-top__button:visited, .ct-back-to-top .ct-back-to-top__button:hover {
border-radius: 6rem;
padding: .5rem;
background-color: var(--ct-color-light-interaction-background);
border-color: var(--ct-color-light-interaction-background);
color: var(--ct-color-light-interaction-text);
line-height: 0;
outline-color: rgba(0,0,0,0);
}

Why this matters

Without a highly visible focus indicator, sighted keyboard users may have difficulty determining what element has keyboard focus. They may have trouble activating controls or interacting with the content.

Expected outcome

Ensure that all focusable elements have a highly visible focus indicator when they receive keyboard focus. Preferably, this should be a solid border that surrounds the component.

Ensure that the contrast ratio between the focus indicator and the adjacent background is at least 3:1.

Code example

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

Note

When customising focus indicators, it may be necessary to design multiple versions to ensure sufficient contrast with all component and background variations.