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