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: buttons are self-labeling
• Hidden inputs: use type="hidden" on the input