E-mail List Archives
Thread: Jquery.focus() and screen reader
Number of posts in this thread: 9 (In chronological order)
From:
Date: Wed, Aug 16 2017 5:45AM
Subject: Jquery.focus() and screen reader
No previous message | Next message →
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
From: JP Jamous
Date: Wed, Aug 16 2017 7:13AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
If it is opening in a new window, the SR will start reading the DOM from top to bottom. Why do you need to set the focus on the text?
My concern is that you might run into issues with JAWS, as it would want to read the DOM from the top as soon as it loads in the browser. Are you testing with multiple screen readers? If not, you should because what might work for NVDA might not work for JAWS and VoiceOver.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ócsvári ÃÂron
Sent: Wednesday, August 16, 2017 6:45 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
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
From: Swift, Daniel P.
Date: Wed, Aug 16 2017 7:52AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
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 ADDRESS 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
From:
Date: Wed, Aug 16 2017 8:06AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
Thanks, it works! :)
2017.08.16. 15:52 keltezéssel, Swift, Daniel P. ÃÂrta:
> 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 ADDRESS 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
>
> > > > > > >
From: JP Jamous
Date: Wed, Aug 16 2017 9:31AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Swift, Daniel P.
Sent: Wednesday, August 16, 2017 8:53 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
From: Patrick H. Lauke
Date: Wed, Aug 16 2017 10:00AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Swift, Daniel P.
> Sent: Wednesday, August 16, 2017 8:53 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
From: Patrick H. Lauke
Date: Wed, Aug 16 2017 10:01AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
On 16/08/2017 17:00, Patrick H. Lauke wrote:
> Don't set tabindex=0 on non-interactive elements, as otherwise they'll
> fall into the regular keyboard focus cycle.
sorry, missed out the second part of my thought: set it to tabindex="-1"
which means "programmatically focusable (e.g. via JS), but not in the
regular focus order"
P
--
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
From: JP Jamous
Date: Wed, Aug 16 2017 10:28AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | Next message →
Thanks Patrick. That's helpful.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Wednesday, August 16, 2017 11:02 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Jquery.focus() and screen reader
On 16/08/2017 17:00, Patrick H. Lauke wrote:
> Don't set tabindex=0 on non-interactive elements, as otherwise they'll
> fall into the regular keyboard focus cycle.
sorry, missed out the second part of my thought: set it to tabindex="-1"
which means "programmatically focusable (e.g. via JS), but not in the regular focus order"
P
--
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 ---
This email has been checked for viruses by AVG.
http://www.avg.com
From: Birkir R. Gunnarsson
Date: Thu, Aug 17 2017 6:41AM
Subject: Re: Jquery.focus() and screen reader
← Previous message | No next message
Two thoughts:
1. Are you sure the CSS selector is working (might be better to give
your license agreement alert div an id an use that for the selector).
2. Use tabindex="-1" on the div, makes it focusable by JavaScript
without interrupting the focus order of the rest of the page. These
two should ensure that keyboard and screen reader focus are moved
appropriately.
Bigger question:
Does your alert div have any focusable element (do you expect the user
to interact with it, e.g. by clicking a button or checking a
checkbox))?
If so, the role should be alertdialog, not alert, and it should have
aria-label="license" or whatever is descriptive.
Check the ARIA authoring Practices entry for dialogs.
If it does not have any focusable elements, does it need to receive focus?
The alert role should be enough to have screen readers announce it,
and if it is properly highlighted and appears in the expect place in
the screen (close to where the user would be located when it gets
triggered) it should be good enough for screen maagnification users.
On 8/16/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks Patrick. That's helpful.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Patrick H. Lauke
> Sent: Wednesday, August 16, 2017 11:02 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Jquery.focus() and screen reader
>
> On 16/08/2017 17:00, Patrick H. Lauke wrote:
>> Don't set tabindex=0 on non-interactive elements, as otherwise they'll
>> fall into the regular keyboard focus cycle.
>
> sorry, missed out the second part of my thought: set it to tabindex="-1"
> which means "programmatically focusable (e.g. via JS), but not in the
> regular focus order"
> P
> --
> 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
> > > http://webaim.org/discussion/archives
> >
>
> ---
> This email has been checked for viruses by AVG.
> http://www.avg.com
>
> > > > >
--
Work hard. Have fun. Make history.