2
A11y tips: bind label and form controls
source link: https://dev.to/carlosespada/a11y-tips-bind-label-and-form-controls-261f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A11y tips (5 Part Series)
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">
Enter fullscreen mode
Exit fullscreen mode
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>.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK