2.4.7 Focus Visible

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

Description

Focus visible is a simple yet an important accessibility requirement. People with difficulties such as low vision, motor difficulties, tremors use only a keyboard to interact with the web page. It is very much important to let them know which page element has current focus. People with attention limitations, short term memory limitations easily gets distracted and may have to find where the current keyboard or mouse focus is. Ensuring location focus visible is very much important.

When the users tab on the web page or point the mouse on any element the element should be able to provide a visual indication to let the users know that currently the focus is at that element. Usually browsers have default behavior providing visible focus around the currently selected element. Different browsers may have different ways of representing the focus visibility. Providing additional way such as changing the background color and foreground color or increasing the thickness of the dotted border of the element when a mouse is hovered or keyboard is focused makes all users to identify the visible focus.

How to achieve this

CSS example to change the background of the link while focused with keyboard or mouse.

Below is a container having the links.
<div id=”navigation”> Navigation links</div>
CSS code:

#navigation a:hover, #navigation a:active, #navigation a:focus {
background-color: #DCFFFF;
color:#000066;
}

Changing background for input elements using :focus pseudo-class:

<html>
<head>
<style type=”text/css”>
input.text:focus {
background-color: #7FFF00;
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6;
color: #000;
}
</style>
</head>
<body>
<form method=”post” action=”form.php”>
<p><label for=”fname”>Name: </label>
<input class=”text” type=”text” name=”fname” id=”fname” />
</p>
<p>
<input type=”radio” name=”sex” value=”male” id=”sm” /> <label for=”sm”>Male</label><br />
<input type=”radio” name=”sex” value=”female” id=”sf” /> <label for=”sf”>Female</label>
<p>
</form>
</body>
</html>

Points to remember

  • Ensure that only one focus indicator is available in the page.
  • Ensure that when users navigate away from the element the focus is carried away appropriately.
  • Ensure that keyboard users and mouse users are considered while providing the visible focus indicator.
  • If the default browser supplied focus indicator is used ensure that it does not overlap or mix in the background color of web page leaving the user in a confusion to identify the focus indicator.

Comments are closed.