ARIA：补充角色

complementary 地标角色 用于指定与主要内容相关的支持部分，但如果分离则可以独立存在。这些部分通常以侧边栏或标注框的形式呈现。如果可能，请使用 HTML <aside> 元素 代替。

html
<div role="complementary">
  <h2>Our partners</h2>
  <!-- complementary section content -->
</div>

这是一个包含指向项目赞助商的链接的侧边栏。

描述

complementary 角色是 地标 角色。地标可用于辅助技术快速识别和导航到文档的大部分内容。包含在带有 complementary 地标角色的容器中的内容，即使与文档的主要内容分离也应具有意义。

注意： 使用 <aside> 元素将自动传达一个部分具有 complementary 角色。开发人员应始终优先使用正确的语义 HTML 元素，而不是使用 ARIA。

示例

html
<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 角色。如果可能，请优先使用它。

标记地标

多个地标

如果文档中存在多个 complementary 地标角色或 <aside> 元素，请使用 aria-label 属性为每个地标提供标签，或者如果侧边栏具有适当的描述性标题，则使用 aria-labelledby 属性指向它。此标签将使辅助技术用户能够快速理解每个地标的用途。

html
<aside aria-label="Note about usage">
  <!-- content -->
</aside>

…

<aside id="sidebar" aria-label="Sponsors">
  <!-- content -->
</aside>

冗余描述

屏幕阅读器会宣布地标的角色类型。因此，您不需要在标签中描述地标是什么。例如，role="complementary" 与 aria-label="Sidebar" 的声明可能会冗余地宣布为“补充侧边栏”。

附加优势

某些技术（如浏览器扩展）可以生成页面上所有地标角色的列表，使非屏幕阅读器用户也可以快速识别和导航到文档的大部分内容。

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# complementary
未知规范

另请参阅