-
Type: Bug
-
Status: Resolved
-
Priority: Critical
-
Resolution: Fixed
-
Affects Version/s: 3.0.5
-
Component/s: A11y
-
Tags:
-
Sprint:UI COOLDOWN - 2023-2
Related to WCAG level A criteria 1.3.1: info and relationships
In the context of a search form, e.g. with the default search fulltext input
Source Code
<input autocomplete="off" placeholder=" " readonly="" autocapitalize="none" autocorrect="off" aria-describedby="" aria-labelledby="paper-input-label-94" type="text" role="button" aria-haspopup="listbox">
Description
The form control is not correctly associated with its visible label either explicitly or implicitly.
Recommendation to fix
RULE :
Labels MUST be programmatically associated with their corresponding elements.
HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1. Explicit label: Under most circumstances, the best technique is to use the <label> element with the for attribute. The value of the for attribute is the id attribute value of the <input> element.
<label for="fname">First Name:</label>
<input type="text" name="fn" id="fname">
2. Use an aria-label attribute or title attribute on the <input> to provide a label when there is no visible label.
<input type="text" aria-label="search"> <input type="submit" value="Search">
3. Use an aria-labelledby attribute on the <input> to reference a visible label. The value of the aria-labelledby attribute is the id attribute value of the visible text label.
<span id="nickname">Nickname:</span> <input type="text" aria-labelledby="nickname">
4. Implicit label (explicit label method is strongly preferred): Wrap the form element within the <label> element.
<label>First Name: <input type="text" name="fn"></label>