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?
And also for sections and articles. i have learned that you write it like this to keep it semantic:
And not write it like this:
Is both ways of using article/section valid for semantic wise?
4 Replies
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
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
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 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.
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