Focus visibility is essential for the users who are dependent on a keyboard. Use of keyboard can be a situational incident where your mouse or touchpad is no longer working or it can be a necessary thing for the users who use the keyboard regularly. Once you start using a keyboard to access the web content, focus visibility would be the only thing you are dependent on to track your focus on a webpage. And it would be very frustrating if you cannot see where the focus is placed once you hit the tab to navigate and see no changes in the UI.
This is a very similar situation when we try to find the mouse pointer and cannot see it because of a technical glitch or system problem. So more or less we are dependent on a focus indicator to access a webpage easily and even the focus is available and doesn’t have proper visibility it might be a problem for the people with short term memory limitations, attention limitations, or the users who are not able to perceive the color difference below the required color contrast ratio.
So how to solve this problem? this can be a very easy task for the developers and website owners.
Using default focus indicator:
The best thing would be not to override the user-agent provided focus indicator which is not an easy task for the owners/developers who use some kind of website builder or UI library which utilize “outline:0” as part of their creative designs.
To experience the default focus indicator by user-agent like Chrome, try to create an HTML file “index.html” with the below code:
Sample HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Hello world</button>
</body>
</html>
Open the “index.html” file in your chrome browser, then navigate the page using the tab key and you will see a black outline around the button “Hello world” when the button receives keyboard focus.
This outline is called focus indicator and this is managed by the user-agent (chrome in this scenario) until you override this by your CSS.
Benefits of using default focus indicator:
- User-agent will handle the Color Contrast ratio requirement of the focus indicator and you don’t have to worry about changing the focus indicator color when any of the web page sections have a different background color used.
- In most cases, every interactive element will have a focus indicator that is a requirement of Success Criterion 2.4.7: Focus Visible.
Custom focus indicator
At times we have to use custom focus indicators because of some design limitation or color scheme of the website of web app but here the main problem arises.
do we need to add a focus indicator manually for each interactive component?
do we have a solution so that we can add focus indicators on maximum components?
the answer is yes!!!
We have many ways to add focus indicators to cover most of the components.
Solution 1
*:focus{
outline: 2px auto -webkit-focus-ring-color;
}Solution 2:
*:focus{
box-shadow: 0 0 0 1px #000, 0 0 0 2px #fff;
}In both solutions, a focus indicator will be displayed when an interactive element receives focus and the benefit of using these solutions is that these focus indicators will pass the color contrast ratio with any background color.