The <aside> Element
As defined in the HTML Living Standard, the <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
The main content of the article continues here. The pull quote to the right is wrapped in an <aside> tag because it is supplementary to the main narrative.
<article>
<p>Main content here...</p>
<aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">Semantic HTML Guide</a></li>
</ul>
</aside>
</article>
View HTML Living Standard: The aside element
Accessibility Landmark: complementary
In many browsers and assistive technologies, the <aside> element is mapped to the ARIA role of complementary.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information and relationships conveyed through presentation can be programmatically determined.
Using <aside> tells a screen reader user that the content is a sidebar or callout, separate from the primary flow. This allows users to jump directly to or skip over these sections using landmark navigation.
Bypassing Blocks
Because <aside> is a sectioning landmark, it contributes to meeting requirements for keyboard navigation.
WCAG Requirement: Bypass Blocks
Success Criterion 2.4.1 (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
While skip links are the primary mechanism for SC 2.4.1, correctly defined landmarks (like those created by <nav>, <main>, and <aside>) provide an additional, powerful way for users to bypass content.
When to use (and when not to)
- Use for: Sidebars, pull quotes, related advertising, groups of nav links that are tangential, or callout boxes.
- Do NOT use for: Parenthetical phrases within a sentence. Use standard parenthesis or the
<small>tag for that. - Landmark Tip: If you use multiple
<aside>elements on a single page, provide each with a uniquearia-labeloraria-labelledbyto help users distinguish between them.