Kevin Powell - Community•10mo ago

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•10mo 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•10mo 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•10mo 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•10mo 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

Gaming

Programming

Section