Inline Error Notifications Using ARIA Describedby and Live Regions

When validation runs, fields are marked as aria-invalid if they don't have any text contents. All fields are marked as aria-required. For “validation” all we are doing is checking of there are characters in the fields — yeah, not very sophisticated.

Depending on settings at the bottom, an ARIA alert or live region set to polite is used as a notification to screen readers. The ARIA live notification/alert is only in the DOM for 2 seconds. (Note: the alert/notification text shows at the bottom but could also be set to be hidden accessible text. Using role="alert" should be the equivalent of using aria-live="assertive".)

In the first group of two fields, the alert, along with an aria-describedby adjacent to the field is populated when focus blurs from a field. In the second group, the same thing happens, but only when the fields are focused.

placeholder link

Error on Blur

Error on Focus