Field Accessibility

Best Practices

The field component provides layout only. It does not automatically associate labels, descriptions, or errors with a control. Applications must provide those relationships.

Every field must have a visible label whose for value matches the control ID. Group related fields with a fieldset and legend when the group label provides necessary context.

Prefer a native label with matching for and control ID. When a native label cannot be used, associate visible text with aria-labelledby . Use aria-label only when no visible label is available. Do not use aria-label to replace or override an associated visible label.

Supporting and error text must have an ID referenced by the control's aria-describedby . When more than one description applies, include each ID separated by a space. Use native disabled and readonly attributes, and do not communicate state through styling alone.

Interaction Design

Keyboard

TAB moves focus through enabled field controls in DOM order. The field layout does not add tab stops.

Screen Reader

A screen reader announces the label, control role, value, instructions, and applicable required, invalid, disabled, or readonly state.

Pointer

Clicking or tapping a label moves focus to its associated control.

ARIA Reference

Further Reading

• Textbox
• Form Validation