JAWS Screen Reader Repeats Tree Items in FireFox

问题

I have run into an issue with the JAWS screen reader & Firefox.

I have a tree like the one below. Whenever any of the <a> elements gain focus, either by tabbing from the window or from the <button>, JAWS narrates the element three times. As far as i can tell, Firefox is the only browser that does this.

Is there something wrong with my markup here?

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

Many thanks.

回答1:

You should at the very least be using aria-owns to show the relationship between the parent and the child. Take a look at this example http://oaa-accessibility.org/example/42/

Also, it would be better to actually just use the hierarchical list item structure that you already have. See this example: http://oaa-accessibility.org/example/41/

If you have done that and still have problems, try it with NVDA instead of JAWS. NVDA is more standards compliant than JAWS.

回答2:

Once again, i have found the answer after asking the question. :(

Evidently, if i move role="tree" from the outer <nav> to the first <ol>, Firefox narrates as expected. The markup now looks like this:

<nav>
  <ol role="tree">
    <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>

This smells like a bug in Firefox to me. I have opened a bug & will follow an developments.

来源：https://stackoverflow.com/questions/33264986/jaws-screen-reader-repeats-tree-items-in-firefox

标签

html

accessibility

wai-aria

jaws-screen-reader