The <section> element semantically represents a grouping of content that has an overarching theme. It is one of the HTML elements that represent sectioning content, where these elements are meant to 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 gets 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).
<section>, what’s it good for?
The <section> does not presently expose any of its intended semantics, as defined in the HTML specification, to assistive technologies. It also does not have any impact on how the document outline or how any <h1> elements within a <section> are exposed. Multiple <h1> elements, even when contained within a <section> will still continue to be exposed as level 1 headings, even if their User Agent styling changes. Note: the widely accepted best practice is that a single <h1> be used to indicate the primary topic of the page – ideally as the first element of the <main>.
All that said, the <section> element is not completely devoid of practical use for accessibility. The element does represent an implicit ARIA role=region.
A region is a type of generic landmark element, which can be used when no other more appropriate landmark element is appropriate (ideally a more specific landmark be used before using a generic region). But while the <section> is an implicit region, this role will not be exposed by browsers to AT, unless the element is explicitly 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. As such a scenario would add a lot of verbosity to a page and result in a deluge of unnamed generic landmarks, a <section> will not be exposed as a region landmark unless it is explicitly given a name.
To name a <section>, provide it one of the following attributes (listed in order of preference, with the third option being the least optimal):
aria-labelledbyaria-labeltitle(note: Safari on macOS oddly doesn’t expose the<section>’sregionrole when named via atitle. It does use thetitleas the accessible name, but rather exposes it as arole=groupinstead. Bug? Feature? Meh?)
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 areas of your page.