Skip to content
Accessible Technology

Visible focus

Overview

Some computer users are physically unable to use a mouse. Others prefer using a keyboard because it’s often more efficient. Computers in general, and web browsers specifically, can be operated with the keyboard alone. In web browsers, users can use the tab key to jump between focusable elements (i.e., links, form fields, and any other content that has been added to the tab order with the HTML tabindex attribute). However, it is often difficult for keyboard users to tell where they are on the page. Designers must take care to ensure that it is easy to tell which item on the page currently has keyboard focus.

For additional information about keyboard accessibility in general, including a list of common keystrokes used in web browsers, see our Keyboard accessibility page.

Techniques

Avoid overriding browsers’ default focus indicator

All browsers display a visible outline around the element that currently has keyboard focus. This outline can be disabled using the outline:none property in CSS. Do not do this unless you are offering a better focus indicator than the one provided by browsers (see the next section).

Enhance browsers’ default focus indicator

Some browsers (e.g., Chrome, Safari) show an easy-to-see blue outline around the element that currently has focus. However, other browsers (e.g., Internet Explorer, Firefox) show a thin dotted line. The latter can be very difficult to see. In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, use the :focus selector in CSS to define a style change that happens when an element has focus. For example, the following CSS code styles links as black text on a white background by default; then reverses the foreground and background colors when the element has keyboard focus (using :focus) or when the user is hovering over it with a mouse (using :hover):

a {
 color: black;
 background-color: white;
 text-decoration: underline
 }
 a:focus, a:hover {
   color: white;
   background-color: black;
   text-decoration: none
 }

Testing

Using just the keyboard, try using the Tab key to navigate through the page. You should be able to tell where you are at all times.

Resources