A section is meaningless without a name

When creating a section within a document, it’s not enough just to wrap it in a <section> and walk away. Likely, you used that section to indicate that this was a specific region of content that had meaning as a group.

One thing that we know is that what the HTML5 spec expects for the <section> element and what is actually used in the wild are two different things. Basically, the <section> element semantics are not exposed without an accessible name.

Below is a codepen to test this out if you like.

If your <section> element was used with intent and purpose, then give it a name. The best way to acheive this is by using aria-labelledby to identify the child heading. If there is no heading, then you should use a concise string as the value for an aria-label attribute on the <section>

If you don’t want the section role and semantics to be recognized… then use a different element. It will be a rough day for Assistive Technology users if the roles of these elements get exposed. However, if you use an unnamed section, here are some guiding principles.

  1. Don’t use it if you don’t have to.
  2. Always include a heading as a child elment within the <secion>
  3. Only use it to group content that is similar in theme.

Leave a Reply