admin管理员组文章数量:1323353
I have a simple chunk of code that I'm trying to make keyboard accessible while using the NVDA screen reader.
Specifically, I have a div with a role of "button", with another div with another role of "button" nested inside it. Each div has a different onkeydown event that gets fired when the user tabs to that div, and presses "enter".
This keyboard functionality all works as desired when I don't have the NVDA screen reader turned on.
When I do have the screen reader turned on, however, the nested keydown event no longer fires. Instead, just the parent event fires even when the nested event is one that has focus.
However, if I manually change NVDA out of "browse mode" and into "focus mode" (By pressing the NVDA key + spacebar), then the key events work as desired again.
Unfortunately, it's not acceptable for me to expect someone using NVDA to know to make the manual switch to "focus mode". It either needs to change to "focus mode" automatically, or it needs to work in "browse mode."
Here's the code:
HTML:
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, outerDivAction)"
class="outerDiv">
Outer Div
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, innerDivAction)"
class="innderDiv">
Inner Div</div>
</div>
<div class="result"></div>
JavaScript:
function outerDivAction(event) {
event.stopPropagation();
console.log('outer div');
$('.result').html('<p>outer div!</p>');
}
function innerDivAction(event) {
event.stopPropagation();
console.log('inner div')
$('.result').html('<p>inner div!</p>');
}
function keyEvent(event, callback) {
event.stopPropagation();
if (event.which === 13) {
callback(event);
}
}
$('.outerDiv').click(outerDivAction);
$('.innderDiv').click(innerDivAction);
You can also view a codepen here:
Any help that anyone can offer would be greatly appreciated!
p.s. I know that if I take the nested div and move it so that it's no longer nested, but is rather a sibling of the first div, then everything works as desired. Unfortunately that's not an option. The div needs to be nested.
I have a simple chunk of code that I'm trying to make keyboard accessible while using the NVDA screen reader.
Specifically, I have a div with a role of "button", with another div with another role of "button" nested inside it. Each div has a different onkeydown event that gets fired when the user tabs to that div, and presses "enter".
This keyboard functionality all works as desired when I don't have the NVDA screen reader turned on.
When I do have the screen reader turned on, however, the nested keydown event no longer fires. Instead, just the parent event fires even when the nested event is one that has focus.
However, if I manually change NVDA out of "browse mode" and into "focus mode" (By pressing the NVDA key + spacebar), then the key events work as desired again.
Unfortunately, it's not acceptable for me to expect someone using NVDA to know to make the manual switch to "focus mode". It either needs to change to "focus mode" automatically, or it needs to work in "browse mode."
Here's the code:
HTML:
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, outerDivAction)"
class="outerDiv">
Outer Div
<div role="button"
tabindex="1"
onkeydown="keyEvent(event, innerDivAction)"
class="innderDiv">
Inner Div</div>
</div>
<div class="result"></div>
JavaScript:
function outerDivAction(event) {
event.stopPropagation();
console.log('outer div');
$('.result').html('<p>outer div!</p>');
}
function innerDivAction(event) {
event.stopPropagation();
console.log('inner div')
$('.result').html('<p>inner div!</p>');
}
function keyEvent(event, callback) {
event.stopPropagation();
if (event.which === 13) {
callback(event);
}
}
$('.outerDiv').click(outerDivAction);
$('.innderDiv').click(innerDivAction);
You can also view a codepen here: http://codepen.io/jennEDVT/pen/Yprova
Any help that anyone can offer would be greatly appreciated!
p.s. I know that if I take the nested div and move it so that it's no longer nested, but is rather a sibling of the first div, then everything works as desired. Unfortunately that's not an option. The div needs to be nested.
Share Improve this question edited Nov 29, 2016 at 19:56 jennEDVT asked Nov 29, 2016 at 19:50 jennEDVTjennEDVT 7391 gold badge9 silver badges14 bronze badges2 Answers
Reset to default 6This is not a bug in NVDA.
First of all, you cannot have nested clickable elements. Specifically, you cannot have nested interactive content. You cannot nest links and you cannot nest buttons. You cannot nest links in buttons, and you cannot nest buttons in links. There are other kinds of interactive content worth looking into for future reference too.
You may find that your code is technically valid, but that is only because what you have written is a fib.
Instead of using the correct element (<button>
) you have chosen to put role=button
on <div>
s. An HTML validator would pass your code because it is valid to nest <div>
.
However, by giving them each role=button
, you have instructed the user agent to treat them as <button>
(minus all the benefits that e with them, like accessibility, key handlers, semantics, etc.).
Now let's go back and validate that code again as a user agent would see it (as nested <button>
s). The W3C Nu HTML checker would fail it (I know because I ran a test):
Error: Start tag
button
seen but an element of the same type was already open.
My suggestion is:
- to not nest them,
- convert them to
<button>
s, - remove the invalid
tabindex=1
(which you would not need), - remove the check for the key code as the
<button>
gives you that for free (including character 32), - make your
<div class="result">
into an ARIA live region (there are some tips here), - and put a wrapper around the buttons to give you the visual effect you want.
Sample rejiggered code:
<div class="wrapper">
<button class="outerDiv">
Outer Div
</button>
<button class="innderDiv">
Inner Div
</button>
</div>
<div class="result" role="alert" aria-live="assertive"></div>
If it may interest you, the WAI-ARIA Authoring Practices (APG) has guidance on how to make various design patterns accessible. It also includes one on what you’re describing: Menu or menubar which includes code examples for menus with submenus.
本文标签: javascriptNVDA screen reader not switching to focus mode predictablyStack Overflow
版权声明:本文标题:javascript - NVDA screen reader not switching to focus mode predictably - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742129239a2422081.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论