Label

Use Label together with form control elements like input, select, checkbox, etc.

Examples

Key	Function
`Tab`	Moves focus to the next interactive element.
`Shift + Tab`	Moves focus to the previous interactive element.
`Enter`,`Space`	Activates the associated input when a label is used with interactive elements.
`Esc`	Closes any related tooltip or popover if applicable.

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Use the for attribute to explicitly associate the label with an input field.
Ensure every input field has a corresponding label for better accessibility.
For decorative labels or those without an interactive element, add aria-hidden="true" if needed.
Use aria-labelledby when multiple elements need to share the same label.
When providing additional descriptions, use aria-describedby to associate extra guidance.
Labels should remain visible and not rely on placeholder text, as placeholders disappear when users start typing.
Ensure that any icons or visual indicators used within labels have accessible text alternatives via aria-label or title attributes.
For labels with an info icon and popover:
- Ensure the info icon is keyboard accessible.
- Use aria-describedby on the input to associate it with the popover.
- The popover should be dismissible with Esc and return focus to the info icon after closing.
- Use role="tooltip" or role="dialog" depending on the popover content.

Labels should be concise yet descriptive to clarify form inputs.
Maintain a consistent placement of labels (above or beside inputs) for usability.
Ensure adequate color contrast between labels and the background, maintaining a minimum 4.5:1 ratio as per WCAG guidelines.
Labels should not rely on color alone to convey meaning.
Provide adequate spacing between labels and inputs to improve readability.
If using floating labels, ensure they remain legible at all times and do not obscure the input field.
For labels with an info icon and popover:
The info icon should have a minimum target size of 44x44px (WCAG 2.5.5).
Popovers should be positioned near the label and should not obstruct form inputs.
The popover content should be short and easy to scan.
Consider using a fade-in animation to make the appearance of the popover more noticeable.

Explore live examples in the ARIA Practices Guide.

MDN Label Documentation: Learn more about correct label implementation in HTML.
W3C Label Techniques: Implementation best practices for accessible labels in WCAG.
WAI-ARIA Tooltip Example: Best practices for popovers and tooltips.

Find additional accessibility tips in our Accessibility Guide.

Non-text Content: Ensure all badges conveying information have a text alternative. (Level A)
Info and Relationships: Maintain semantic structure for screen readers. (Level A)
Headings and Labels: Ensure badges have meaningful labels. (Level AA)
Labels or Instructions: Provide clear instructions for dismissible badges. (Level A)
Name, Role, Value: Define ARIA attributes correctly for badges. (Level A)