Ensure all form and custom controls have labels that clearly describe their purpose.
Provide labels for individual controls. [WCAG 4.1.2]
- Using label elements to associate text labels with form controls
- Using aria-labelledby to provide a name for user interface controls
- Using aria-labelledby to concatenate a label from several text nodes
- Using aria-label to provide an invisible label where a visible label cannot be used
- Using the aria-describedby property to provide a descriptive label for user interface controls
Provide labels for groups of controls. [WCAG 4.1.2]
Providing an accessible name for form and custom scripted controls is essential for ensuring that users can understand their purpose. Assistive technologies compute the name for each control when a label is provided allowing users to quickly discover the purpose of each.
Due to the way that forms are laid out, however, users often reach input fields before the labels that describes them, or the labels may occur well before the field. If a label is not provided, the experience of interacting with dynamic content or filling out a form can be confusing.
HTML provides two native elements for associating labels with controls:
labelelement is used to identify the accessible name for an individual control. It can either be wrapped around the control and its label (see Example 1) or a
forattribute can be added that references the ID of the control (see Example 1).
fieldsetelement is used to group sets of related controls. A label can then be provided in a child
legendelement (see Example 3).
There are two drawbacks to these native methods: one is that they only accept a single label and the
other is that the labels must be a visible part of the page and the text can be capture by the
label element. The following ARIA attributes help solve these more complex cases:
aria-labelledbyattribute can be used to reference multiple elements. It is useful when more than one piece of information is necessary to give full context to a control (see Example 5). It can also be used to identify the label when it is not possible to use a
labelelement (see Example 4).
aria-labelattribute can be used when it is not possible to include a label by any other means (see Example 6). The value of the attribute is the label for the control.