Component Library
Labels - Text or Images
Issue Description
A form control (text entry field, radio button, checkbox) is missing a unique <label> attribute or otherwise is unable to be identified with assistive technology.
- Missing form labels or instructions can cause confusion when user input is required. Form controls that do not have visible labels make determining what they are called a guessing game with screen readers and voice recognition.
- People who use assistive technologies like voice-dictation software will not be able to refer to an element (such as a button) by name. Users of assistive technology, such as screen readers, will not have any information about this button's purpose, forcing them to guess.
- Form labels do not precede the elements that they describe, nor do the "for" and "id" attributes match the elements they describe.
- When an element contains both heading and link attributes, it can create confusion and causes operability and navigation issues for screen reader and keyboard-only users.
- Multiple identical form labels are present, unable to differentiate between them.
Recommendation
Give all form controls clean, concise, visible <label> text. This helps users understand the type of expected interaction and the information required in form fields.
- Form controls should have unique, visible labels, and should be implemented using native HTML for style and assistive technology access whenever possible.
- Avoid using symbols or special characters in form labels, this makes voice control difficult, as well as inconsistently announced across various assistive technology.
- Form labels should precede the elements which they describe and provide context, and require unique, matching <for> and <id> attributes, not relying on page content for context. They also can contain the elements they describe, which precludes the need for <for> and <id> attributes.
- Add an <aria-label> to elements that are otherwise identical to assistive technology to clarify the differences between identical links.
- If an element contains both heading and link attributes, remove the heading markup.