Associate text labels with form controls using the LABEL element
Make sure text labels are associated with their form controls using the LABEL element
Forms are often viewed as the most important components when it comes to interacting with a page. When one throws accessibility in the mix, they are also the ones who provide the greatest challenges to users with disabilities. When a user is unable to determine the purpose of a form control because a text label has not been properly assigned to it, errors can easily ensue. To make forms accessible, authors need to programmatically bind each form control (or group of form controls) with a text label.
To do so, simply assign a unique ID attribute value to each form control and after having wrapped the corresponding text labels inside LABEL elements, provide these LABEL elements with distinctive FOR attribute values, making sure those values are identical to the values of the form control they are associated with. Doing so will automatically attach elements that share the same value together, allowing assistive technologies to convey that relationship back to the user.
User Story
As a user using assistive technology, I want every form control encountered in a page to be [...]