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

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