javascript - 如何将菜单和菜单项角色的默认 JAWS 读取更改为自定义角色？

Question

我通过添加 Angular 色作为菜单和菜单项来创建带有 div 标签的水平菜单项。

<div class="ul" role="menu">
  <div tabindex="0" class="li" role="menuitem"><a href="#home">Home</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#news">News</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#contact">Contact</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#about">About</a></div>
</div>

就像我正在创建的上面的代码一样。我将其样式设置为水平导航和绑定(bind)事件来执行此操作(左箭头和右箭头)

const btns = document.querySelectorAll(".li")
console.log(btns)
btns.forEach(btn => {
   btn.addEventListener('keydown', event => {
      if (event.keyCode == 39)
      document.activeElement.nextElementSibling.focus() 
      else if (event.keyCode == 37) document.activeElement.previousElementSibling.focus()
   });

}); 

但是当下巴阅读时，其阅读就像使用向上和箭头按钮来导航。我该如何改变这个？就我而言，它应该像使用左右箭头按钮进行导航。

下面是plunker https://plnkr.co/edit/rVOGMFHoWFt7F3Aicipz?p=preview

Answer 1

简短的回答是你不能。当您指定role时，这是屏幕阅读器 (SR) 的一个线索，表明该对象将以某种方式运行。当 SR 看到 menu 时，它将宣布您可以使用向上/向下箭头键进行导航，类似于当它看到 role="时它会说“按空格键激活”按钮”。

但是，普通 SR 用户会明白，当他们听到“菜单”时，他们知道他们将使用上/下或左/右来导航菜单，并且通常会忽略 SR 如何告诉他们进行互动。事实上，经验丰富的 SR 用户可能会将其详细程度更改为“低”，以便根本不会宣布交互短语(“使用向上/向下箭头”或“按空格键”)。

只要您遵循“keyboard interaction ”菜单模式，就应该没问题。

现在，话虽如此，您可能能够使用(有点)新的 aria-roledescription属性，但我不确定它在所有浏览器和屏幕阅读器组合中的支持程度如何。设置其值可能只​​会影响“菜单”的公告，而不会更改“使用箭头键”消息。您必须进行一些测试。

请注意，您原来的示例有点奇怪。每个菜单项基本上都有两个制表位。一个用于

(因为它有一个 tabindex="0")，另一个用于链接。实际上并不需要内部

元素。只要有类似的东西:

<div class="ul" role="menu">
  <a role="menuitem" href="#home">Home</a>
  <a role="menuitem" href="#news">News</a>
  <a role="menuitem" href="#contact">Contact</a>
  <a role="menuitem" href="#about">About</a>
</div>

关于javascript - 如何将菜单和菜单项角色的默认 JAWS 读取更改为自定义角色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55164287/

上一篇：javascript - 将滚动事件数据传递给throttle 函数

下一篇：javascript - 使用类名选择器识别元素，但使用此关键字时不识别元素