< Back to Demos | Learn more at PaulJAdam.com >

Form Error Top and Inline

Explanation of Validation Technique

  1. User submits form with invalid values.
    1. aria-required=true was present on required inputs.
  2. Error appears at top of form explaining the number of errors.
    1. Top error message is wrapped inside a parent role="status" container element. Polite ARIA Live Region is required because an Assertive Alert would interrupt screen reader announcement of invalid form input which gets focus.
  3. Inline error messages displayed for invalid inputs.
    1. aria-invalid=true and aria-describedby id references set on invalid inputs.
  4. Focus set to first invalid input.

Create Issue

All fields marked with an asterisk (*) are required.