The <section> element semantically represents a generic grouping of content with an overarching theme. It is one of the HTML elements categorized as sectioning content, where these elements define the semantic scope of their (potential) descendant headings (<h#> elements) and <footer>s (oddly not <header>s though. huh. anyway…).

There are a bunch of examples I could outline and provide a deeper dive into what the <section> element semantically represents and what it is meant to convey… but in regards to the accessibility of this element, it would all be moot.

Consider the following markup:

<!-- example 1 -->
<section>
  <h2>Hi there</h2>
  ...
</section>

<!-- example 2 -->
<div>
  <h2>Bye there</h2>
  ...
</div>

As far as what is programmatically exposed to assistive technologies (AT), there is no discernible difference between the <section> and <div> that contain their respective <h2> elements. Semantically, the <section> specifies an explicit “section” in the document outline, but this is not actually exposed in reality. Rather, the meaningful elements here are the headings which implicitly indicate a new section (or sub-section depending on the heading’s rank) of content.

<section>, what’s it good for?

The <section> does not presently behave the way it is defined in the HTML specification. Specifically, its use does not alter the document outline or dynamically change the heading levels of <h1> elements within a <section>. Multiple <h1> elements used in a page, even when descendants of a <secton>, will continue to be exposed as level 1 headings. Their User Agent styling will change, but this change is only superficial.

Due to <section> elements having no impact on heading levels, it is a widely accepted accessibility best practice to only use a single <h1> to indicate the primary topic of the page. Ideally this <h1> would be the first descendant element representing content of the <main> element.

All that said, the <section> element is not completely devoid of use for accessibility. The element does represent an implicit ARIA role=region under certain conditions.

A region is a type of generic landmark element, which can be used when no other more appropriate landmark can be specified. For instance, you might have an important part of a web page or web app interface that needs to be highlighted, but it doesn’t neatly fall into a navigation, complementary, search or form. A region could be useful in this case.

To expose a <section> element’s implicit region role, it must be given an accessible name. This is purposeful and expected behavior for the element, as otherwise – without a name – there could be various unnamed region landmarks on web pages. Such a scenario would add a lot of verbosity to a page and result in a deluge of unnamed generic landmarks. That wouldn’t be pleasant, hence why <section> behaves this way.

To name a <section>, provide it one of the following attributes (listed in order of preference, with the third option being the least optimal):

  1. aria-labelledby
  2. aria-label
  3. title
Safari on macOS oddly doesn't expose the <section>'s region role when named via a title. It does use the title as the accessible name, but instead exposes the element as a role=group. Bug? Feature? Meh... just don't use a title anyway. It is a rubbish attribute.

Use with purpose

Use the <section> element as semantically appropriate. Semantic markup, regardless of whether it is always exposed to assistive technologies is meaningful. At the very least the element can be used for other programmatic purposes. And its use can help other developers more quickly understand the structure of a web page, rather than having to rely on a bunch of <div>s and classes to hopefully understand the intended structure.

Regarding the <section> element’s implicit ARIA role, it is best named – thus exposing its role – only when absolutely necessary. Overpopulating a web page with landmarks will reduce their ability to help users find the most important parts of web pages. In other words, if everything’s a landmark then there’s nothing really special about them, is there? Instead, rely on proper heading levels to indicate implicit sections and sub-sections of your content. People using a screen reader, for example, can navigate by these headings (commonly the H key), and even their specific levels (1 to 6 keys), to quickly navigate to these different sections of your page.

More reading