WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Aria and inline character password validation

for

From: Birkir R. Gunnarsson
Date: Jan 19, 2017 8:26AM

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