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

Question

我正在创建带有 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

Answer 1

简短的回答是你不能。当您指定 role 时，屏幕会提示 reader (SR) 对象将以某种方式运行。当 SR 看到 menu 时，它会宣布您可以使用 up/down 箭头键进行导航，类似于当它看到 role="button" 时它会说 "press spacebar to activate"。

但是，普通 SR 用户会明白，当他们听到 "menu" 时，他们知道他们将使用 up/down 或 left/right 来导航菜单，并且会，一般来说，忽略 SR 告诉他们如何交互。事实上，有经验的 SR 用户可能会将他们的详细程度更改为 "low"，这样交互短语（"use up/down arrow" 或 "press spacebar"）根本不会被宣布。

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

现在，话虽如此，您可能能够使用（有点）新的 aria-roledescription 属性，但我不确定它的支持程度如何在所有浏览器和屏幕 reader 组合中。设置它的值可能只会影响 "menu" 的通告，而不会改变 "use arrow keys" 消息。你必须做一些测试。

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

（因为它有一个 tabindex="0"），一个用于 link。内部

元素实际上并不需要。只要有类似的东西：

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

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

How to change the default JAWS reads for menu and menuitem roles to customized one?

html

javascript

jaws-screen-reader

web-accessibility