Label

Accessible labels ensure all users can understand and interact with form controls effectively. When using Label, follow these best practices.

Ensure labels are properly associated with their form controls for screen readers and assistive technologies.

Always use htmlFor to link labels to input fields explicitly.

Screen readers announce the label when the input receives focus, providing essential context for users.

Associated labels expand the clickable area of form controls, improving usability for all users.

Users can click anywhere on the label text to activate the checkbox, making the interface more accessible.

When a single control needs multiple labels (e.g., a visual label and a screen-reader-only label), use aria-labelledby on the control.

Labels enhance keyboard navigation by expanding the interactive area of form controls.

Clicking a label focuses its associated control, allowing keyboard users to activate labels via their controls.

Labels themselves are not focusable; focus moves to their associated controls in the tab order.

Users tab between inputs, and screen readers announce both the label and the input state.

Label works with ARIA attributes to provide additional context to assistive technologies.

When labels need to reference other elements or be referenced by controls, use aria-labelledby.

For visually hidden labels (e.g., in cases where the visual design doesn't accommodate a visible label), ensure the label is still accessible to screen readers.

Provide both a hidden label and an aria-label as a fallback for comprehensive screen reader support.

Use color variants and proper labeling to communicate validation errors accessibly.

Associate error labels with invalid inputs using color and ARIA attributes.

Screen readers announce the error state along with the label, providing clear feedback to users.

Ensure error messages are properly associated with their inputs.

Communicate disabled states properly to assistive technologies.

Disabled labels reflect the state of their associated controls.

Screen readers announce both the label and the disabled state of the control.

Indicate required fields clearly for all users.

Use both visual indicators and semantic attributes.

Maintain consistent patterns for indicating required fields across forms.

Test labels with screen readers to ensure proper announcements.

Expected announcement: "Email Address, required, edit text, name@example.com"

Expected announcement: "Username, invalid data, edit text, Username is already taken"

Ensure labels maintain sufficient contrast for visibility.

Label colors meet WCAG AA contrast requirements on standard backgrounds.

Disabled labels maintain readability while clearly indicating their inactive state.

Ensure inline labels remain accessible when used in compact layouts.

Inline labels work correctly with screen readers, maintaining proper association.

Screen readers announce the label and input relationship correctly, regardless of layout.

Ensure inline layouts maintain adequate touch target sizes for mobile users.

The combined label and control provide a larger touch target, improving mobile usability.