E-mail List Archives
Thread: Jquery.focus() and screen reader
Number of posts in this thread: 9 (In chronological order)
From:
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.
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
From:
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
>
>
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.
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.
>
>
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.
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.
>
>