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.