role="complementary"专用于与主内容相关但可独立存在的补充性内容，如相关文章推荐、作者简介卡片等；不可用于广告位、搜索框等，应使用更精确的aria角色。
role="complementary" 该用在哪些地方
它不是给所有侧栏或右侧区块随便加的，而是专指与主内容相关、但又可独立存在、非核心的补充性内容。比如博客页右侧的「相关文章推荐」、「作者简介卡片」、「标签云」、「最新评论摘要」——这些信息能帮用户延伸理解，但删掉也不影响主任务完成。
常见误用包括：把广告位、全局搜索框、登录入口、多级导航菜单直接套 role="complementary"。它们各自有更精确的地标角色：role="banner"、role="search"、role="navigation"。
为什么不能只靠 <aside></aside> 就完事
<aside></aside> 确实自带语义，但它默认不被所有辅助技术识别为“可跳转地标区域”。只有显式加上 role="complementary"（且确保父容器未被 aria-hidden="true" 遮蔽），屏幕阅读器才会把它列为独立地标，支持快捷键（如 NVDA 的 D 键）直接跳入。
注意两个关键点：
-
<aside></aside>必须包裹在<main></main>同级或更高层级（如直接子元素），不能嵌在<article></article>或<section></section>内部再指望它代表整页的补充区 - 若页面有多个
<aside></aside>，每个都需加role="complementary"，并配合aria-label区分，例如：<aside role="complementary" aria-label="作者信息"></aside>
和 role="region" 的区别在哪
role="region" 是通用地标占位符，需要强制配 aria-label 或 aria-labelledby 才有意义；而 role="complementary" 本身已携带明确语义，辅助技术可直接播报“补充内容”，无需额外标注——除非你想进一步说明类型。
性能上没差异，但可维护性差很多：role="region" 容易写成无意义的空壳，而 role="complementary" 一旦出现，开发和审核者一眼就能判断它是否符合补充性定位。
实际建议：
- 优先用
<aside role="complementary"></aside>，不是<div role="complementary"> <li>避免嵌套多个 <code>role="complementary"在同一视觉区块内（比如一个侧栏里再包三个<aside></aside>），这会干扰地标导航逻辑 - 如果补充内容是动态加载的（如 JS 插入），记得同时设置
aria-live="polite"，否则新内容不会被读屏器主动感知
容易被忽略的兼容性细节
某些旧版浏览器（如 IE11）或轻量级读屏器（VoiceOver on iOS 14 之前）对 role="complementary" 的支持不完整，可能仅当它作为 直接子元素时才生效。
所以最稳妥的结构是：
<header>...</header><main>...</main><aside role="complementary">...</aside><footer>...</footer>
另外，别在 role="complementary" 容器里放 <main></main> 或另一个 role="main" ——地标角色之间必须互斥，否则会触发可访问性检测工具（如 axe）报错 "ARIA role must be unique"。
