Form <input> elements must have labels

Last updated:

This evaluation is included in the Accessibility audit offered by ExcellentWebCheck. Ensuring website accessibility is essential to ensure everyone can use the internet without barriers.

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'>

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
Was this article helpful?

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.