Custom Controls Labels

In your web pages, you should make custom interactive controls focusable.

Accessibility

Associated Labels

In your web pages, you should make custom interactive controls focusable. For example, if you turn a <div> into a dropdown using JavaScript, this action will not be included in the tab order by default: you must do a manual check to see if all custom controls are keyboard focusable.

How can I test and possibly solve the problem?

Simply press the TAB key: in this way you can navigate through the page and you can check if it's possible or not to reach the interactive controls.

If it's not possible, you should improve the focusability using tabindex.

The custom control element has to be inserted into the natural tab order using tabindex=”0”.

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