mat-error is not making aria-live announcements

MatError has role="alert" applied, but this won’t take effect when it’s appended to the DOM. We need to either:

• Change <mat-error> to always be in the DOM (display: none) and show it when a form-field goes into error-state, or
• Use the LiveAnnouncer service to announce the contents (as an alert) when the control goes into an error state.

[ramjiseetharaman]

@mfairchild365 - I feel that since we are associating the input field with the error message using the aria-describedby attribute, we don’t need to live region on the inline error message. I have had an opportunity working with users to do Usability testing on forms. One thing we inferred from that is, 70% of the users felt that the announcement of the error messages as live regions were jarring/annoying. The reasoning behind that is that, assistive technology users reported that they navigate through all the input fields first to get the feel of what is expected out of the form before they start filling out. Announcement of the message for every tab was jarring/annoying for them.

With that being said, if you really want to communicate the error messages as live regions, it is recommended by W3C to use aria-live="polite" rather than role=“alert” which implicitly corresponds to aria-live=“assertive” and aria-atomic=“true”. Please find the link as reference. (https://www.w3.org/WAI/tutorials/forms/notifications/)

Note: The displayed message in this example is coded using a <span> element that has an aria-live attribute with the value polite. The contents of this so called “live region” are conveyed to screen readers and other assistive technology. The value “polite” de-emphasizes the importance of the message and does not cause screen readers to interrupt their current tasks to read aloud this message. Thus the message is only read once when the user stops typing rather than on every keystroke that the user makes.

PS: Unfortunately, since the Usability study is a proprietary property of my company, I can’t share any links here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}