Aria-practices: Add aria-labelledby on every section which already has a visible heading?

[ianthedev]

Hi folks. Are we recommended to add aria-labelledby on every section element which already has a visible heading element?

Please review the following example code. In the code, there is the main element. And the main element contains a section element, which has a h1 element. The h1 element is followed by three section elements, each has a h2 element. Other contents are represented by horizontal ellipses because they are not the point. As illustrated, I'm using aria-labelledby on all of the four section elements to demonstrate my question. Is such a use of aria-labelledby recommended or is it redundant or problematic?

```HTML

About Us

Who We Are

...

What We Do

...

Our Vision

...

````

[LaurenceRLewis]

You don’t need the aria-labelledby because you have the headings < hx > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

[ianthedev]

@Decrepidos Thanks. So aria-labelledby in this case is completely redundant to screen reader users. I won't use it then.

[LaurenceRLewis]

@Ian-Y Yes, because there is a heading level within the section. The only thing I don't agree with is using multiple H1 on a page as in the MDN example, but that's my personal opinion. :-)

[jnurthen]

@Decrepidos Thanks. So aria-labelledby in this case is completely redundant to screen reader users. I won't use it then.

No. If you have a region (or HTML section) with an accessible name (whether from aria-label or aria-labelledby then that region becomes a landmark and will appear in the list of landmarks for a screen reader.

If the section should be a landmark then you should add a name - if it should not be a landmark then you must not - but whether a region is named or not is not completely redundant to a screen reader user.

See https://w3c.github.io/aria-practices/#aria_lh_region

[jnurthen]

I'm going to close this - I don't really see an issue with the APG text. If there is something concrete that is missing please reopen.

[LaurenceRLewis]

@jurthen thanks. True if an accessible label is added it displays in the regions list. However IMO there would need to be a good reason for the section to be a landmark region and this could lead to many regions being announced by a screen reader. I have experienced this and it can be very annoying 😬. I find it best not to make [asides] (as pointed out by @jnurthen an aside is a complimentary region) and sections regions.

[jnurthen]

@Decrepidos It depends what the purpose of the region is. Landmarks should not be overused or they become useless. In the example above I agree these should not be landmarks.
Note - an aside is ALWAYS a landmark unless you were to add role=none. The only role which changes whether it is a landmark or not by whether it has a name is role=region or section

[LaurenceRLewis]

@jnurthen my bad, absolutely, asides are complementary regions :-) thanks for correcting me. If not labelled are listed as a complementary region so need a label to differentiate.

[ianthedev]

Thanks folks. I would like to add that aside is also not a landmark when it has role="note".

[jnurthen]

Thanks folks. I would like to add that aside is also not a landmark when it has role="note".

Sure - roles override native semantics. It would not be a landmark if I put role=button on it either - but I would not recommend it!

I think this issue is closed.

[ianthedev]

@jnurthen I knew this issue is closed. Please be humble.

[carmacleod]

@Ian-Y @Decrepidos You may want to subscribe to https://github.com/w3c/aria/issues/899 to see what happens there. However, please note my comment in that issue regarding not automatically adding name for section elements because it turns them into landmarks.

[ianthedev]

@carmacleod Thanks. I just subscribed to it. By the way, it's elusive to me that W3C specifically made section (or role="region") behave in such a particular way.

[stevefaulkner]

@Ian-Y the story behind that was <section> orginally mapped to region but was being misused/overused which screen reader users complained about (too much noise) so it got modified to be more useful/less annoying.

[ianthedev]

@stevefaulkner Thanks. So originally section and role="region" were all landmarks by default and caused inconveniences to screen reader users, and then it was changed to how it is now. That's understandable.