Contrib.social

Indicate to screenreaders when the show/hide password button is pressed

Open on Drupal.org →
Created on 10 September 2024, 3 months ago

Problem/Motivation

At the moment the announced button label is changed after each click/press. As you can see and hear in the example (password.mp4), you get announced the future state that will take effect after the button is pressed. so you as the user have to do the cognitive transfer to determin the correct current state. if show password is announced is my password then currently shown or is it hidden? Leonie Watson (wcag board of directors and blind screenreader user) illustrates and explains the problem in the following video in this webinar at the smashing magazine: https://youtu.be/OUDV1gqs9GA?t=3220

Steps to reproduce

Proposed resolution

Use a toggle or switch button, so the button label in the aural interface remains the same no matter if the password is hidden or shown. The screenreader only adds something like "pressed" or "selected" at the end depending on the pattern that is pick to signify that the button was pressed.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

6.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • Comment about 2 months ago →
    🇩🇪Germany anacolautti

    First of all, thank you for bringing this up, and sorry for the delay in my response.

    I think this is a good idea, but I fear the aria-labels might not be adequate if we change this.

    Until now, I wrote the aria-labels thinking about the action of the button, which is to either show or hide the password content.
    If we change this, the default state of the button would be aria-pressed="false", so the aria label of the button should be something like "password is hidden", and when pressed (aria-pressed="true") it would be something like "password is visible".

    Do we agree on this?

    Can anyone suggest better texts for these aria labels?

    Keep in mind, that updating the aria labels implies updating the translations each site may have done customly and the contrib translations here https://localize.drupal.org/translate/projects/view_password

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024