aria-sort

使用时机

在 role="columnheader" 或 role="rowheader"（或充当该角色的原生 <th>）上使用，前提是该网格或表格支持用户重新排序。该属性同时向辅助技术告知：该列可排序，以及当前的排序方向——屏幕阅读器用户在阅读该列内容之前，会听到”姓氏，升序排列”。

若某列不可排序，请勿在其上设置 aria-sort。该属性是”可操作”的契约。

行为说明

该属性接受以下四个枚举值：

• "ascending" — A→Z、0→9、从旧到新。
• "descending" — Z→A、9→0、从新到旧。
• "none" — 可排序，但当前未按此列排序。当另一列接管排序时，此为默认状态。
• "other" — 可排序，但当前按非字母、非数字的规则排序（例如自定义相关性评分），不适用升序或降序。实践中较为罕见。

同一时刻，表格中只应有一个标题携带 "ascending"、"descending" 或 "other" 值。当用户切换排序列时，将新列设置为相应值，并将原列重置为 "none"（或移除该属性）。

aria-sort 仅用于声明，实际排序行为——点击处理程序、键盘激活、行重排——需由开发者自行实现。辅助技术不会替用户对表格进行排序。

常见错误

• 更新了可见的排序指示器（箭头图标）但忘记更新 aria-sort，导致屏幕阅读器用户听到错误的排序方向。
• 点击新标题后，两列同时保留 aria-sort="ascending"——原列已不再驱动排序，却仍声称如此。
• 在不可排序的列上设置 aria-sort，导致辅助技术承诺用户无法实际触发的排序行为。
• 使用四个允许值以外的枚举值——aria-sort="asc" 无效且会被忽略。
• 忘记为标题提供键盘激活支持——aria-sort 不会使列标题自动获得焦点，这需要开发者另行处理。
• 将 aria-sort 视为排序状态的来源而非派生值——若重新渲染时丢失该属性，声明将随之消失。

示例

<table>
  <thead>
    <tr>
      <th
        scope="col"
        aria-sort="ascending"
      >
        <button type="button">Last name</button>
      </th>
      <th scope="col" aria-sort="none">
        <button type="button">First name</button>
      </th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- … rows sorted by Last name ascending -->
  </tbody>
</table>