角色地标

`complementary`

用于承载与主要内容相关但本身具有独立意义的内容的地标角色——侧边栏、相关文章栏、补充说明框。处于顶层的 <aside> 元素会自动携带此角色。

使用时机

将 <aside> 用于顶层侧边栏、“相关文章”导航栏、文章旁的作者简介，或”最新动态”面板。当 <aside> 是 <body> 的直接子元素（或紧邻 <main>）时，它会作为 complementary 地标对外公开。

嵌套在 <article> 内部的 <aside> 不会被提升为地标——它仍是普通的分组元素。这一区别是有意为之：complementary 地标属于页面级别；文章内部的侧边栏则不属于此范畴。

仅当无法使用 <aside>（例如使用旧版 CMS）时，才考虑在 <div> 上使用 role="complementary"。

内部内容应当辅助主体内容，但同时能够独立呈现——如果移除后页面变得不完整，则该内容可能并非补充性内容。

何时添加标签

若页面中存在多个 complementary 地标（例如左侧导航栏和右侧导航栏），应为每个地标设置唯一的 aria-label 或 aria-labelledby。若只有一个 complementary 地标，标签可省略——屏幕阅读器会将其播报为”complementary”。

常用标签示例：“Related articles”、“Tools”、“Newsletter signup”、“Recently viewed”。

常见错误

将 <aside> 用于段落正文中的内嵌说明框，粒度过细，会使地标菜单显得杂乱。
将整个网站页脚的次要链接标记为 complementary 地标。页脚级别的导航应置于 <footer> 内的 <nav> 中。
存在多个 complementary 地标却未添加标签。
将 role="complementary" 添加到页面主内容区域的 <section> 上，应使用 <main> 代替。
在 <article> 内部的 <aside> 上显式添加 role="complementary" 以强制公开地标——这通常说明相关内容应置于页面层级，而非文章内部。

示例

<main>
  <article>
    <h1>Designing for screen readers</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Related articles</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA landmarks explained</a></li>
    <li><a href="/articles/skip-links">Skip links done right</a></li>
  </ul>
</aside>