A "section" without an accessible name is nothing but a "div"

I was reading Vadim's post on color theme switching when I discovered an interesting code snippet.

<section aria-label="Color scheme switcher">
  <button aria-pressed="false" value="light">
    Light
  </button>
  <button aria-pressed="true" value="light dark">
    Auto
  </button>
  <button aria-pressed="false" value="dark">
    Dark
  </button>
</section>

The HTML for his color theme switcher includes three buttons, and each signals its state with aria-pressed. So far, so good. But did you notice the section element? Why does Vadim use a <section>, and why does it include an aria-label?

I have known about the <section> element for many years, but I must admit that I rarely use it. So, I did some digging. Here's the <section> definition from MDN:

Overall, this definition isn't helpful, but to find some answers Bruce's article on article and section elements is golden. Unfortunately, the post has some broken images, but it's still great!

Here's the tl;dr:

The <section> element was introduced to support the idea of a document outline, which would have enabled "smart headings". An HTML document with multiple <h1>s would be fair game if nested correctly in sectioning elements. Unfortunately, browsers never implemented this document outline functionality. So, usually, you don't need to bother thinking about sections, unless...

... you want to signal to a screen reader user where an important section begins and ends. Bruce's article showcases the summary of Smashing Magazine articles.

<!-- Summary on Smashing Magazine -->
<section aria-label="Quick summary">
  ...
</section>

When you inspect the summary's HTML, you'll discover that the element has a properly accessible name defined via aria-label and the role region thanks to the <section> element.

The accessible name and role are important for assistive technology.

Whenever the browser parses HTML, it'll first create the DOM tree and then use the DOM tree to provide a content representation that can be used by assistive technologies — the accessibility tree. Similar to the DOM tree, the accessibility tree contains nested objects that then include a name, description, and role, among other things.

To take an example from MDN:

<button aria-describedby="trash-desc">Move to trash</button>

<p id="trash-desc">
  Items in the trash will be permanently removed after 30 days.
</p>

This HTML button has the name "Move to trash", the description "Items in the trash will be permanently removed after 30 days." and the role button. This information is represented in the accessibility tree and can be picked up by assistive technology.

The role property generally describes whatever "a thing" is, and all the roles are grouped into six categories:

• Abstract Roles
• Widget Roles
• Document Structure Roles
• Landmark Roles
• Live Region Roles
• Window Roles

The <section> HTML element is mapped to the region role and is part of the landmark roles.

Landmark roles define landmark regions and enable assistive technology like screen readers to navigate your HTML document. For example, here's a screenshot of how I can use VoiceOver to navigate all landmarks on this site.

Pretty cool. Only a few HTML elements default to landmark roles, though.

• banner — <header>
• complementary — <aside>
• contentinfo — <footer>
• form — <form>
• main — <main>
• navigation — <nav>
• region — <section>
• search — <search>

And there's a catch: some of these HTML elements only become landmarks under certain conditions. For example, forms are only exposed as landmarks when they have an accessible name, and today I learned that the same applies to section elements.

A <section> only gets the role region (and becomes a navigatable landmark) if it has an accessible name. Otherwise, its role will be generic. Do you know what elements have the generic role? <div> and <span>, they're just generic container elements.

For the article summary (and the color theme switcher), this means that without the aria-label the section will not be exposed as landmark.

And without an aria-label or aria-labelledby, <section> elements become nothing but generic containers that won't be accessible via landmark navigation.

Where does this discovery bring us?

1. Generally, you can forget about sections because they were introduced to support the outline algorithm, which never went anywhere.
2. If you want to expose an important area on your site, check if you can set a landmark with a fitting element (<nav>, <header>, etc.)
3. If nothing fits, use <section>, but remember to provide an accessible name via aria-label or aria-labelledby. Otherwise your section won't provide an accessibility benefit.

Now, be aware that I'm no accessibility expert, and I only tested the landmark navigation in VoiceOver. But I think the spec is very clear on this topic. Regardless, my inbox is always open if you have any corrections or feedback.