User password strength result provides no feedback for screen readers

[rianrietveld]

When entering or changing the user password, the strength of the password is displayed below the input field in a div id=pass-strength-result. There is no feedback for screen reader users about the value or change of this password strength.

Attached patch that adds

• aria-live="polite" to #pass-strength-result, so that the changes are read out
• aria-labelledby="pass-strength-result" to the input field with the password, so the initial state of #pass-strength-result is read out

Patch tested with VoiceOver

[rianrietveld]

Adds ARIA for screen reader feedeback

[obenland]

What kind of dev feedback are you looking for?

[rianrietveld]

Adds the word password to the strength indicator and the hide/show button

[rianrietveld]

Second patch adds the word Password to the strength indicator and the hide/show button, as discussed with @afercia.
Tested with VoiceOver.

[obenland]

Is the password context through the row heading not obvious enough?

[rianrietveld]

In the case of the show/hide button it's not obvious.
A screenreader user can call a list of buttons, and the only response they get is "hide".

For the password strength: it just gets read out every time you stop typing and the status of the strength has changed.
Then it's not really related to a row heading.
But I agree that from the context you can understand that this is related to the password.
But think for overall usability it may be better to add password the text, not only for screenreader users.

Patch 1 is necessary, patch 2 makes it more usable and pretty.

[afercia]

Refreshed a bi the latest patch to change just to small things as agreed with @obenland. We can always iterate and try further improvements later.

• use aria-describedby for the input field initial "strength" state instead of aria-labelledby so it will be read out after the field and maybe is more appropriate as "description"
• Show/Hide button aria-label should be set on the button itself not on the inner span

[afercia]

Side note: I'd also recommend to add the word "password" to the strength indicator messages :)

[obenland]

In 33353:

Passwords: Add password strength meter feedback for screen readers.

Also gives context to the show/hide button.

Props rianrietveld, afercia.
Fixes #33032.