Skip to content Skip to navigation

Visible Focus

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.

Who Does Visible Focus Help?

  • People who navigate by keyboard don't have a cursor to move to the element (control or form field) they want to interact with.
  • People who have visual or other print-related disabilities benefit from having a clear indicator of where they are on a web page.

What Does Visible Focus Mean?

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:

  • Skip navigation links, which are generally hidden
  • Buttons, tabs, and menus, for which you might consider a visual change other than a border

How to Check

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.

Target Audience: 
Designer
Developer
Last modified: 
April 22, 2015