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

Posted 2021-03-19

我通过添加角色作为菜单和menuitem来创建带有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>

像上面的代码我正在创建。我将其设计为横向导航和绑定事件（左右箭头）

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

答案

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

然而，一个普通的SR用户会明白，当他们听到“菜单”时，他们知道他们要么使用向上/向下或向左/向右导航菜单，并且通常会忽略SR如何告诉他们相互作用。实际上，经验丰富的SR用户可能会将其详细程度更改为“低”，以便根本不会宣布交互短语（“使用向上/向下箭头”或“按空格键”）。

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

现在，说到这一点，你可能可以使用（某种程度上）新的aria-roledescription属性，但我不确定它在所有浏览器和屏幕阅读器组合中的支持程度如何。设置其值可能只​​会影响“菜单”的公告，而不会更改“使用箭头键”消息。你必须做一些测试。

请注意，您的原始示例有点奇怪。每个菜单项基本上有两个制表位。一个用于<div>（因为它有一个tabindex =“0”），一个用于链接。内部<div>元素并不需要。只需要：

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