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 不會改變任何隱含的功能或樣式。