WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to convey password requirements on registration pages


From: Maxability
Date: Apr 24, 2019 9:18PM

This is always a question to me. Here are my two cents.

Placing the instructions elsewhere and using aria-describedby perhaps
will be difficult for users with learning challenges as they have
navigate back and forth between the instructions area and the password
field. For SR users using aria-describedby will not allow to navigate
word by word at the PWD field.

I dint think of the pros and cons but here is my proposal.

Place a PWD instructions button in close proximity to the create new
pass word field. This button should receive focus before the password
field. On activating the button the instructions should be displayed,
once the user read the instruction, just by hitting the escape key focus
should be pushed to the password field allowing the user to type in.

In case user want to read the instructions again, the instruction button
is just a shift + tab away and enter key opens the button.

Only challenge I could think right now is an extra tab focus.


Thanks & Regards


On 4/23/2019 5:50 PM, Isabel Holdsworth wrote:
> Larry:
> If the list of requirements is long, no matter how or where they
> appear on the screen, it's likely that some users, especially those
> with learning difficulties (and me), will struggle to follow the
> instructions.
> But for the benefit of screenreader users, the requirements need to be
> in very close proximity to the field they refer to, and as has been
> said by others, if the instructions come after the field then
> screenreader users need to be informed of their presence.
> I personally think that aria-describedby would work quite well here,
> but not relied upon. So if the instructions were placed just after the
> password field in the DOM, and associated with it using
> aria-describedby, this could offer quite a good solution.
> Cheers, Isabel
> On 22/04/2019, Mallory < <EMAIL REMOVED> > wrote:
>> As a "slow person" I benefit from (and I don't care how ugly) a list of how
>> I have to do it being visible to me at all times (I mean, not only when I
>> have focus on the pw field).
>> Just try not to put the requirements in an aria-describedby setup, or if it
>> is, it can also be normally navigated to and read in any way needed (like by
>> character). I've focussed on pw fields in the past and got a book blasted at
>> me. It still meant I had to try to hold all the rules in my head.
>> Dan: don't forget a space, but yeah that does look like it could be
>> reasonable:
>> (to avoid PasswordPlease, tho it depends on SR and setting whether you'd get
>> that as one or two words)
>> cheers,
>> _mallory
>> On Mon, Apr 22, 2019, at 7:47 PM, Swift, Daniel P. wrote:
>>> Larry:
>>> Could you place the requirements after the textbox and within the label
>>> include extra text for the screen reader only indicating that there is
>>> a list of password requirements listed just after the textbox.
>>> <label>Password<span class="sro">Please note that requirements are
>>> listed just after the password textbox</span></label>
>>> Thoughts?
>>> Dan Swift
>>> Senior Web Specialist
>>> Enterprise Services
>>> West Chester University
>>> 610.738.0589
>>> -----Original Message-----
>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>>> Behalf Of Fix, Lawrence
>>> Sent: Monday, April 22, 2019 1:41 PM
>>> Subject: [WebAIM] How to convey password requirements on registration
>>> pages
>>> We're working on a registration page where the users need to create an
>>> ID and PW. There are several requirements for the password e.g.
>>> length, numbers, capitals, etc. Does anyone have thoughts on how to
>>> provide the requirements to the screen reader user. I've seen
>>> examples where the requirements are displayed as a list that appears
>>> either below the password field or to the right of the entire form.
>>> For the visual user I think that is OK (not great), but for the screen
>>> reader - I feel like it has to be read when the user gets to the PW
>>> input field. The concern is that the design may look funny with the
>>> list of requirements displayed between the ID and PW fields. Any ideas
>>> are much appreciated!
>>> Thank you,
>>> Larry
>>> Larry Fix
>>> AIG
>>> Web Site Accessibility
>>> L&R Experience Design
>>> 80 Pine St, New York, NY 10005
>>> Tel +1 917 703 3916
>>> <EMAIL REMOVED> | www.aig.com
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>> >>> >>> >>> >>>
>> >> >> >> >>
> > > >