Update validation on form page
sukhrajghuman opened this issue · comments
Raj 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
Alex Page commented
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.