Provide input fields with clear labels and instructions
Provide labels for input fields
Labels are the most important element for an accessible form. Provide labels for all input fields or other form elements such as checkboxes, radio buttons, and comboboxes. A clear label describes exactly what needs to be entered in the field, is visible to all visitors and is located close to the input field.
The label must be linked in the code to the input field. This way you also make the input field accessible to visitors who use assistive technology. The label is the name of the input field. A label also expands the clickable area from which an input field can be selected. This is useful to visitors with a motor impairment.
Link labels in the code to an input field
Labels are placed with the <label> element. To link a <label> element to a form element use a for/id link. To do so, give the <label> element a for attribute and the corresponding form element an id attribute with the same value.
It looks like this in the code:
There are also ways to visually hide the labels. In that case, ask yourself carefully why you would want to do that. This way the input field will lose the larger clickable area and it may become less obvious to visitors. However, if the label is visually hidden, make sure that a label is still available for assistive technology. To achieve this, use the aria-label, aria-labelledby or a title attribute, which are not visible.
It looks like this in the code:
Note: Placeholder text should not be used as the only way to add a label to an input field.
Group multiple sections of related input fields
If a form has multiple sections of related input fields, then a <fieldset> element is used to group them together. Give the <fieldset> element a label by placing a <legend> element inside the <fieldset> element. Assistive technologies use the <legend> element as if it were a part of the label of the elements in the <fieldset>.
The <fieldset> element is especially relevant for grouping checkboxes and comboboxes, but can also be used to group other input fields.
It looks like this in the code:
Provide instructions for input fields
Instructions give an extra hint for the input field. The instructions in a form should indicate whether there are required fields and possibly whether there is a required input format.
Indicate that an input field is required
You can indicate a mandatory input field in text or, for example, with an asterisk (*). Make sure this tag is placed inside the <label> element.
It looks like this in the code:
If the instructions are not clearly named for each input field, it should be indicated in text before the first input field how the mandatory fields are indicated.
It looks like this in the code:
Mark the required fields in the code as well. Preferably use the aria-required attribute.
Indicate if there is a required input format
Also for required input formats, such as a postal code or an e-mail address, the instructions must describe what the requirements for the input are. This can be done directly in the <label> element.
It looks like this in the code:
This can also be done with the aria-describedby attribute.
It looks like this in the code: