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!
1 Reply
According to the MDN technical summary of the
section element:
Implicit ARIA roleAndregionif the element has an accessible name, otherwisegeneric
generic ARIA roles don't create a landmark. So if you want it to be a landmark for assistive technologies then yes, you need an aria label of some sort.