Interactive controls are keyboard focusable

Manually check that all custom controls are keyboard focusable and display a focus indicator. The order in which elements are focused should aim to follow the DOM order. If you're unsure which elements should receive focus, see Introduction to Focus.

# How to manually test

To test that the custom control is focusable and displays a focus indicator, start by tabbing through your site. Use TAB (or SHIFT + TAB) to move between controls, and use the arrow keys and ENTER and SPACE to manipulate their values (see also Keyboard access fundamentals):

Are you able to reach all of the interactive controls on the page? Is there a focus indicator on each interactive control?

# How to fix

If you aren't able to tab through all elements on a page, you may need to use tabindex to improve the focusability of those controls.

To make a custom control focusable, insert the custom control element into the natural tab order using tabindex="0" (see also Control focus with tabindex). For example:

<div tabindex="0">Focus me with the TAB key</div>

You may also need to add the appropriate ARIA roles to the custom control elements. See Custom controls have ARIA roles.

If you're not seeing a focus indicator, consider using :focus to always show a focus indicator. Regardless of whether you use a mouse or a keyboard to tab to it, the button's focus indicator always looks the same (see also Style focus).

# Why this matters

For users who either cannot or choose not to use a mouse, keyboard navigation is the primary means of reaching everything on a screen. Good keyboarding experiences depend on a logical tab order and easily discernible focus styles. If a keyboard user can't see what's focused, they have no way of interacting with the page.

Learn more in How to do an Accessibility Review.

# Resources

• Source code for Interactive controls are keyboard focusable audit
• Some elements have a [tabindex] value greater than 0
• Use semantic HTML for easy keyboard wins