Skip to main content

When and how to use the section element

Posted in Accessibility and HTML

HTML5 brought with it some questions, like “what on earth is a <section> element for!?”. The answer isn’t as obvious as you might have hoped, but it’s definitely straightforward.

First let’s talk about landmarks. As a sighted user, I can scan a web page and, without thinking, identify key areas (landmarks) on the page; things like:

  • The header
  • Navigation bars
  • The main content
  • A call to action
  • A filter panel
  • The footer

You may think this’d be impossible for a non-sighted user, but you’d be wrong! Screen reader users can bring up a list of the landmarks on the page and quickly skip to any one of them. If properly marked up in the HTML, some of these landmarks are added automatically by the browser; on the other hand, there are some landmarks we have to be more deliberate with.

When to use a section

The most common landmarks on a web page are the header, the main navigation, the main content area, and the footer. These all have their own HTML elements, which create landmarks on the page. For any landmarks that aren’t defined already in HTML (like the call to action or filter panel from that list above), a <section> is probably what you need.

How to use a section

A <section> element on its own doesn’t do much; it’s effectively the same as using a <div> (other than it providing ‘sectioning’ for <footer> and <header>). What we need to do is tell the browser what the section is, and we do this by labelling the section.

Visually, your section is probably going to stand out somehow; a different coloured background or some other way to distinguish it from the other content on the page. Adding a label to the section allows it to stand out to non-visual users.

Using aria-label

The first thing you might reach for is aria-label, giving the <section> a non-visual name which will be read out to screen readers:

<section aria-label="Join the mailing list">
<h2>Join the mailing list</h2>
<p>This is the section content</p>

In VoiceOver (macOS’s screen reader), this section would be read out amongst the list of landmarks as “Join the mailing list region”.

But there are problems with this method:

  1. It’s not very DRY as we’re adding the same content in two places
  2. If the <h2> (or whatever we’re using to visually label the <section>) is changed at some point, there’s a risk that the aria-label is forgotten about, creating a mismatch

When a <section> label doesn’t match its first heading, a screen reader user has to do more work to orient themselves if they jump to that particular landmark: the section was called one thing, yet its heading says another.

Using aria-labelledby

To avoid the problems inherit with aria-label on a <section>, we can use aria-labelledby instead. This way, if the section’s heading is updated, the label changes automatically:

<section aria-labelledby="sectionHeading">
<h2 id="sectionHeading">Join the mailing list</h2>
<p>This is the section content</p>

Summing up

A <section> is a custom landmark, when <header>, <nav>, <main>, <footer>, etc. aren’t appropriate. All you need to do is give it some semantic meaning with ARIA and screen reader users will be able to jump right to it, just like a sighted user can.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.