Label for attribute

The label attribute is extremely important for accessibility reasons. It links a label to an input which allows the correct definition of what is required from the user. Without this link, a screen reader has no way of knowing what piece of text is related to which inputs. The following example shows how to link a for attribute of a label, to an id attribute of an input.

<form> <div> <label for="first-name">First name</label> <input type="text" name="first-name" id="first-name" /> </div> </form>

A second reason to use the label for attribute is it allows a user to click on the label and the cursor moves into the corresponding input. This can be used on inputs and text areas. If it is used with radio buttons and checkboxes and the input will become selected which allows users to click on their choices more easily. The following example shows a group of radio buttons and a checkbox. Try clicking on the label.

The label for attribute should be used in every form that you create and it should link to the id attribute of the corresponding input.