Accessibility of the section element

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…).

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?

Without a bit of help (specifically an attribute), the <section> element presently does not 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 heading elements of a web page are exposed to users of AT.

That said, the <section> 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 (the intent here being that other more specific landmarks be used before implementing a generic region). But while the <section> is an implicit region, this too will not be exposed by browsers to AT, unless the element is explicitly given an accessible name.

To provide the <section> an accessible name, you could 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 (note: 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 rather exposes it as a role=group instead. 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, it can be used for other programmatic purposes, and be helpful when parsing markup to indicate explicit sections of content, rather than just relying on a bunch of <div>s and classes to hopefully communicate structure to your fellow developers.

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 the benefit that landmarks can provide 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, and even their specific levels, to quickly access these different areas of your page as well.

More reading


Print Share Comment Cite Upload Translate
APA
Scott O'Hara | Sciencx (2024-03-28T16:02:38+00:00) » Accessibility of the section element. Retrieved from https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/.
MLA
" » Accessibility of the section element." Scott O'Hara | Sciencx - Friday July 16, 2021, https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/
HARVARD
Scott O'Hara | Sciencx Friday July 16, 2021 » Accessibility of the section element., viewed 2024-03-28T16:02:38+00:00,<https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/>
VANCOUVER
Scott O'Hara | Sciencx - » Accessibility of the section element. [Internet]. [Accessed 2024-03-28T16:02:38+00:00]. Available from: https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/
CHICAGO
" » Accessibility of the section element." Scott O'Hara | Sciencx - Accessed 2024-03-28T16:02:38+00:00. https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/
IEEE
" » Accessibility of the section element." Scott O'Hara | Sciencx [Online]. Available: https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/. [Accessed: 2024-03-28T16:02:38+00:00]
rf:citation
» Accessibility of the section element | Scott O'Hara | Sciencx | https://www.scien.cx/2021/07/16/accessibility-of-the-section-element/ | 2024-03-28T16:02:38+00:00
https://github.com/addpipe/simple-recorderjs-demo