1. Getting Started
  2. Installation: Preline UI


Custom controls have associated labels

Associating labels with custom controls is necessary to provide meaningful context and functionality to users who rely on screen readers or other assistive technologies, ensuring they can navigate and use the website's interactive elements without barriers.

Custom interactive controls should be focusable. If you use JavaScript to turn a <div> into a fancy dropdown, it won't automatically be inserted into the tab order. You need to manually check that all custom controls are keyboard focusable.

How to manually test

To test that the custom control is focusable, press the TAB key to navigate through the site and verify the elements that become focused.

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

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" class="focusable">  Focus me with the TAB key
<div tabindex="0" class="focusable">  Focus me with the TAB key

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 discernable focus styles. If a keyboard user can't see what's focused, they have no way of interacting with the page.