WCAG and screen readers - Label a <section> with an <h> tag, and not have the label read twice

Question

I've been bringing some sites into WCAG 2.1 AA compliance. In the interest of having easy navigation, I've separated page content into relevant <section> tags, and also provided an <h> tag, to allow screen readers to navigate both through landmarks and headers. I then use the <h> as a label for the <section>, using aria-labelledby. Problem is, at least in Chrome with NVDA, when navigating by landmarks or headers it reads out the label twice. If I remove aria-labelledby from the <section>, it skips the section.

Am I being overzealous with my labeling, or is some redundancy to be expected? I don't want to remove the <h> tags (which are hidden visually and just for screen readers), as maybe some people prefer to navigate through headers.

I could move the <h> to the bottom of the <section>, and then NVDA just reads the first line of actual content. That would sort of work, but I don't love structuring the DOM like that. (Plus then screen readers encounter the header at the bottom, which is confusing.)

Is there a way to have a label only read once, when it's the first piece of content in a <section> it's labeling?

If you are using aria-labelledby, the screenreader will read that label and then it will read the physical <h> tag. I don't know a way you could conditionally skip the <h> when it is being read by sections and skip the <section> when traveling through headings. — Jennifer Goncalves

slugolicious slugolicious · Accepted Answer · 2019-02-14T04:18:27

So you have something like this?

<section aria-labelledby="h2id">
  <h2 id="h2id">hello</h2>
  <!-- other stuff -->
</section>

When I navigate by landmarks with NVDA (D key), both Chrome and Firefox will say "hello region, hello, heading level 2"

Similarly, if I navigate by headings (H key), I'll hear the same thing.

That's strange.

If I inspect the accessibility tree in Chrome's devtools, the <section> shows:

Name: "hello"
  aria-labelledby: "hello"
  aria-label: Not specified
  title: Not specified
Role: region
Labeled by:

So that looks correct. The accessible name of the landmark is just "hello", which is exactly what the "Accessible Name and Description Computation 1.1" says it should be. I'm not sure why the heading is also read.

The same problem exists with VoiceOver on iOS. Both the region and heading are read when I navigate by landmarks or headings (via the rotor).

I don't have JAWS but if you have access to it, try it there too.

I would leave it alone. The html seems correct. A little extra verbosity is probably ok given the advantage of navigating by landmarks and headings.

WCAG and screen readers - Label a <section> with an <h> tag, and not have the label read twice

1 Answers