Every form control always needs to have a visible label, so that the user can know at any time which field is being filled in, even if the autocomplete attribute is used in the HTML code.
An icon can also be a visible label as long as it is labeled appropriately.
Therefore, remember to always bind a label to a form control using the for attribute of the <label> to the id attribute of the form control, which thus receives its accessible name.
<label for="name">Name</label>
<input type="text" id="name" name="name">
In this way we obtain 3 advantages:
- The area to activate the form control is larger, since by clicking on the
<label>the associated form control receives the focus. - When a voice browser gives focus to a form control, it announces its associated
<label>. - A user using voice recognition software can activate the form control by saying the name of the associated
<label>.
A special case is the <input type="button"> that contain a correct value attribute, to which it is better not to associate any label as it can interfere with how some assistive technologies parse the form control. The same goes for <button>.
Top comments (0)