html - JAWS 屏幕阅读器在 FireFox 中重复树项目

Question

我在使用 JAWS 屏幕阅读器和 Firefox 时遇到了问题。

我有一棵像下面这样的树。每当 <a> 中的任何一个元素通过从窗口或 <button> 进行 Tab 键获得焦点。 ，《JAWS》将该元素叙述三遍。据我所知，Firefox 是唯一执行此操作的浏览器。

我的标记有问题吗？

<nav role="tree">
  <ol role="group">
    <li role="presentation">
      <a href="javascript:void(0)" role="treeitem">Parent Link 1</a>
      <ol role="group">
        <li role="presentation">
          <a href="javascript:void(0)" role="treeitem">Child Link 1</a>
        <li role="presentation">
          <a href="javascript:void(0)" role="treeitem">Child Link 2</a>
      </ol>
    <li role="presentation">
      <a href="javascript:void(0)" role="treeitem">Parent Link 2</a>
      <ol role="group">
        <li role="presentation">
          <a href="javascript:void(0)" role="treeitem">Child Link 3</a>
        <li role="presentation">
          <a href="javascript:void(0)" role="treeitem">Child Link 4</a>
      </ol>
  </ol>
</nav>

<button>Something else to focus on</button>

非常感谢。

Answer 1

您至少应该使用 aria-owns 来显示父级和子级之间的关系。看看这个例子http://oaa-accessibility.org/example/42/

此外，最好只使用已有的分层列表项结构。请参阅此示例:http://oaa-accessibility.org/example/41/

如果您已完成此操作但仍然遇到问题，请尝试使用 NVDA 而不是 JAWS。 NVDA 比 JAWS 更符合标准。