Semantics

A landmark that is designed to be complementary to the main content that it is a sibling to, or a direct descendant of.

Additional info from the ARIA specification

The contents of a complementary landmark would be expected to remain meaningful if it were to be separated from the main content it is relevant to.

There are various types of content that would appropriately have this role. For example, in the case of a portal, this can include but not be limited to show times, current weather, related articles, or stocks to watch. If the complementary content is completely separable from the main content, it might be appropriate to use a more general role.

Assistive technologies SHOULD enable users to quickly navigate to elements with role complementary. user agents SHOULD treat elements with role complementary as navigational landmarks. user agents MAY enable users to quickly navigate to elements with role complementary.

Abstract Role

  • LandmarkRepresents a top-level section of a page, relevant to a specific purpose, that a user may want to scan for quickly and could appear in a site map or table of contents.

Content Categories

  • Flow ContentAn element that structures and organizes the body of a web document.

Allowed Descendants

Flow Children Allowed

No main element descendants allowed.

Usage

Allowed HTML elements

Implicit semantics

These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.

  • aside

Explicitly allowed

  • section[role=complementary]

Elements that can have any role

  • abbr[role=complementary]
  • address[role=complementary]
  • b[role=complementary]
  • blockquote[role=complementary]
  • canvas[role=complementary]
  • cite[role=complementary]
  • code[role=complementary]
  • custom-element[role=complementary]
  • data[role=complementary]
  • del[role=complementary]
  • dfn[role=complementary]
  • div[role=complementary]
  • em[role=complementary]
  • figure[role=complementary]
  • i[role=complementary]
  • ins[role=complementary]
  • kbd[role=complementary]
  • mark[role=complementary]
  • output[role=complementary]
  • p[role=complementary]
  • pre[role=complementary]
  • q[role=complementary]
  • samp[role=complementary]
  • small[role=complementary]
  • span[role=complementary]
  • table[role=complementary]
  • tbody[role=complementary]
  • tfoot[role=complementary]
  • thead[role=complementary]
  • time[role=complementary]
  • u[role=complementary]
  • var[role=complementary]