Accessible labels ensure all users can understand and interact with form controls effectively. When using Label, follow these best practices.
Label Association
Ensure labels are properly associated with their form controls for screen readers and assistive technologies.
Explicit Association
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.
Clickable Labels
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.
Multiple Labels
When a single control needs multiple labels (e.g., a visual label and a screen-reader-only label), use aria-labelledby on the control.
Keyboard Support
Labels enhance keyboard navigation by expanding the interactive area of form controls.
Focus Management
Clicking a label focuses its associated control, allowing keyboard users to activate labels via their controls.
Tab Order
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.
ARIA Attributes
Label works with ARIA attributes to provide additional context to assistive technologies.
aria-labelledby
When labels need to reference other elements or be referenced by controls, use aria-labelledby.
Hidden Labels
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.
Error Communication
Use color variants and proper labeling to communicate validation errors accessibly.
Error Labels
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.
Error Messages
Ensure error messages are properly associated with their inputs.
Disabled States
Communicate disabled states properly to assistive technologies.
Disabled Labels
Disabled labels reflect the state of their associated controls.
Screen readers announce both the label and the disabled state of the control.
Required Fields
Indicate required fields clearly for all users.
Visual and Semantic Indicators
Use both visual indicators and semantic attributes.
Consistent Patterns
Maintain consistent patterns for indicating required fields across forms.
Screen Reader Testing
Test labels with screen readers to ensure proper announcements.