Skip to content
Learn Measure Blog Case studies About
On this page
  • How to manually test
  • How to fix
  • Why this matters
  • Resources

Custom controls have associated labels

May 2, 2019 — Updated Sep 19, 2019
Appears in: Accessibility audits
On this page
  • How to manually test
  • How to fix
  • Why this matters
  • Resources

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. See also Keyboard access fundamentals.

How to manually 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 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.

Learn more in How to do an Accessibility Review.

Resources #

  • Source code for Custom controls have associated labels audit
  • Some elements have a [tabindex] value greater than 0
Last updated: Sep 19, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.