Accessible fields ensure all users can enter and edit text. Field supplies the label. Input is the bare control and needs a label from Field or from an external Label.
Labels and Identification
Ensure inputs are properly labeled for screen readers and assistive technologies.
Visible Labels
Always provide visible labels associated with input fields. aria-label-only is a fallback when space is truly gone.
Screen readers announce the label when the input receives focus, providing essential context.
Placeholder text is not a label substitute—it disappears on focus and users with short-term memory or cognitive differences lose the context.
Correct type
Use the correct type so mobile keyboards and autocomplete behave correctly.
Set autoComplete per field (email, given-name, one-time-code, off) so browsers and password managers offer the right suggestions.
Label Association
Labels are automatically associated with inputs through the htmlFor and id attributes.
Keyboard Support
Ensure inputs are fully keyboard accessible.
Focus Management
Inputs participate in normal tab order and display focus indicators.
Users can:
Navigate to inputs using Tab and Shift+Tab
Type directly into focused inputs
Clear inputs using Backspace or Delete
Select all text using Ctrl+A (or Cmd+A on Mac)
Submit the surrounding form with Enter (when applicable)
Lead and tail slots are not focusable unless they contain interactive controls (like a Select or Button).
Keyboard Shortcuts
Standard text input keyboard shortcuts are supported.
Helper Text and Descriptions
Associate helper text with inputs for screen reader users.
aria-describedby
Helper text is automatically associated through aria-describedby.
Screen readers announce the helper text after the label, providing important context before users begin typing.
Format hints (MM/DD/YYYY), constraints (Min 8 characters), and expected examples belong in helperText—not in the placeholder.