Q11 of 24 · Accessibility

How do you test form accessibility including labels, validation, and error messaging?

AccessibilityMidaccessibilityformslabelserror-messagesariawcagtesting

Short answer

Short answer: Every input needs a programmatic label (not just a placeholder). Submit the form with invalid data and verify error messages are programmatically associated with the failing field (via aria-describedby or focus movement), announced by screen readers, and identify which field failed and why.

Detail

Label association: each input must have a visible label programmatically associated with it via <label for="id">, wrapping <label>, or aria-labelledby. Test by clicking the label text — if focus moves to the input, the association is correct. In the DevTools Accessibility pane, the Name field should show the label text.

Required field indication: indicate required fields visually (asterisk or "required" text) and programmatically (aria-required="true" or the native required attribute). Screen readers should announce "required" when focus enters the field.

Error messaging — the three requirements:

  1. Identification: the error message must identify which specific field failed — not just "form has errors".
  2. Description: the message must describe what's wrong and how to fix it ("Email address must include an @ symbol" is better than "Invalid email").
  3. Programmatic association: the error message must be linked to the failing field via aria-describedby (so the message is announced when the field receives focus) or focus must be moved directly to the error message (a live region or focus-managed heading).

Testing process: (1) Tab to each field, verify the label is announced. (2) Submit without filling in required fields — verify error messages appear and are announced (listen with a screen reader). (3) Tab back to a field with an error — verify the error is associated and announced. (4) Correct a field and re-submit — verify the error disappears and is no longer announced.

// EXAMPLE

form-error.html

<label for="email">Email address <span aria-hidden="true">*</span>
  <span class="sr-only">(required)</span>
</label>
<input
  id="email"
  type="email"
  aria-required="true"
  aria-describedby="email-error"
  aria-invalid="true"
/>
<span id="email-error" role="alert">
  Enter a valid email address, for example name@example.com
</span>

// WHAT INTERVIEWERS LOOK FOR

Covers label association, required field indication, and the three error message requirements. Describes testing with a screen reader, not just visual inspection.