Form <input> elements must have labels

How to fix the problem?

<input> elements need a label to make a form accessible. Screen readers use the label to announce the input field.

Use one of the following solutions:

Option 1: Label element (most common option)

<label for="first-name">First name: </label> 
<input id='first-name' type='text'>

Note: the for attribute contains the id of the <input> field!

Option 2: Wrap the input in a label element

<label>First name: 
    <input type='text'>
</label>

Option 3: Use aria-label

<input aria-label="First name" type='text'>

Option 4: Use aria-labelledby

<p id="first-name">First name:</p>
<input aria-labelledby="first-name" type='text'>

There are a few exceptions where no (explicit) label is needed:

• Buttons: <button> elements with visible text are self-labeling
• Hidden inputs: use type="hidden" on the input

Why is this important?

Screen reader users rely on labels to understand what each form field is asking for. Without a visible or programmatic label, a user navigating by tab key hears only the input type (for example “edit field”) with no context about what to enter.

Labels also benefit users with cognitive disabilities by making the purpose of each field explicit. Clickable labels additionally increase the tap and click target size on mobile devices.