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