Does a Section element need aria-labelledby to be accessible?
Hello,
I’m trying to make sure my <section> elements are accessible for assistive technology users.
My question is: does a <section> tag need an aria-labelledby to be recognized as a landmark, or will any <h1>–<h6> heading inside the section automatically provide that accessible name?
For example, I have code like this:
<section class="hero">
<h1>Design solutions made easy</h1>
<p>With over ten years of experience in various design disciplines, I’m your one-stop shop for your design needs.</p>
</section>
When I inspect the accessibility tree, the section shows up as “Generic,” and the heading is listed separately. I thought headings inside a section would automatically label it.
Firefox accessiblity tree:
Generic: ""
Heading: "Design solutions made easy"
Text leaf: "Design solutions made easy"
Could someone clarify whether I need to explicitly use aria-labelledby here, or if my code is already accessible?
Thanks in advance!
I’m trying to make sure my <section> elements are accessible for assistive technology users.
My question is: does a <section> tag need an aria-labelledby to be recognized as a landmark, or will any <h1>–<h6> heading inside the section automatically provide that accessible name?
For example, I have code like this:
<section class="hero">
<h1>Design solutions made easy</h1>
<p>With over ten years of experience in various design disciplines, I’m your one-stop shop for your design needs.</p>
</section>
When I inspect the accessibility tree, the section shows up as “Generic,” and the heading is listed separately. I thought headings inside a section would automatically label it.
Firefox accessiblity tree:
Generic: ""
Heading: "Design solutions made easy"
Text leaf: "Design solutions made easy"
Could someone clarify whether I need to explicitly use aria-labelledby here, or if my code is already accessible?
Thanks in advance!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
