Summary

Marking secondary content with the aside element enables assistive technologies to distinguish it from the primary narrative, allowing users to skip over the material.

Note

The default nature of the aside element is changing. asides without an accessible name that are within a section element will no longer be considered complementary landmarks. They will instead be considered generic elements (i.e., the same as div elements).

This page will be updated once this change gets real-world implementation. For now, the guidance on this page remains current best practice.

Techniques

Examples

Example 1 — A sidebar

The sidebar heading is one level lower than its containing section.

<section …>
   <h2 id="s02">Section 2: The War of 1812</h2>
   …
   <aside aria-labelledby="sb01">
      <h3 id="sb01">Timeline of Events</h3>
      …
   </aside>
   …
</section>
Example 2 — A footnote

The role doc-footnote means the aside does not require an accessible name.

<aside
    role="doc-footnote"
    id="fn01">
   <p>[1] …</p>
</aside>

Frequently Asked Questions

Why don't sidebars need a role?

The aside element, per the HTML specification definition, defines sidebars:

The aside element represents a section of a page that consists of content that is tangentially related to the content … [s]uch sections are often represented as sidebars in printed typography.

Adding an additional role will not improve the accessibility.

What heading level should I use with asides?

Although the positioning of supplementary content in the markup is not fixed in the same way as the primary narrative (i.e., where best to place the content is often a matter of choice), supplementary content always belongs to a section. For that reason, it should be treated as a subsection of the section that contains it. Consequently, the first heading level within an aside should always be one level lower than its containing section.

For example, if a chapter has a heading in an h2 tag, the headings of any sidebars within it should begin with h3. This helps ensure that users of assistive technologies can logically find these subsections of content when navigating by heading level. A user will not expect a sidebar to have an h1 heading in such a scenario, as that would make it a higher-level content section.

If a publisher cannot maintain heading numbering consistency, they should try to find another method that users can predict. For example, using h6 for all sidebars. In this case, though, the publisher should instruct users on this convention; for example, in a section on how to use the ebook.

While numbering gaps and inconsistent numbering of headings is technically not a failure of WCAG requirements, it also doesn't make for a great reading experience for users who need to move around by heading.

Do sidebars require accessible names?

It depends on how many there are in a document.

If a document only has one aside element without a role, then an accessible name is not required.

If there is more than one, however, then without an accessible name to differentiate them, users cannot determine which is which without navigating to each in turn.

(Note that this is the same rule for adding accessible names that applies to any landmark role.)

Should I use aside or article?

The aside element is best used when the content is explains or expands on the primary narrative. It is most appropriate for sidebars, glossaries, and similar explanatory content.

The article element is best used when the content is independent from the other content of the document or publication. In a scientific journal, for example, each article is independent of the others, even if they have a common theme.

Why don't all roles require an accessible name?

When used on an aside, roles such as doc-footnote and doc-pullquote change the nature of the element from its default of a complementary landmark. Since the aside is no longer recognized as a complementary landmark when these roles are applied, it does not require an accessible name.

When using roles, refer to their definitions to determine whether they require accessible names.

Explanation

The aside element was introduced in HTML5 to allow authors to identify secondary content such as sidebars. When users of assistive technologies encounter an aside, the content is typically introduced as "complementary", allowing them to recognize that it is not part of the primary narrative.

Prior to the introduction of this element, background coloring and borders were often the only way that secondary content was distinguished from the primary narrative. These methods are opaque to assistive technologies, however, so it was often confusing why the narrative would suddenly change when a sidebar did not have a heading, and was not always clear if a new section of primary content were beginning if it did have a heading.

Using the aside element not only offers users the ability to skip the content when reading, but being complementary landmarks they are also able to easily find and return to the content after finishing the section. Each sidebar requires an accessible name for this feature to be most effective, otherwise users will not be able to distinguish one sidebar from the next.

Related Links