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.
- Don’t use it if you don’t have to.
- Always include a heading as a child elment within the <secion>
- Only use it to group content that is similar in theme.