E-mail List Archives
Thread: Aria and inline character password validation
Number of posts in this thread: 14 (In chronological order)
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:14AM
Subject: Aria and inline character password validation
No previous message | Next message →
Hi WebAIM list,
What are your thoughts?
Context:
The input field for password has a real time character validation that shows the users via a dynamic tooltip, the strength of the password due to using symbols, lower and upper characters.
Question:
As the user types a line on tooltip vertically increases to show strength of password (percentage change -week to strong), since this line keeps changing as the user types, what kind of "aria" should I add?
Would it be aria-live? Do I need javascript?
Thanks
Pete
Sent from my BlackBerry 10 smartphone.
From: JP Jamous
Date: Thu, Jan 19 2017 8:19AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Pierre,
Yes it is aria-live with role="alert". I would make the aria-life="polite" for the best user experience.
You will need a JS function that would execute onkeyup.
From: Meacham, Steve - FSA, Kansas City, MO
Date: Thu, Jan 19 2017 8:20AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Clearly, such dynamic feedback already requires JavaScript. I also think you're going the right direction by using aria-live.
There is a WAI tutorial on exactly what you're trying to do that does just that: https://www.w3.org/WAI/tutorials/forms/examples/password/.
From: Jonathan Cohn
Date: Thu, Jan 19 2017 8:21AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
I would try a polite live region and see how that works. Generally screen readers do say something for every character typed. If you find the live region too noisy, then a JS solution that waits for no input for half a second and then updates the live region would help.
Best wishes,
Jonathan Cohn
> On Jan 19, 2017, at 10:14 AM, Pierre Hachey < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi WebAIM list,
>
>
> What are your thoughts?
>
> Context:
> The input field for password has a real time character validation that shows the users via a dynamic tooltip, the strength of the password due to using symbols, lower and upper characters.
>
> Question:
> As the user types a line on tooltip vertically increases to show strength of password (percentage change -week to strong), since this line keeps changing as the user types, what kind of "aria" should I add?
>
> Would it be aria-live? Do I need javascript?
>
> Thanks
> Pete
>
>
>
>
> Sent from my BlackBerry 10 smartphone.
> > > >
From: Birkir R. Gunnarsson
Date: Thu, Jan 19 2017 8:26AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
I would use aria-live="assertive" and only update it when the password
strength changes
I would also connect it with the input field.
<label for="pw"> Password</label>
<input type="password" id="pw" aria-describedby="strength">
<span aria-live="assertive" id="strength">weak</span>
The JavaScript would update the contetnts of this span to something
relevant such as "stronger" or at least 'sufficient" when done.
Of you can say "0% strong" then "x% strong".
If you have a more complex implementation, such as you specify whihch
conditions have been met you can use the same construct, you just have
to be more careful with the wording and updates.
On 1/19/17, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> I would try a polite live region and see how that works. Generally screen
> readers do say something for every character typed. If you find the live
> region too noisy, then a JS solution that waits for no input for half a
> second and then updates the live region would help.
>
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
>> On Jan 19, 2017, at 10:14 AM, Pierre Hachey < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>> Hi WebAIM list,
>>
>>
>> What are your thoughts?
>>
>> Context:
>> The input field for password has a real time character validation that
>> shows the users via a dynamic tooltip, the strength of the password due to
>> using symbols, lower and upper characters.
>>
>> Question:
>> As the user types a line on tooltip vertically increases to show strength
>> of password (percentage change -week to strong), since this line keeps
>> changing as the user types, what kind of "aria" should I add?
>>
>> Would it be aria-live? Do I need javascript?
>>
>> Thanks
>> Pete
>>
>>
>>
>>
>> Sent from my BlackBerry 10 smartphone.
>> >> >> >> >
> > > > >
--
Work hard. Have fun. Make history.
From: Moore,Michael (Accessibility) (HHSC)
Date: Thu, Jan 19 2017 8:33AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Honestly I would like to see some user testing data on assertive vs. polite on this one. If assertive causes you to get interrupted multiple times while typing the password that you chose would be really annoying in my opinion. It may even result in mistyping the chosen password. I think that most users know what they are going to type into the password field before they start and if it does not meet the minimum strength requirements they have to come up with a totally different one.
Of course best practice is to tell someone up front what the password rules are so that they can create one that meets the rules from the start.
Mike Moore
EIR (Electronic Information Resources) Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)
Making electronic information and services accessible to people with disabilities is everyone's job. I am here to help.
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:51AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Thanks JP.
Sent from my BlackBerry 10 smartphone.
Original Message
From: JP Jamous
Sent: Thursday, January 19, 2017 10:20 AM
To: 'WebAIM Discussion List'
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Aria and inline character password validation
Pierre,
Yes it is aria-live with role="alert". I would make the aria-life="polite" for the best user experience.
You will need a JS function that would execute onkeyup.
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:52AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Thanks Steve
Sent from my BlackBerry 10 smartphone.
Original Message
From: Meacham, Steve - FSA, Kansas City, MO
Sent: Thursday, January 19, 2017 10:20 AM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Aria and inline character password validation
Clearly, such dynamic feedback already requires JavaScript. I also think you're going the right direction by using aria-live.
There is a WAI tutorial on exactly what you're trying to do that does just that: https://www.w3.org/WAI/tutorials/forms/examples/password/.
From: Beranek, Nicholas
Date: Thu, Jan 19 2017 8:53AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
I really like how they do it on the following deque university page:
https://dequeuniversity.com/library/aria/counters/sf-characters-remaining
It's overkill, yes, but there are some good lessons to learn from it.
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:54AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Thanks Jonathan
Sent from my BlackBerry 10 smartphone.
Original Message
From: Jonathan Cohn
Sent: Thursday, January 19, 2017 10:21 AM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Aria and inline character password validation
I would try a polite live region and see how that works. Generally screen readers do say something for every character typed. If you find the live region too noisy, then a JS solution that waits for no input for half a second and then updates the live region would help.
Best wishes,
Jonathan Cohn
> On Jan 19, 2017, at 10:14 AM, Pierre Hachey < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi WebAIM list,
>
>
> What are your thoughts?
>
> Context:
> The input field for password has a real time character validation that shows the users via a dynamic tooltip, the strength of the password due to using symbols, lower and upper characters.
>
> Question:
> As the user types a line on tooltip vertically increases to show strength of password (percentage change -week to strong), since this line keeps changing as the user types, what kind of "aria" should I add?
>
> Would it be aria-live? Do I need javascript?
>
> Thanks
> Pete
>
>
>
>
> Sent from my BlackBerry 10 smartphone.
> > > >
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:56AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Good solution thanks Birkir
Sent from my BlackBerry 10 smartphone.
Original Message
From: Birkir R. Gunnarsson
Sent: Thursday, January 19, 2017 10:27 AM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Aria and inline character password validation
I would use aria-live="assertive" and only update it when the password
strength changes
I would also connect it with the input field.
<label for="pw"> Password</label>
<input type="password" id="pw" aria-describedby="strength">
<span aria-live="assertive" id="strength">weak</span>
The JavaScript would update the contetnts of this span to something
relevant such as "stronger" or at least 'sufficient" when done.
Of you can say "0% strong" then "x% strong".
If you have a more complex implementation, such as you specify whihch
conditions have been met you can use the same construct, you just have
to be more careful with the wording and updates.
On 1/19/17, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> I would try a polite live region and see how that works. Generally screen
> readers do say something for every character typed. If you find the live
> region too noisy, then a JS solution that waits for no input for half a
> second and then updates the live region would help.
>
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
>> On Jan 19, 2017, at 10:14 AM, Pierre Hachey < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>> Hi WebAIM list,
>>
>>
>> What are your thoughts?
>>
>> Context:
>> The input field for password has a real time character validation that
>> shows the users via a dynamic tooltip, the strength of the password due to
>> using symbols, lower and upper characters.
>>
>> Question:
>> As the user types a line on tooltip vertically increases to show strength
>> of password (percentage change -week to strong), since this line keeps
>> changing as the user types, what kind of "aria" should I add?
>>
>> Would it be aria-live? Do I need javascript?
>>
>> Thanks
>> Pete
>>
>>
>>
>>
>> Sent from my BlackBerry 10 smartphone.
>> >> >> >> >
> > > > >
--
Work hard. Have fun. Make history.
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:57AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Thanks Michael. Good points.
Sent from my BlackBerry 10 smartphone.
Original Message
From: Moore,Michael (Accessibility) (HHSC)
Sent: Thursday, January 19, 2017 10:33 AM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Aria and inline character password validation
Honestly I would like to see some user testing data on assertive vs. polite on this one. If assertive causes you to get interrupted multiple times while typing the password that you chose would be really annoying in my opinion. It may even result in mistyping the chosen password. I think that most users know what they are going to type into the password field before they start and if it does not meet the minimum strength requirements they have to come up with a totally different one.
Of course best practice is to tell someone up front what the password rules are so that they can create one that meets the rules from the start.
Mike Moore
EIR (Electronic Information Resources) Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)
Making electronic information and services accessible to people with disabilities is everyone's job. I am here to help.
From: Pierre Hachey
Date: Thu, Jan 19 2017 8:59AM
Subject: Re: Aria and inline character password validation
← Previous message | Next message →
Thanks for the link Beranek
Pete
Sent from my BlackBerry 10 smartphone.
Original Message
From: Beranek, Nicholas
Sent: Thursday, January 19, 2017 10:53 AM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Aria and inline character password validation
I really like how they do it on the following deque university page:
https://dequeuniversity.com/library/aria/counters/sf-characters-remaining
It's overkill, yes, but there are some good lessons to learn from it.
From: Birkir R. Gunnarsson
Date: Thu, Jan 19 2017 11:05AM
Subject: Re: Aria and inline character password validation
← Previous message | No next message
Ideally, the aria-live region would be polite except the change from
inadeuet to adequate (or vice versa).
Thus, the JavaScript that inserts the "100%" or "sufficient" notice of
password strength can first set aria-live attribute to "assertive"
from "polite".
Also if user then deletes a character, types a password that is too
long or therwise messes up the password, that indication should also
be assertive.
Honestly, screen readers do not handle the aria-live notifications
consistently, I have not found major ifferences between
aria-live="polite" and "assertive", but I hope that will change going
forward.
On 1/19/17, Pierre Hachey < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks for the link Beranek
> Pete
>
> Sent from my BlackBerry 10 smartphone.
> Original Message
> From: Beranek, Nicholas
> Sent: Thursday, January 19, 2017 10:53 AM
> To: WebAIM Discussion List
> Reply To: WebAIM Discussion List
> Subject: Re: [WebAIM] Aria and inline character password validation
>
>
> I really like how they do it on the following deque university page:
>
> https://dequeuniversity.com/library/aria/counters/sf-characters-remaining
>
> It's overkill, yes, but there are some good lessons to learn from it.
>
>