The aside element

If you’re reading these HTML element guides alphabetically, you will have already read about <article> and learned what a sectioning element is. If you’re embracing chaos and reading these element guides in a random order, then I salute you and wish you the best of luck.

Like <article>, <aside> is a sectioning element. What the hell is that? There is surely no way of knowing (read the guide on the <article> element). Unlike <article>, <aside> is also a landmark. Not all sectioning elements are landmarks and not all landmarks are sectioning elements. Some sectioning elements can evolve into landmarks under specific conditions, like extremely boring Pokemon.

To make matters even more complex, landmark elements actually started out as attributes. Some remain only as attributes. Around 2008, a suite of HTML attributes under the name ARIA (Accessible Rich Internet Applications) came along. Why? Because somebody noticed developers had started to make Applications with some complex and Rich functionality and were choosing to disseminate these Rich Applications over the Internet.

If only these Rich Internet Applications could be Accessible too, then we could use the acronym ARIA and evoke a self-contained piece for one voice found in operas, oratorios, and cantatas. An oddly specific objective but a win for civil rights.

The purpose of these ARIA attributes is to add accessible information about a web interface not provided by the underlying HTML. More accurate and detailed accessible information (as consumed by software like screen readers) can mean a better parity with how the visual interface is experienced.

Unfortunately, it’s not well understood that “native” HTML already offers considerable accessible information. Believing ARIA is the only way to make HTML accessible, many a developer will put ARIA attributes absolutely everywhere, including in all the wrong places. Well meaning but chaotic—like reading about HTML elements, albeit in the wrong order.

But I digress. In ARIA, the role attribute is used to define the kind of element it’s attached to. Many native elements already have implicit roles. The role attribute adds a role where there isn’t one or overrides an existing implicit role. The attribution role="complementary" explicitly defines a complementary landmark; the <aside> element has an implicit complementary landmark role.

Maybe try reading that paragraph again, I know I had to.

<aside>...</aside>

<!-- is the same as ↓ -->

<div role="complementary">...</div>

Why do we have both role="complementary" and <aside>? Because role="complementary" turned out to be such a good idea, it got immortalised as its own element. In other words, it went native. The reason we still hold onto role="complementary" is because some pages were written before <aside> became available (and we can’t expect everyone to find the time to update their HTML—not with all that JavaScript they’ve yet to wrangle).

So what is a landmark anyway? A landmark is an element that defines a major part of your page and interface. Every part of your interface should belong to one landmark or another. Landmarks are important for accessibility because they help screen readers map the interface. Which helps screen reader users navigate it.

When bloggers first started writing about landmarks, you’d see this one diagram everywhere, mapping out where all the landmarks should go. Boxes labelled “header” and “nav” would take up the top of the diagram and “footer” the bottom. Sandwiched in the middle, you’d see one wide column labelled “main” and a narrower “aside” next to it.

While this ubiquitous diagram put forward an entirely feasible and legitimate way to lay out a web interface, it was also too prescriptive. Not all landmarks have to appear in those places, visually. Some types of landmark can appear more than once. Some landmarks can belong to other landmarks, sometimes, if you feel like it.

Semantically speaking, the <aside> is specified to carry “content that is tangentially related” to the main theme of the page: supplemental or background information. What the spec’ does not say is this: “In all cases, the <aside> must take the graphical form of a ‘sidebar’ and sit to one side of the main landmark.” But that’s how that damned diagram got us thinking.

For what it’s worth, I use <aside> in a couple of different ways not covered by the ubiquitous diagram.

For one, I like to group notifications inside an <aside> element. Accessible notifications should be announced in screen reader software as soon as they appear on the page. This creates a parity between the visual and non-visual experience. However, since announcements are temporal, they can be easily missed or forgotten. By wrapping the notifications in an <aside> element, they are discoverable: a screen reader user can navigate to the <aside> landmark to read them back again.

<aside aria-label="Notifications">
  <div role="status">
    <ul>
      <li class="notification">Someone has logged into your account.</li>
      <li class="notification">Oh right, that was you.</li>
    </ul>
  </div>
</aside>

(Note: role="status" marks what is called an ARIA “live region”. This is what makes the screen reader announce the notifications as they are added.)

The aria-label part is important because it differentiates this <aside> landmark from any others on the page. Some types of screen reader software create a menu from your landmarks. “Notifications” would be the label for this option in that landmarks menu.

When you think about it, a whole lot of the accessibility (as well as the general parsability) of HTML comes down to labels. A simple text node is often a label. A heading is a type of label for a section. You also have auxiliary attributes for labelling like aria-label. Even a role—implicit or explicit—is a kind of label, because it tells you what the element is. “This <button>? Yeah, you’re not going to flipping believe this but... it’s a button.”

Ironically, one of the few things not used for labelling is the <label> element. I LIED! That’s for labelling too! We have fun.

Not everyone is a fan of my writing. But if you found this article at all entertaining or edifying, I do accept tips. I also have a clothing line: