Form Fields

How it works

Every input is built using its native HTML element such as label, fieldset, legend, select and the type attribute. WAI-ARIA it is used to enrich the accessibility of these elements such as aria-describedby linking to a hint or an error to its field.

Required fields use one convention. The asterisk is aria-hidden, because unhidden most screen readers read it as “asterisk”. The word “required” is announced from the native required attribute.

Field by field

• Select: a native select tag.
• Text: autocomplete is per field (given-name, family-name), spellcheck="false" for a name, and maxlength is enforced by the browser.
• Phone number: type="tel".
• Password: a button with type="button" and aria-pressed toggles the input type. autocomplete="new-password".
• Date: type="date" hands the picker and the locale format to the browser.
• File attachments: the label and input type="file", and drag and drop is an enhancement.
• Checkboxes: a group that has a fieldset and legend and and one tab stop per checkbox. The checkbox is just input and label.
• Radio group: a group that has a fieldset and a legend. It is required means at least one is checked, and the error is described once and shared through aria-describedby.
• Switch: role="switch" on a real checkbox, so its checked state is the state.

Validation

• aria-invalid is always present, “true” or “false”, never omitted when valid.
• aria-describedby points at the same paragraph whether the field is valid or not.
• The red border comes from [aria-invalid="true"].
• Only the error summary has role="alert".

Avoid

• A div styled like a select.
• A placeholder doing a label's job.
• type="number" on a phone number or a card number.
• role="alert" on every field's error at once.
• A required group's error duplicated in every option's aria-describedby.
• display: none on a disabled file input.

WCAG 2.2

• 1.3.1 Info and Relationships (A)
• 1.3.5 Identify Input Purpose (AA)
• 1.4.3 Contrast (AA)
• 1.4.11 Non-text Contrast (AA)
• 2.1.1 Keyboard (A)
• 2.4.3 Focus Order (A)
• 2.4.7 Focus Visible (AA)
• 2.5.8 Target Size, Minimum (AA)