What accessibility standards (Form Accessibility - a11y) should web forms follow?

Short answer

Associate each input with an explicit <label> through htmlFor and id, set aria-invalid and aria-describedby for errors, and support keyboard navigation and automatic focus.

Explanation

Screen readers cannot identify an input's purpose if developers rely only on its placeholder instead of a label. When there is an error, set aria-invalid="true" and link the input to the error message's ID with aria-describedby so screen readers announce it when focus moves there. Move focus to the first invalid field when submission is attempted.

Code example

<div>
  <label htmlFor="user-email">Email:</label>
  <input
    id="user-email"
    type="email"
    aria-invalid={Boolean(errors.email)}
    aria-describedby={errors.email ? "email-error" : undefined}
  />
  {errors.email && <p id="email-error" role="alert">{errors.email.message}</p>}
</div>

Common mistakes

• Relying only on a red field to indicate an error without explanatory text or accessibility attributes.

Follow-up questions

• How do you manage Dynamic Field Arrays whose number of fields changes in a form?

Sources

• W3C WAI — Forms Tutorial