Authentication error messages are not accessible to assistive devices

Describe the bug The “toast” component used for displaying authentication error messages, such as “Username cannot be empty”, lacks sufficient markup to achieve an accessible experience for assistive device users, such as screen readers. Additionally, there is no built-in way to create a custom error message component to create a more accessible experience. For projects that are required to be Section 508 or ADA compliant, which is most websites, this is a big deal and prevents developers from using the Amplify UI components.

To Reproduce Some tips for doing an accessibility review are available here. (I assume/hope AWS has accessibility experts to help reproduce and address this further).

Expected behavior

The exact solution varies, but in general:

• Move the focus to the first form control that has the error or move the focus to the common error message. Ensure a screen reader is alerted to this new content.
• Add inline error messages to form fields
• Associate the inline errors with form fields by using the aria-describedby attribute

WCAG 2.0 specifies the following guidelines for accessible form validation and error identification:

• SC 3.3.1 Error identification
• SC 3.3.3 Error suggestions

[ashika01]

@sawyerh : Thank you for reporting. We are aware of this. We have a task to do accessibility audit and update the components.

[ErikCH]

I’ll close this now. Please reopen it if needed.