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>



Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page