0

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

4

1 回答 1

3

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

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

只要您遵循菜单的“键盘交互”模式，就可以了。

现在，话虽如此，您也许可以使用（有点）新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>
于 2019-03-15T05:16:24.143 回答