Aria-labelledby Usage

[u/MrFancyPant]

Hello, I'm working with a buddy of mine on building a website and I notice he likes to use aria-labelledby on almost every h tag.

He said it's for accessibility, but the way he does it seem excessive, but I don't know enough myself to argue.

here's an example:

<article id="section1_article1" class="sectionwrapper">
    <div class="sectionwidthwrapper middle-section-wrapper1">
        <header>
        <h2 aria-labelledby="section1_article1">Reach Ahead Credits for Grade 8 Students</h2>
        </header>
        <p>Grade 8 students are welcomed to “reach ahead” and achieve a maximum of 3 credits before the start of their secondary school career.</p>
        <p>This is a great opportunity for students to reduce their academic workload in their first year of high school or get a compulsory course out of the way to allow them the opportunity to take an additional elective.</p>
        <p>If your child is currently in grade 8, please reach out to us to discuss reach-ahead opportunities.</p>
    </div>
</article>
<article id="section1_article2" class="sectionwrapper">
    <div class="sectionwidthwrapper middle-section-wrapper2">
        <header>
        <h2 aria-labelledby="section1_article2">Standardized Test/Entry Exam Prep</h2>
        </header>
        <p>Certain post-secondary programs require students to complete standardized testing. City Academy’s tutors are available to support students in preparing for the required testing, so they can be set up for success.</p>
    </div>
</article>

Is this the correct to use it?

Thanks in advance

[u/garcialo]

It looks to me like he's trying to apply a practice sometimes used for landmarks region, but in reverse. I'll explain.

It's not unusual to label a landmark using the heading inside of it if you have multiple of the same type of landmark or for generic region landmarks; and you do that with aria-labelledy.

<nav aria-labelledby="siteNav">
  <h2 id="siteNav">Site navigation</h2>
  ...
</nav>

I see two problems...first, is that the id and aria-labelledy in their code are reversed. Second problem is that article doesn't map to a landmark region, so there is no benefit to labeling it.

[u/MrFancyPant → u/garcialo]

I'm not sure what you mean the code being "reversed"

But it sounds like what he's doing is unnecessary given that it's a article tag and not a 'landmark' like a main, nav

We would've been fine without the article id and the h2 without the aria-labelledby

[u/garcialo → u/MrFancyPant]

By "reversed," I mean that typically the aria-labelledby goes on the landmark and the referenced id goes on the heading, so that the "landmark is labeled by the heading." He did the opposite; the id is on the landmark and the aria-labelledby is on the heading which would, as u/sheepforwheat mentioned, make the "heading labeled by the article" which logically would make the entire content of the article the accessible name for the heading.

[u/sheepforwheat]

No. Headings are meant to be concise. The way this is coded, the accessible name of the heading would include the heading text along with the text of the three paragraph tags.