Feature:
HTML markdown in password requirements could be improved to better support users who rely on screen readers and other assistive technologies.
Description:
Password requirements in the Universal Login Page are communicated to users by way of a bulleted list of requirements, with a green checkmark prepended to requirements that have been satisfied by user’s input.
The container for these requirements correctly has an aria-live="assertive" attribute, which announces these requirements to screen readers. However, it is difficult for screen readers to distinguish which of these requirements have been satisfied by the user’s input, and which ones still require attention. To resolve this, the following should be addressed:
- The requirements that have not yet been addressed by the user should be prepended with either a text string reading “Error:” or an error icon with the alt text “Error:”
- The green checkmarks within the password requirements box should contain an alt text of “requirement met:” to further clarify their meaning.
Relevant WCAG Success Criteria:
3.3.1 Error Identification
3.3.2 Labels or Instructions
Use-case:
Our application has many blind and low-vision users. Addressing this issue would mean those users could more efficiently create accounts.