Input

Communicate required fields to all users.

Use both required and aria-required attributes.

If using visual indicators for required fields, explain them.

Ensure icons enhance rather than hinder accessibility.

Most input icons are decorative and don't need labels.

The icon's purpose is conveyed by the label or context.

If icons are interactive (e.g., password visibility toggle), provide accessible labels.

The native number input's spinner buttons are inconsistent across browsers and can be difficult to target. For precision number entry, pair type="text" with an inputMode hint and custom validation, or use InputWithSelect.

Ensure masked inputs remain accessible.

Masking is compatible with screen readers, which announce the formatted value.

When submitting forms, use raw values for processing.

Ensure integrated select controls are accessible.

Select controls inherit label association from the parent input.

Users can tab between the select and input independently.

Users can:

Communicate non-editable states properly.

Disabled inputs are removed from tab order and announced as disabled.

Read-only inputs remain focusable but not editable.

Implement accessible form validation.

Validate fields after users complete them, not during typing.

Announce form-level errors and move focus to the first error.