ARIA: aria-selected 屬性

描述

aria-selected 屬性用於指示 gridcell、option、row 和 tab 角色的當前“選中”狀態。

此屬性用於指示單選和多選複合元件中哪些元素被選中。如果一次可以選擇多個元素，請在 grid、listbox、tablist 或其他所有者角色上包含 aria-multiselectable="true"，同時僅在可選擇的單元格、選項和選項卡上包含 aria-selected。

對於其他角色，當前選中狀態使用 aria-current 設定，或者根據角色可能是 aria-checked 或 aria-pressed。

同時支援 aria-selected 和 aria-current 的元件對每個屬性都有不同的含義。例如，在導航樹中，aria-current="page" 可用於指示當前顯示的頁面，而 aria-selected="true" 則指示使用者啟用 treeitem 時將顯示的頁面。

如果一次可以選擇多個 tab，請在 tablist 上包含 aria-multiselectable。

示例

在此 tablist 示例中，第一個 tab 被選中

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" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>

注意： ARIA 僅修改元素的輔助功能樹以及輔助技術如何向用戶呈現內容。ARIA 不會改變元素的任何功能或行為。