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'>
for attribute contains the id of the
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
Free Website Accessibility Audit
We are sorry to hear that you are not satisfied with the content on this page.
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.