WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus order vs Error message

for

From: glen walker
Date: Oct 23, 2021 9:41AM

Some of your questions are spurred by the UX that was chosen. When I code
a form, I generally don't display error messages in a separate dialog. I
display them on the page in two places. First, as close to the form
element that is in error as possible and second, as a list of errors at the
top of the form. I like for the list to have links to each form element
that is in error to make it easier to navigate to the error.

Also, the error(s) need to be announced when displayed, typically with
aria-live, and each error needs to be associated with its respective form
element, typically with aria-describedby.

When the form is submitted and the errors are displayed, I often move the
focus to the first element that is in error rather than leaving the focus
on the submit button. Other options would be to move the focus to the list
of errors displayed before the form, or to leave the focus on the submit
button. Those are all UX decisions and any of them would be great for
accessibility.