Custom interactive controls should be focusable. For example, if you use
JavaScript to turn a <div> into a fancy drop-down, that drop-down isn't
automatically inserted into the correct tab order.
You need to manually check that all custom controls are keyboard focusable.
When possible, use semantic HTML elements that allow for interaction.
How to test
To test that the custom control is focusable,
press the TAB key to navigate through the site:
Are you able to reach all of the interactive controls on the page?
If not, you may need to use tabindex to improve the focusability of those controls.
See also Control focus with tabindex.
How to fix
To make a custom control focusable, insert the custom control element into the
natural tab order using tabindex="0".
For example:
<div tabindex="0">Focus me with the TAB key</div>
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 keyboard experiences depend on a logical tab order and discernible focus styles. If a keyboard user can't see what's focused, they have no way of interacting with the page.
If you're new to accessibility testing, we recommend learning about manual accessibility testing and Assistive Technology testing.