ARIA: aria-controls 属性

描述

当一个交互式小部件或元素（如组合框、选项卡、按钮等）用于调整或修改文档或应用程序中的另一个元素或组件时，可以使用 aria-controls 属性将相应的元素或元素集以编程方式与控制元素关联起来。aria-controls 属性标识由设置了该属性的元素所控制的内容或存在状态的元素（或元素集），无论何种类型的交互启动了受影响的行为。

一个组合框元素会将 aria-controls 设置为一个值，该值指向作为弹出窗口的元素。aria-controls 仅在弹出窗口可见时需要设置，但引用一个不可见的元素在编程上也是有效的且更方便。

其他控件的示例包括

手风琴小部件中用于切换其关联面板内容可见性的按钮部分。每个按钮都可以指定一个 aria-controls，引用包含与触发控件关联内容的元素的 ID。
一个具有 scrollbar 角色的元素：滚动条需要一个 aria-controls 属性来引用它所控制的元素的 ID。
一组选项卡，每个选项卡显示一个不同的选项卡面板：每个具有 role="tab" 的元素都有一个 aria-controls 属性，引用其关联的 tabpanel。

示例

在此选项卡示例中，每个选项卡控制一个选项卡面板

html

<div class="tab-interface">
  <div role="tablist" aria-label="Sample Tabs">
    <span
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-3"
      id="tab-3"
      tabindex="-1">
      Third Tab
    </span>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div
    id="panel-2"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="tab-2"
    class="display-none">
    <p>Content for the second panel</p>
  </div>
  <div
    id="panel-3"
    role="tabpanel"
    tabindex="0"
    aria-labelledby="tab-3"
    class="display-none">
    <p>Content for the third panel</p>
  </div>
</div>

注意： ARIA 仅修改元素的无障碍树，以标识辅助技术如何向用户呈现内容。ARIA 不会改变任何隐含的功能或样式。