govau / design-system-starter

🚀 The Australian Government Design System - Starter

Home Page:https://design-system-starter.apps.b.cld.gov.au/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Update validation on form page

sukhrajghuman opened this issue · comments

commented

HTML5 validation is not accessible and isn't well supported in older browsers.

Some ideas from a11y catchup

  • on submit, if there are validation errors, error labels appear between <input> and <label> for that input
  • page-alert appears, focus is shifted to this page-alert, which contains a list of errors on the form.
  • the page alert contains a list of form inputs that are invalid, with links to each of these

The quickest win is to list the errors in the page alert and anchor them to the inputs below. This will require some custom javascript.

In the future we need to release more form components to make sure developers building forms have robust accessible experiences. Inline form errors have been brought up multiple times and there is a topic already on the community. I know @TrebBrennan built some mockups of these as well.