aria-selected

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

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

對於其他角色，當前選中的狀態使用aria-current設定，或者可能使用aria-checked或aria-pressed設定，具體取決於角色。

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

在可聚焦的 gridcell 上設定aria-selected="false"表示該單元格可選。如果網格允許一次選擇多個 gridcell，則在具有grid角色的元素上設定aria-multiselectable="true"。在列或行標題 gridcell 上設定aria-selected不會將狀態傳播到該列或行中的其他單元格。

aria-selected和aria-checked都適用於option。一些使用者介面在單選列表框中使用aria-selected指示選中狀態，在多選列表框中使用aria-checked指示選中狀態。

除非使用者介面中aria-selected的含義和目的與aria-checked的含義和目的不同，並且每個狀態的含義和目的都很明顯，並且UI提供了控制每個狀態的單獨方法，否則請勿在同一listbox中包含的option元素上同時指定aria-selected和aria-checked。

aria-selected屬性在row上受支援，但在column上不受支援。如果網格支援選擇，則當單元格或行被選中時，選中的元素將設定aria-selected="true"。

如果網格支援列選擇並且某列被選中，則該列中的所有單元格都將aria-selected設定為true。

在選項卡列表中，aria-selected用於選項卡上指示當前顯示的tabpanel。

選項卡列表中選中的tab應設定屬性aria-selected="true"。選項卡列表中所有未啟用的選項卡都應設定aria-selected="false"。設定狀態僅會影響輔助功能樹：確保以視覺方式指示其選中狀態的方式來設定活動選項卡的樣式。tab角色上aria-selected的預設值為false。

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

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

<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>

true

可選元素被選中。

false

可選元素未被選中。tab的隱式預設值。

undefined（預設）

該元素不可選。

Element.ariaSelected

ariaSelected屬性（Element介面的一部分）反映aria-selected屬性的值。

ElementInternals.ariaSelected

ariaSelected屬性（ElementInternals介面的一部分）反映aria-selected屬性的值。

用於角色

• gridcell
• option
• row
• tab

繼承到角色

• columnheader
• rowheader
• treeitem

• aria-pressed
• aria-checked