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>
</section>

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>
</section>

Summing up

So 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-label or (better) aria-labelledby and screen reader users will be able to jump right to it, just like a sighted user would.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

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. Setting an upstream Git branch

    There’s no such thing as syncing in Git, but setting an upstream branch is about as close as it gets.

  2. How to rename the ‘master’ branch on GitHub

    So renaming master to main is a good idea, but how do we do it? Fortunately, it’s really straightforward if your repository lives on GitHub.