Using ARIA-Live in Form Validation

Example form fields use, variously, blur and keyup events to trigger inline validation messages. Clicking submit will focus the first field with an error and announce via ARIA-live how many errors are on the page (if you have that option set from the second select control, below).

Input descriptions are set to be ARIA-hidden. Error validation descriptions are also set to be ARIA-hidden (unless there is an ARIA-live property set on them — then they cannot be marked hidden if we want the ARIA-live to be announced). All fields are set to be ARIA-required. Fields that fail validation are set to ARIA-invalid.

The controls below allows for switching between notification modes using ARIA-live and setting the time-to-live for these messages.

Settings for Live Announcements

ARIA Mode for Field Validation
ARIA-Live Field Level Global Time to Live (in Seconds)

ARIA Mode for On-Submit Validation
ARIA-Live On-Submit Time to Live (in Seconds)

Delay Before On-Submit Live Region is Populated (in Seconds)

Visible Live Regions

(Typically, we would visually hide these....)

Global field error notification:

On-Submit validation notification:

Example Form Fields with Blur or Keyup and Submit Validation

Field One Which Validates on Blur

Field Two Which Validates on Blur

Field Three Which Validates on Blur

Field Four Which Validates on Keyup

Field Five Which Validates on Blur