WCAG SC 2.4.7 ensures that users can easily identify which user interface component has keyboard focus. This criterion is vital for accessibility, as it helps low-vision keyboard users navigate and interact with web content efficiently. It focuses on providing focus indicators such as border, outline, underline, background-color change, or text color or style change to elements that should receive focus, so low-vision keyboard users can identify when an element is focused.
To ensure that any element receiving keyboard focus is visibly indicated, so users can always identify which element is active and ready for interaction. While browsers by default provide outlines and borders to focused elements, it is important to include these using CSS or JavaScript and to conduct testing to ensure visibility and contrast.
Use CSS properties to highlight focused elements: Use CSS properties like outline, border, or background-color to highlight focused elements.
Ensure visibility of focused elements: Ensure all elements are visible when they receive keyboard focus.
Avoid removing default focus indicators: Avoid removing default focus indicators provided by user agents.
Ensure sufficient contrast for focus indicators: When applying CSS properties, ensure that the contrast between the indicator and the adjacent elements complies with its success criterion.
Example: An author removes the default outline on focus, as it is not aligned with its style.
<style>
*:focus {
outline: none;
}
</style>
Explanation:By applying outline: none on all elements, the default outline of the browser won’t show once the focus arrives on elements. Authors have a tendency to turn off this rule to enhance the design of the website. However, this is a failure of this success criterion.
<style>
a:focus {
outline: 2px solid blue; /* Ensure high contrast with adjacent elements */
outline-offset: 2px; /* Optional: Adds spacing between the element and the outline */
}
</style>
Explanation:The previous CSS rule that was applied to all elements is now removed, and the default outline is restored to the elements on the website by default. We have set the focus to blue on all links as we ensured that the contrast between the outline and the background is more than 3:1. As an author, make sure to test all focus indicators to ensure that their background is visible and contrasts well with adjacent elements.