Every Form Element Has A Label

Overview

Labels clarify the purpose of form elements. Although the purpose of each element may be obvious for sighted users, this is often not the case for users who rely on screen readers.

See Create Amazing Forms for more information.

Recommendations

Below the audit, Lighthouse displays something like 1 element fails this test. The number varies depending on how many elements are failing. Click this label to expand the list. You can find each element in your DOM by running the $(), $$(), and $x() functions from the Chrome DevTools Console.

Associate a label to every form element. There are four ways to do so.

Implicit labels:

<label>First Name <input type="text"/></label>

Explicit labels:

<label for="first">First Name <input type="text" id="first"/></label>

aria-label:

<button class="hamburger-menu" aria-label="menu">...</button>

aria-labelledby:

<span id="foo">Select seat:</span>
<custom-dropdown aria-labelledby="foo">...</custom-dropdown>

More information

This audit is powered by the aXe Accessibility Engine. See Form elements must have labels for more information.

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)