aria-controls

全局 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 不会更改任何隐式功能或样式。

值

id 列表: 一个或多个 ID 值的空格分隔列表，引用当前元素控制的元素

关联接口

Element.ariaControlsElements: ariaControlsElements 属性是每个元素接口的一部分。其值为一个 Element 列表，对应于 aria-controls 属性中指定的 ID 值。

关联角色

用于**所有**角色。

规范

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

另请参阅

aria-owns