Accessibility Guidelines
Forms and buttons are properly labelled
When creating forms in web content, authors often describe the expected input for a form field in a text label, typically located just before or above the field. In some cases, however, the text positioned next to a form field becomes disconnected if the screen size or orientation changes.
To ensure that labels are always available to describe a form field, web content authors should use the <label> element to explicitly associate the descriptive text with a field. This ensures that regardless of where the label might appear on the screen, it will always describe the expected input when a screen reader encounters its associated form field.
Using the <label> element also makes it possible to click the label to bring focus to its associated form field. It provides a larger target area to click for those people who may have trouble targeting a tiny form element with a mouse pointer, like a checkbox or a radio button.
The following is an example of HTML that explicitly associates a text label with a form field. Note the value for the “for” attribute with the label markup matches the value for the “id” attribute with the text input markup. That match is what creates the explicit association. No matter where the label appears, a screen reader will always read “First Name” from the label when it encounters the “firstname” text field.
Technical Details: Explicit labels for form fields
<label for=”firstname”>First Name</label>
<input type=”text” id=”firstname” value=””/>
In the Accessibility Maze you would have experienced the importance of proper labels in Level 2. Without the plate that shows the connection between the letters, here used as labels, and the buttons used to enter the combination that opens the door, it can be very difficult to figure out which buttons are associated with which letters. There are 24 potential combinations.
