How To Fix "label-has-associated-control" error
Last updated:
<label> element must be associated with a control element such as <input /> . Failure to do so will result in a lint error message stating that "A form label must be associated with a control".How to fix the label-has-associated-control Eslint error?
You can connect fix the issue in these 2 ways:
- Solution 1: Fix jsx-a11y/label-has-associated-control by connecting via id:
<label htmlFor="username-input">Username</label> <input id="username-input" name="login-username" type="text" /> - Solution 2: Wrapping the label around the element:
<label>Username <input name="login-username" type="text" /> </label>
You need to connect a <label> element to one of the following elements:
<input><select><textarea><fieldset>
Check Accessibility of your website
Why is it important to have a label attached to a control element?
It is important to give the user a clue about what value is expected for the given control element.
Assistive technologies need the <label> to let the user know what the expected input is for the form field.
To assist users with visual impairments in completing an online form, establish a connection between a control element and a corresponding label element by using one of the 2 techniques.
For more info see:
- Use the Accessibility Checker to verify that your website complies with applicable accessibility legislation.
- The official eslint-plugin-jsx-a11y documentation
As the founder of ExcellentWebCheck, I'm very passionate about accessibility and ensuring equal access to information and services online. With the current speed of digitalization, it is crucial to make sure that everyone has access to important goods and services such as healthcare, financial services, education, and government resources, regardless of their abilities. By advocating for inclusive design principles and leveraging cutting-edge technologies, we aim to create digital environments that are not only compliant with accessibility standards but also intuitive and user-friendly for all individuals.