WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role=alert > error messages in forms

for

From: Lovely, Brian
Date: Nov 21, 2017 6:52AM

Role="alert" only reacts to change. If you have it on an empty div, and change the content of that div by injecting a text string, it will alert. However, if the contents of the div do not change, it will not alert again.

This is why I prefer using aria-describedby for form errors. Each error container has a unique ID, and each associated input has aria-describedby set to a space-delimited list of IDs. Ideally, when the user attempts to submit the form, the developer has coded it to place focus on the first (in code order) in-error input. Then the user can tab from input to input searching for errors, and the error message(s) will announce each time an in-error input receives focus. Even if focus isn't handled on submit, the user can still tab through the form listening for errors.