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 不会改变元素的任何功能或行为。