Focus

Focus refers to the state of a web page element when it receives keyboard attention. A visual indicator, often an outline, signals which element is active. Without this indicator, keyboard navigation becomes impossible.

Press Tab on any web page. An outline appears around the selected link or button. That's focus: the visual signal that indicates which element is ready to receive your action.

Remove that outline, and keyboard navigation becomes blind.

#What receives focus?

In HTML, certain elements are focusable by default: <a>, <button>, <input>, <select> and <textarea>. The browser cycles through them in DOM order when you press Tab.

A clickable <div>, however, does not receive focus. To make it focusable, three additions are necessary: tabindex="0" to include it in the tab order, an ARIA role to indicate its function, and keyboard handling for Enter and Space keys. Forget even one of these elements, and your component is unusable via keyboard.

#Why outline: none is a mistake

WebAIM calls this practice a "plague". Designers find the browser outline inelegant. Developers add *:focus { outline: none; } to their CSS reset. The focus indicator disappears from the entire page.

The W3C classifies this practice as a failure of criterion 2.4.7.

The right approach: :focus-visible. This CSS pseudo-selector, supported by all browsers since March 2022, displays the indicator only when the browser detects keyboard navigation.

button:focus {
  outline: none;
}
 
button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Designers are satisfied. Keyboard users see where they are.

#What the standards require

WCAG criterion 2.4.7 (level AA) requires a visible focus indicator for any keyboard-operable component. RGAA criterion 10.7 mirrors this requirement.

WCAG 2.2 goes further with criterion 2.4.11 (level AA): the focused element must not be hidden by another element. Modals, cookie banners, sticky headers: verify that they don't overlap the active element.

#In summary

Never remove the outline without replacing it. Use :focus-visible for keyboard indicators. And test: press Tab and navigate your page. If you lose track, so will your users.

Back to glossary
Share this article

Learn more

Tabindex

The HTML tabindex attribute controls whether an element can receive keyboard focus and in what order. Three values exist: 0 to include an element in the natural tab order, -1 to make it focusable only via JavaScript, and positive values, which you should never use.

Tab order

Tab order is the sequence in which interactive elements on a page receive focus when the Tab key is pressed. By default, it follows the order of the HTML code. If this order does not match the visual order of the page, keyboard users become disoriented.

Keyboard Navigation

Keyboard navigation refers to the ability to browse and use a web interface using only keyboard keys, without a mouse. It is the primary mode of interaction for people who cannot use a pointing device, and a basic test to verify a website's accessibility.