WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Jquery.focus() and screen reader

for

From: Patrick H. Lauke
Date: Aug 16, 2017 10:00AM

Don't set tabindex=0 on non-interactive elements, as otherwise they'll
fall into the regular keyboard focus cycle.

P

On 16/08/2017 16:31, JP Jamous wrote:
> Dan,
>
> Wouldn't it be better if he uses Tabindex="0" so it does not conflict with any focusable items on that window? I would approach it that way.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Swift, Daniel P.
> Sent: Wednesday, August 16, 2017 8:53 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Jquery.focus() and screen reader
>
> Try adding tab index 1:
>
> jQuery('.licence-agreement').attr("tabindex",1).focus();
>
> Does that help? If that works, you need to remember to remove the tab index when they close the modal box.
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Ócsvári Áron
> Sent: Wednesday, August 16, 2017 7:45 AM
> To: WebAIM Discussion List
> Subject: [WebAIM] Jquery.focus() and screen reader
>
> Hello,
>
> I have a jQuery script. When I click a link, a non-modal windows pops up, and show a text.
>
> I added alert role for the div, so my screen reader (NVDA) announces it properly. My problem is that the focus of NVDA does not move to this text.
>
> What would be the sollution for this? My code are the following:
>
> jQuery('.licence-agreement').attr('role', 'alert'); jQuery('.licence-agreement').show().css("position","absolute");
>
> jQuery('.licence-agreement').focus();
>
> The html:
>
> <div class='licence-agreement'style='display:none;'>
> <p>Hello!</p>
>
> ...
>
> </div>
>
> Thanks for your help!
>
> Regards,
>
> Aron
>
> > > >
>
> ---
> This email has been checked for viruses by AVG.
> http://www.avg.com
>
> > > > >


--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke