For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
A best practice is to have the text of the label at the start of the name.
A label is the adjacent content that provides the instruction to fill in an input or select an option. As specified in the glossary of WCAG, label is expected to be visible always adjacent to the form control.
For screen reading technologies to identify the label a programmatic association is required. In certain cases the programmatic association is provided through ‘for’ and ‘id’ relationship or any other similar associating techniques. When the programmatic association is neither available nor possible an accessible name can be assigned.
The success criterion 2.5.3 Label in Name speaks about the wording to be used in these accessible names. The expectation is to match the visual label and the accessible name. The accessible name is something picked by speech recognition or a screen reading software.
Best practices to meet 2.5.3 Label in Name
- Programmatically associate the visual label with the form control. In this case no additional accessible name is required.
- Placeholder can be considered as accessible name as the speech recognition user may speak out the placeholder content to interact with the control.
- Use title, aria-label or aria-labelledby as part of accessible name.
- If aria-label or aria-labelledby is used as accessible name take care that it is matched with the visual label completely or the important terms in the label are in the beginning of the accessible name.
- Aria-label or aria-labelledby should be used with at most care, these methods over write the default programmatic association of the label for screen reader users.
- When an accessible name is used make sure the terms / words used in it match with the visual label. The user speaks out the visual label, but the speech recognition software connects to the accessible name when the visual label is not associated programmatically.
- When symbols represent the visual label the actual meaning conveyed in symbol should be the accessible name. For example, a > symbol denotes next or play. So the accessible name must be the word in human language i.e. next or play, not the literal meaning of symbol.
- The Punctuation and capitalization used in labels such as ‘:’ at the end of the label (First Name😊, > after the label next (next>) can be ignored while providing accessible name. Similarly capitalizing first letter in the labels will not have any effect in the success criterion 2.5.3 Label in Name. This means when the user speaks First Name: or first name using the speech recognition software will have same effect.
- Mathematical expressions have a specific meaning unlike punctuations. A human readable text must be provided while labelling the mathematical
Who benefits with 2.5.3 Label in Name?
- People who rely on speech recognition software are the primary beneficiaries of this WCAG 2.1 requirement.
- People who use screen reading software also benefit specifically when the visual labels are programmatically associated.
- People who have cognitive challenges benefit with the labels in name.
You may also like