See plans and pricing

Every text box, checkbox, and radio button on your site needs a programmatically connected label so screen reader users know what information to enter. A label that only appears visually next to a field, without being technically linked to it, is invisible to assistive technology.

How to fix it

1. Locate the <input>, <select>, or <textarea> element that has no associated label.
2. Add a <label> element with a "for" attribute matching the input's id, e.g. <label for="email">Email address</label> paired with <input id="email">.
3. Alternatively, wrap the input inside the label element itself: <label>Email address <input type="email"></label>.
4. If a visible label isn't appropriate (e.g. a search box marked only with a magnifying-glass icon), add an aria-label attribute directly on the input, e.g. aria-label="Search".
5. Make sure every id used in a "for" attribute is unique on the page, and remove any duplicate or unused label elements.

First name: <input type="text" name="fname">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

View the full rule reference from Deque University

See plans and pricing