我有一段简单的代码,我正在尝试在使用NVDA屏幕阅读器时使其可访问。具体来说,我有一个带有“button”角色的div,其中嵌套了另一个带有“button”角色的div。每个div都有不同的onkeydown事件,当用户切换到该div并按下“enter”键时触发。当我没有打开NVDA屏幕阅读器时,这种键盘功能都可以正常工作。然而,当我打开屏幕阅读器时,嵌套的keydown事件不再触发。相反,即使嵌套事件具有焦点,只有父事件会触发。但是,如果我手动将NVDA从“浏览模式”更改为“焦点模式”(通过按下NVDA键+空格键),则键事件再次按预期工作。不幸的是,我不能指望使用NVDA的人知道如何手动切换到“焦点模式”。它需要自动切换到“焦点模式”,或者需要在“浏览模式”下工作。以下是代码:
您可以在此处查看Codepen:http://codepen.io/jennEDVT/pen/Yprova 如果有任何人能提供帮助,将不胜感激! p.s. 我知道,如果我将嵌套的div移到它不再是嵌套的,而是第一个div的同级元素,则一切都会按预期工作。 不幸的是,这不是一个选项。 这个div需要被嵌套。
<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);
您可以在此处查看Codepen:http://codepen.io/jennEDVT/pen/Yprova 如果有任何人能提供帮助,将不胜感激! p.s. 我知道,如果我将嵌套的div移到它不再是嵌套的,而是第一个div的同级元素,则一切都会按预期工作。 不幸的是,这不是一个选项。 这个div需要被嵌套。