Understanding WCAG SC 2.4.7 Focus Visible
2.4.7 Focus Visible
Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
Transcript
Hello everyone. Today we’re going to talk about focus visibility. We’ll also talk about its requirements, benefits, some good examples, failure scenarios, and how we can fix them.When designing user interfaces, it’s essential to consider accessibility for all users, including those who rely on keyboard navigation. When operable user interface elements receive keyboard focus, it is important to provide a visible focus indicator. This indicator helps users know which element is currently in tab focus and can be interacted with using a keyboard. For example, when an input field receives tab focus and is ready for inputting data, a visible focus indicator should be displayed. This can be achieved by displaying a caret symbol within the input field, indicating that it is currently focused.
There are several groups of users who benefit from the provision of a visible focus indicator. Users who rely on keyboard navigation to interact with websites can easily determine which element is currently in focus. This allows them to navigate through the interface efficiently and interact with the desired elements without confusion. Individuals with short-term memory or other cognitive disabilities can also benefit from visible focus indicators. Providing a clear visual cue helps them remember and keep track of the element in focus, reducing cognitive load and improving their overall browsing experience.
Had awesome examples that showcase different ways to implement visible focus indicators. A website demonstrates good accessibility practices by ensuring that all interactive elements can be accessed using a keyboard. Additionally, each interactive element has a visible focus indicator in a solid three-pixel border that covers the entire element. The border has a contrast ratio of 3:1 against its adjacent colors, ensuring it stands out and is easily perceivable. Another website successfully meets the accessibility criterion by providing a visible focus indicator that incorporates a subtle color change. When an element receives keyboard focus, its color transitions from the default state of blue to a focus state of purple. However, it is important to note that while this method passes the criteria, it may not be perceivable by color-blind and low-vision users. In another example, a website uses the technique of bolding the text to indicate focus state. When elements receive keyboard focus, this approach provides a clear and noticeable visual cue for users to identify the focused element, enhancing accessibility and usability.
Now let’s look at some failure scenarios highlighting problematic approaches to visible focus indicators. In one instance, a website lacks any visible focus indicator for its user interface controls. It deliberately disables the focus indicator using CSS, specifically using the outline property set to zero. As a result, keyboard users have no clear indication of which element is currently in focus, making navigation and interaction challenging. Another website incorporates a focus indicator that is designed with subtle visual cues. The indicator is in white, placed on a white border, virtually rendering the focus state invisible. The lack of distinction makes it difficult for the users to determine the currently focused element, hindering the ability to navigate and interact effectively.
To address these issues, here are some steps to fix the problem. One should enable visible focus indicators. Remove any CSS properties that disable or hide the focus indicator, such as outline set to zero. Ensure that all interactive UI controls, including links, buttons, and form fields, display a visible focus indicator when they receive keyboard focus. One should enhance contrast and choose colors with sufficient contrast to ensure that the focus indicator stands out against the background or surrounding elements. Avoid using colors that may blend in or become indistinguishable, especially for users with color blindness or low vision. One should also provide alternative indicators. This could include using borders, underlines, or changes in font styles to supplement the focus indicator, making it more accessible for users who may have difficulty perceiving color changes.
In conclusion, providing clear and visible focus indicators enhances accessibility for keyboard users, allowing them to navigate and interact with web content effectively. Implementing visible focus indicators ensures inclusivity and a more user-friendly experience for all. This is the end of the video. Thank you for joining. If you like the video, like and subscribe.
Focus visible is very important for low vision users, people with motor disability & attention disorders. If there is no visible focus on any active element or the element that receives keyboard focus users might not be able to determine where their current focus is & will be lost. While browsers handle the default visible focus for active elements it is always a best practice to provide visible focus to the elements using the CSS techniques.
Points to Ponder
Code Example
For the current site the visible focus is provided in style.css in the following way
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
