javascript - NVDA 屏幕阅读器无法按预期切换到焦点模式

Question

我有一段简单的代码，试图在使用 NVDA 屏幕阅读器时使键盘可访问。

具体来说，我有一个 Angular 色为“按钮”的 div，其中嵌套了另一个 Angular 色为“按钮”的 div。每个 div 都有一个不同的 onkeydown 事件，当用户切换到该 div 并按下“enter”时会触发该事件。

当我没有打开 NVDA 屏幕阅读器时，此键盘功能都可以正常工作。

但是，当我打开屏幕阅读器时，嵌套的 keydown 事件不再触发。相反，即使嵌套事件具有焦点，也只会触发父事件。

但是，如果我手动将 NVDA 从“浏览模式”更改为“焦点模式”(通过按 NVDA 键 + 空格键)，则按键事件将再次按预期工作。

不幸的是，我不能期望使用 NVDA 的人知道手动切换到“对焦模式”。它要么需要自动切换到“聚焦模式”，要么需要工作在“浏览模式”。

代码如下:

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);

您还可以在此处查看代码笔:http://codepen.io/jennEDVT/pen/Yprova

任何人都可以提供任何帮助，我们将不胜感激!

附注我知道，如果我使用嵌套的 div 并移动它，使其不再嵌套，而是第一个 div 的同级，那么一切都会按预期工作。不幸的是，这不是一个选择。 div需要嵌套。

Answer 1

这不是 NVDA 中的错误。

首先，您不能嵌套可点击元素。具体来说，you cannot have nested interactive content .您不能嵌套链接，也不能嵌套按钮。不能在按钮中嵌套链接，也不能在链接中嵌套按钮。还有其他种类interactive content也值得研究以供将来引用。

您可能会发现您的代码技术上是有效的，但这只是因为您编写的是谎言。

您没有使用正确的元素 ( <button> )，而是选择了 role=button在 <div>秒。 HTML 验证器会通过您的代码，因为嵌套 <div> 是有效的.

但是，通过给他们每个 role=button ，您已指示用户代理将它们视为 <button> (减去它们带来的所有好处，例如可访问性、 key 处理程序、语义等)。

现在让我们返回并再次验证该代码，因为用户代理会看到它(如嵌套的 <button> s)。 W3C Nu HTML 检查器会失败(我知道是因为我进行了测试):

Error: Start tag button seen but an element of the same type was already open.

我的建议是:

• 不要嵌套它们，
• 将它们转换为 <button>小号，
• 删除无效的tabindex=1 (你不需要)，
• 删除键码为<button>的勾选免费给你(包括字符 32)，
• 让你的<div class="result">进入ARIA live region (有 some tips here )，
• 并在按钮周围放置一个 wrapper ，以提供您想要的视觉效果。

示例重组代码:

 <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>