ARIA：补充角色
complementary 地标角色用于指定一个支持性部分，该部分与主内容相关，但也可以独立存在。这些部分通常呈现为侧边栏或突出显示框。如果可能，请使用 HTML <aside> 元素。
<div role="complementary">
<h2>Our partners</h2>
<!-- complementary section content -->
</div>
这是一个包含项目赞助商链接的侧边栏。
描述
complementary 角色是 一个地标 角色。地标可用于辅助技术，以便快速识别和导航到文档的大部分区域。complementary 地标角色容器中列出的内容，如果与文档主内容分离，也应该是有意义的。
注意：使用 <aside> 元素将自动传达该部分具有 complementary 角色。开发者应始终优先使用正确的语义 HTML 元素，而不是使用 ARIA。
示例
<div role="complementary">
<h2>Trending articles</h2>
<ul>
<li><a href="#">18 tweets that will make you feel all the feels</a></li>
<li>
<a href="#">Stop searching! I've found the perfect lunch containers.</a>
</li>
<li>
<a href="#">The time has come to decide how to call these foods</a>
</li>
<li><a href="#">17 really good posts we saw on Tumblr this week</a></li>
<li><a href="#">10 parent hacks we know work because we tried them</a></li>
</ul>
</div>
可访问性考虑
地标角色应谨慎使用，以识别文档较大的整体部分。过多的地标角色可能会在屏幕阅读器中产生“噪音”，从而难以理解页面的整体布局。
最佳实践
优先使用 HTML
使用 <aside> 元素将自动传达该元素具有 complementary 角色。如果可能，请优先使用语义化的 <aside> 元素，而不是 complementary 角色。
标记地标
多个地标
如果文档中有一个以上的 complementary 地标角色或 <aside> 元素，请使用 aria-label 属性为每个地标提供标签，或者，如果 aside 有一个恰当的描述性标题，请使用 aria-labelledby 属性指向它。此标签将允许屏幕阅读器用户能够快速理解每个地标的目的。
<aside aria-label="Note about usage">
<!-- content -->
</aside>
…
<aside id="sidebar" aria-label="Sponsors">
<!-- content -->
</aside>
冗余描述
屏幕阅读器会播报地标的角色类型。因此，您无需在标签中描述地标是什么。例如，声明 role="complementary" 并带有 aria-label="Sidebar" 的标签可能会被冗余地播报为“complementary sidebar”。
新增优势
某些技术（如浏览器扩展程序）可以生成页面上所有地标角色的列表，使非屏幕阅读器用户也能快速识别和导航到文档的大部分区域。
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # complementary |
| 未知规范 |