aria-sort

如果网格或表提供排序功能，则应在排序列或行的表头单元格元素上将 aria-sort 属性设置为 ascending 或 descending（或 other）。

aria-sort 属性仅设置在当前排序的列或行上。设置 aria-sort="ascending" 以指示该列或行中的数据单元格按升序排序。如果排序顺序反转，则将值切换到 aria-sort="descending"。当不同的列或行开始排序时，单个 aria-sort 属性将移动到新排序列或行的表头单元格，并使用排序顺序的相应值。

aria-sort 属性一次只能添加到单个表或网格表头。设置该属性是为了通知辅助技术用户哪些列或行已排序。它对实际排序顺序没有任何影响。

此表加载时，姓氏列按升序排序。

<table>
  <caption>
    Steering Committee Members
  </caption>
  <thead>
    <tr>
      <th>
        <button>First Name</button>
      </th>
      <th aria-sort="ascending">
        <button>Last Name</button>
      </th>
      <th>
        <button>Company</button>
      </th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

如果用户单击“姓氏”按钮，则会将 aria-pressed="true" 添加到 <button> 元素，并使用 JavaScript 将 aria-sort 值切换到 "descending"。如果用户单击不同的表头按钮，则会从“姓氏”表头中删除 aria-sort，并将其放置在所单击按钮的 <th> 父元素上。

我们在标题中提供了说明，供可能看不到我们使用 CSS 针对 th[aria-sort="ascending"] 和 th[aria-sort="descending"] 选择器添加的向下箭头。

ascending

此列按升序排序项目。

descending

此列按降序排序项目。

none（默认值）

此列未应用任何已定义的排序。

other

已应用除升序或降序之外的排序算法。

Element.ariaSort

作为 Element 接口一部分的 ariaSort 属性反映 aria-sort 属性的值。

ElementInternals.ariaSort

作为 ElementInternals 接口一部分的 ariaSort 属性反映 aria-sort 属性的值。

在角色中使用

• columnheader
• rowheader

• 可排序表格示例 -W3C
• aria-pressed
• <th> 元素