The <aside> Element — Supporting Content, Sectioning, and Complementary Mapping

Technical Summary

Normative definition and categories

The HTML Living Standard defines aside as a section of a page whose content is tangentially related to the surrounding content and could be considered separate from it. Its examples include complementary information, pull quotes, advertising, sidebars, and groups of nav elements. The examples do not mean every item in those visual or business categories should use aside; check whether the content works as separate supporting material in context.

Boundaries with section, article, and figure

Distinguish aside from other Sectioning content by the role of the group, not by its size or appearance. The elements are not mutually exclusive. For example, an aside can appear inside an article as supporting information for that article.

The Standard's sidebar example does not mean every box placed beside content is an aside. Changing CSS placement does not change HTML meaning. Keep a restatement or parenthetical phrase that belongs in the text's flow within that text.

Example and semantic scope

<main>
  <h1>Check the Mountain Forecast</h1>
  <article aria-labelledby="forecast-title">
    <h2 id="forecast-title">Afternoon Forecast</h2>
    <p>The forecast calls for stronger winds in the afternoon.</p>
    <aside aria-labelledby="wind-note-title">
      <h3 id="wind-note-title">About the Wind</h3>
      <p>Wind can feel stronger near the summit than at lower elevations.</p>
    </aside>
  </article>
</main>

Here, article represents one forecast, and aside represents information that supports the forecast. Their HTML meaning is present even if no CSS positioning is added. aria-labelledby connects the visible heading to the aside as its accessible name.

aside does not implement show/hide, collapse, side-by-side layout, or search indexing. Those behaviors require separate HTML, CSS, or JavaScript mechanisms.

Context-dependent role mapping

HTML meaning and the role exposed to assistive technology are separate layers. The HTML-AAM 1.0 Working Draft (2026-10-12) separates aside mapping by sectioning scope as follows. This is Working Draft text; it does not report observations from every browser or operating system.

Possible accessible names include referenced visible text through aria-labelledby, a non-empty aria-label, or a non-empty title. The actual name computation follows HTML-AAM and Accessible Name rules. Mapping an unnamed aside in sectioning scope to generic concerns its role in the Accessibility Tree; it does not change the DOM element.

WPT roles-contextual.html covers unnamed and named asides, empty labels, an unresolved aria-labelledby reference, and title. A separate WPT tests an aside inside an article whose HTML element has a namespace prefix. The tested files and results are pinned in Implementation Evidence.

Accessible names and landmark use

complementary is a landmark role for a supporting area of the main content. The WAI-ARIA APG says the area should relate to the main content at a similar level and remain meaningful when separated. It advises that complementary landmarks should generally be top-level rather than inside other landmarks, and that multiple complementary landmarks on a page should have different labels.

Satisfying an HTML-AAM mapping condition and choosing to add a landmark are not the same design decision. Before adding aria-label, decide whether users need to navigate to the aside as a separate landmark. An unnamed aside is not automatically incomplete.

<aside aria-labelledby="weather-note-title">
  <h2 id="weather-note-title">Reading the Forecast</h2>
  <p>The chance of rain describes the likelihood of rain during the stated period.</p>
</aside>

The heading can serve as the accessible name here because aria-labelledby references it. A heading alone does not always become the landmark name. Whether a label is needed also depends on how many such landmarks the page has.

Fact / Evidence

Evidence sources

1. HTML Living Standard: The aside element — categories, context, content model, definition, examples, and authoring note.
2. HTML Accessibility API Mappings 1.0 Working Draft, 12 October 2026: aside — context-sensitive role mapping.
3. WAI-ARIA Authoring Practices Guide: Landmark Regions — complementary landmark purpose, hierarchy, and labels.
4. WAI-ARIA 1.2: complementary role — role definition.
5. WPT html-aam/roles-contextual.html at the tested revision — contextual and named role cases.
6. WPT html-aam/aside-in-prefixed-article.html at the tested revision — an aside inside an article element with a namespace prefix.

Implementation Evidence

On 2026-11-04, Chromium 156 was used to observe the four Japanese and English pages and the aside DOM fixture. Two files from a pinned WPT revision had 34/39 assertions pass; 19/20 aside assertions passed. The remaining aside assertion concerns an aside with title="" inside Sectioning content. WPT expects generic, but Chromium's Accessibility Tree returned complementary with an empty name. Three image-related assertions and one section assertion also failed; they are recorded separately from the aside result. A Playwright / Chrome DevTools Protocol adapter supplied role queries. This was not an official wptrunner / WebDriver run.

Coverage / Open Issues

• Specification reviewedDefinition, categories, context, content model, boundaries with sectioning elements, HTML-AAM WD mapping, and complementary landmark guidance
• ObservedFour pages in Chromium 156, DOM fixture, 320–1920px widths, system / light / dark themes, and two pinned WPT files (19/20 aside assertions passed)
• Open differenceWithin Sectioning content, WPT expects generic for an aside with title=""; Chrome 156's AX Tree returned complementary with an empty name
• Not coveredFirefox and Safari; Windows UI Automation / IAccessible2; macOS AX / ATK; speech and braille output; full WPT and all HTML-AAM cases

This record is limited to one browser and selected WPT assertions. The Accessibility Tree is not itself a platform API, and speech or user comprehension was not measured. Partial observations are not generalized to other browsers or operating systems.

Related topics

• Yugien: a beginner-friendly explanation of aside
• 日本語Atlas: aside要素
• article: independent content and nesting
• section: thematic groups and headings
• figure: figures, code examples, and captions