NVDA screen reader reading heading twice when embedded with link

Question

I am facing a issue in NVDA screen reader. Its is reading the heading twice. Below is the HTML structure.

<article>
  <figure>
    <div id="placeholder">
      <a id="thumbnail" href="" aria-hidden="true" tabindex="-1" class="focused">
        <img src="/static-files/img.png" width="700" height="400" alt="">
      </a>
    </div>
    <figcaption>
      <h3 class="h6">
        <a href="/stories/sample.html"> Example Title </a>
      </h3>
      <small>
        September 24, 1999
      </small>
    </figcaption>
  </figure>
</article>

• Also, The screen reader reads clickable multiple times when focussed on a link.

  If anyone can come up with the solution it would be a great help. I am a beginner in the accessibility.

Thanks in advance :)

Answer 1

It's not NVDA that's the problem but rather the browser. Which browser are you using? I hear "Example Title" twice when using a screen reader with firefox and chrome but not with internet explorer. It didn't matter if I used NVDA or JAWS. It was the browser that was causing the problem.

Both firefox and chrome are treating the <figcaption> as a group role. That's a valid role for this element as noted in the html spec for figcaption but typically a browser should not choose a default role if the html spec does not say what the default role should be. For example, the <section> element says the default role is region but it could be assigned several other types of roles. If none of the other roles are assigned by the html developer, then the default region role should be used.

<figcaption> , on the other hand, does not have a default role and the browser shouldn't choose group for you. It makes sense that a <figcaption> should be a group role, so perhaps the html spec should change to say that, but until then, it's not correct for a default role to be chosen by the browser.

Now, if all that makes sense, that firefox and chrome are (incorrectly) choosing a group role for you, when you navigate into a group using the tab key, the group name is announced first and then whatever element you landed on is announced next.

The group name, in this case, is all the text contained in the <figcaption> . That means the link text, "example title", as well as the date, "september 24, 1999". And then the element your focus moved to is a link contained in a heading so the link text is (correctly) announced as "example title". So in all, I hear " Example Title September 24, 1999 grouping , Example Title, link, heading level 3 ".

That is, you hear two things announced, the group name and the element that received focus.

If you navigate using the screen reader DOM navigation keys (up/down keys), then you do not hear your link text twice. You navigate into each element separately.

The end result is that you should not have to do anything to fix this. Your code is correct and it's a bug in the browser. However, if you wanted to hack around the problem, you could give the <figcaption> a specific role of group and not give it an aria-label . That prevents your figcaption from being read as a grouping label, but again, I would not recommend doing this.

If you're curious why this hack works, if you give an element a role but do not give the role a label (via aria-label or aria-labelledby ), then most browsers will not surface the role of that element so the screen reader will not read it.

Update:

I forgot to comment on the "clickable" issue. That is NVDA letting you know that an element or its parent or someone up the ancestor tree has a click handler when a click is not normally handled. For example, if you have a <div> or an <h2> or a <p> or some other non-interactive element that has an onClick handler, those are not normally interactive elements so NVDA is letting you know you can select that element.

You can see more details on https://github.com/nvaccess/nvda/issues/7430#issuecomment-318984375