Labels or instructions are provided when content requires user input. (Level A)
Description
The web pages that contain form inputs should have labels. Labels help users to fill the correct information in the form field or select the correct option from the field. Associating the form fields with their labels allow users with motor controls with larger clickable area. Label association also helps screen reader users in announcing label text when focused onto the field. Providing the labels in close proximity with their fields help users who use screen magnifiers to capture both the label and field in the same magnifying area.
Titles, aria-label or placeholders cannot be considered as alternates to labels unless they are supplemented with a visual alternate of label. Cases where designs cannot be changed to incorporate visual label these alternates can be provided. The reasons for not using these attributes as sole means of labeling form elements are as follows.
- Title will not be visible as a tooltip in all the user agents. Hence users who use browsers that don’t display tooltips will not know what has to be filled in the fields.
- aria-label is only for screen reader users. The rest of the user groups will not be able to receive information if visible labels or any other means are not supplemented.
- Placeholders typically will be replaced with actual content when filled. People with mental challenges who want to go back and verify the information before submission fail to refer the entered information with the labels.
In addition to labels in certain cases it is important to provide instructions for filling form fields. Providing instructions help users with cognitive difficulties in filling the fields easily and comfortably. Providing additional instructions help any other users in avoiding mistakes and in failed form submission. Along with the labels even the instructions also should be associated with their corresponding fields so that they are read aloud when navigated with screen reader. Instructions that can be provided for form field include but not limited to formats, examples, identification of the information that need to be filled and informing required fields.
Instructions can be provided along with the form or can be displayed and announced when the user focus on to the field. Take care that lengthy information is not provided as instructions. It may cause confusion to some user groups. Also providing sensory characteristics should not be the sole means of providing instructions.
A label tag is used to provide label to the form element. The labels can be explicit or implicit. In general labels are explicit and are placed before the form element. For radio buttons and checkboxes the label is placed after the form element. “For†and “Id†attributes help in associating labels with their form elements.
In certain cases a group level label might be required. EG male and female can be the labels for a radio button and a group level label might be required in this case Gender. A legend can be provided as group level label along with the fieldset.
Have a look at the article form elements and accessibility to understand how to provide labels and ways to associate them.
W3C Techniques for WCAG 2.0 3.3.2
- G131: Providing descriptive labels AND one of the following(general)
- ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls (ARIA)
- ARIA9: Using aria-labelledby to concatenate a label from several text nodes (ARIA)
- ARIA17: Using grouping roles to identify related form controls (ARIA)
- G89: Providing expected data format and example(general)
- G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input(general)
- G162: Positioning labels to maximize predictability of relationships(general)
- G83: Providing text descriptions to identify required fields that were not completed(general)
- H90: Indicating required form controls using label or legend (HTML)
- H44: Using label elements to associate text labels with form controls (HTML)
- H71: Providing a description for groups of form controls using fieldset and legend elements (HTML)
- H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)