When navigating a website with a keyboard, there is no visible cursor that is being controlled by a mouse. As a result, there needs to be a way to show the user what element has focus.
In addition, whether or not your site visitors are using a mouse or a keyboard, easily visible focus should always be retained. Focus allows a wide range of users to know when they are about to activate a link, button, form control, etc.
Links, buttons, and other controls often have a visible border showing when they have focus. Form fields generally show a vertical bar in the field, indicating that the user can enter text, or they contain highlighted text, indicating that the user can type over the text.
If a border is used to indicate focus on a link or other control, it must have sufficient contrast to be clearly noticed.
The following are some particular use cases that need to be considered when designing focus indicators:
To check for visible focus indicators, use the tab key to navigate to all page elements. As each element receives focus, there should be a clearly visible change to the element.