Component Library

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.

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.

https://webaim.org/techniques/forms/