WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Aria and inline character password validation

for

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pierre Hachey
Sent: Thursday, January 19, 2017 9:15 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Aria and inline character password validation

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: 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/.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pierre Hachey
Sent: Thursday, January 19, 2017 9:15 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Aria and inline character password validation

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.
This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, January 19, 2017 9:27 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pierre Hachey
Sent: Thursday, January 19, 2017 9:15 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Aria and inline character password validation

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: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/.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pierre Hachey
Sent: Thursday, January 19, 2017 9:15 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Aria and inline character password validation

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.
This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Moore,Michael (Accessibility) (HHSC)
Sent: Thursday, January 19, 2017 10:33 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, January 19, 2017 9:27 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, January 19, 2017 9:27 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Moore,Michael (Accessibility) (HHSC)
Sent: Thursday, January 19, 2017 10:33 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, January 19, 2017 9:27 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Moore,Michael (Accessibility) (HHSC)
> Sent: Thursday, January 19, 2017 10:33 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> 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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: Thursday, January 19, 2017 9:27 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> 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.
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > > > > > >


--
Work hard. Have fun. Make history.