3

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

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

当我没有打开 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);

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

任何人都可以提供的任何帮助将不胜感激！

ps 我知道，如果我采用嵌套的 div 并将其移动，使其不再嵌套，而是第一个 div 的兄弟，那么一切都按预期工作。不幸的是，这不是一个选择。div 需要嵌套。

4

2 回答 2

5

这不是 NVDA 中的错误。

首先，你不能有嵌套的可点击元素。具体来说，您不能有嵌套的交互式内容。您不能嵌套链接，也不能嵌套按钮。您不能在按钮中嵌套链接，也不能在链接中嵌套按钮。还有其他类型的交互式内容也值得研究以供将来参考。

你可能会发现你的代码在技术上是有效的，但这仅仅是因为你写的是一个 fib。

而不是使用正确的元素 ( <button>) 您选择放在role=buttons 上<div>。HTML 验证器会传递您的代码，因为它可以嵌套<div>。

但是，通过赋予它们 each role=button，您已经指示用户代理将它们视为<button>（减去它们带来的所有好处，如可访问性、密钥处理程序、语义等）。

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

错误：已看到开始标记button，但已打开相同类型的元素。

我的建议是：

  • 不嵌套它们，
  • 将它们转换为<button>s，
  • 删除无效tabindex=1（您不需要），
  • 删除对密钥代码的检查，因为<button>它免费为您提供（包括字符 32），
  • 让您<div class="result">进入ARIA 现场区域（这里有一些提示），
  • 并在按钮周围放置一个包装器，为您提供所需的视觉效果。

示例重新调整的代码：

 <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>
于 2016-11-30T02:19:19.390 回答
1

如果您可能感兴趣，WAI-ARIA 创作实践(APG) 提供了有关如何使各种设计模式可访问的指南。它还包括您所描述的内容：菜单或菜单栏，其中包含带有子菜单的菜单的代码示例。

于 2016-12-01T00:07:00.680 回答