Aside

Referred HTML Tags

<aside>

Essential A11y Requirements

Context

The <aside> element should act as a supporting section of the document, because its content should be complementary to the main content. It is therefore expected to be on the same level as the main content (e.g., <main>). The <aside> element should be able to stand by itself but its content, however, is expected to be with the context of the main content. If the <aside> content is completely separable from the main content, you may want to consider a more general container such as <div> or <section>.

Accessible name

The <aside> element does not require a n accessible name. However, it is also not constrained to be unique on the page, so in cases where there are more than one <aside> element, it will be a good idea to label each of them with a name that implies the type of content within it. You can add an accessible name to <aside> elements using one of the WAI-ARIA’s labeling attributes, e.g., aria-label, aria-labelledby.

1<aside aria-label="Related Articles">
2    <!-- aside content -->
3</aside>
4
5<aside aria-labelledby="aside-2-heading">
6    <h2 id="aside-2-heading">Upcoming Events</h2>
7    <!-- aside content -->
8</aside>

Learn more about accessible names here

Equivalent WAI-ARIA Role

role=”complementary”