Section

I have always learned that the html element section needs a aria-labelledby to be semantic, and without it, it becomes just like a normal "div" Do you still need the "aria-labelledby" to make a section semantic?
<section aria-labelledby="test">
<h1 id="test"></h1>
</section>
<section aria-labelledby="test">
<h1 id="test"></h1>
</section>
And also for sections and articles. i have learned that you write it like this to keep it semantic:
<article>
<section></section>
</article>
<article>
<section></section>
</article>
And not write it like this:
<section>
<article></article>
</section>
<section>
<article></article>
</section>
Is both ways of using article/section valid for semantic wise?
4 Replies
Gashy
Gashy15mo ago
As far as im aware you can use articles and sections in either order, and a section is still semantic if it includes a heading regardless of the aria label, I think this attribute is more reserved to things that may not have a heading inside it. for example a nav might have a title inside it which is a p tag, but you can assign a descriptive link between the two
<nav aria-labelledby="idreference">
<p id="idreference">Company</p>
<ul>
...
</ul>
</nav>
<nav aria-labelledby="idreference">
<p id="idreference">Company</p>
<ul>
...
</ul>
</nav>
HiKKe3
HiKKe315mo ago
so it has changed from the video KP put up last year i guess on the section and semantic stuff, since there KP mentioned that aria-labelledby is what makes the section semantic and without it, it basicly becomes a <div> Thats why im so confused, since most developers i know said like you said @gashy but me and one other developer on my work both have learned that about section it needs the aria-labelledby, and then i found the video of KP and we watched it, so i got more confused on whats correct and not haha
Gashy
Gashy15mo ago
Might be possible that it had less native browser support back then maybe, I think on the spec and mdn they dont use the aria-labelledby https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section https://html.spec.whatwg.org/multipage/sections.html#the-section-element But A11Y in itself is quite an iceberg of a topic, so you are doing the right thing and asking around. If I am incorrect (which there may be a chance that I am Kappa I'm sure someone will correct me or add onto this
: The Generic Section element - HTML: HyperText Markup Language | MDN
The HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
Gashy
Gashy15mo ago
There is a post by Erick I think, that actually has a bunch of A11Y resources in #resources that will probably be your best starting point https://discord.com/channels/436251713830125568/1090726078164779019
Want results from more Discord servers?
Add your server