Role and semantics
Section titled “Role and semantics”Field is built on Base UI Field. The label is bound to the control with <label for>. The help text and error ids are in aria-describedby, help text first. Several errors form a bulleted list.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves focus to the control. The label, help text and counter take no focus. |
Focus sits on the control; Field.Control shows a 2 px color-focus-ring ring. Clicking the label moves focus to the control.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Required field | “Field label, required, edit text, required” |
| Field with two errors | The field name, “invalid”, the help text and both error messages |
| Counter near the limit | “2 characters left” after a pause in typing |
The counter is announced politely through role="status" and stays quiet far from the limit. The visible “8/10” text is hidden.
Contrast
Section titled “Contrast”The label, help text and error text have at least 4.5:1 contrast on the background. The invalid state does not rely on the border colour alone; the error text shows too.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Field meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | <label for> and aria-describedby. |
Give every field a label. |
| 3.3.1 Error identification | aria-invalid and an error in text. |
Show the message next to the field. |
| 3.3.2 Labels or instructions | Visible label and help text. | Give format rules in the help text. |
| 4.1.3 Status messages | The counter has role="status". |
Use the counter only on fields with a limit. |