ARIA: aria-sort 属性

描述

如果网格或表格提供了排序功能，则应将 aria-sort 属性设置为 ascending 或 descending（或 other），并应用于已排序列或行的标题单元格元素。

aria-sort 属性仅应用于当前排序的列或行。设置为 aria-sort="ascending" 以指示该列或行中的数据单元格按升序排序。如果排序顺序相反，则将该值切换为 aria-sort="descending"。当另一列或行变为已排序时，唯一的 aria-sort 属性将移动到新排序的列或行的标题单元格，并带有适用于排序顺序的值。

aria-sort 属性一次只应添加到单个表格或网格标题中。设置此属性是为了告知辅助技术用户当前哪个列或行已排序。它不会影响实际的排序顺序。

示例

此表格在姓氏列按升序排序的情况下加载。

html

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

如果用户单击“姓氏”按钮，则会向 <button> 元素添加 aria-pressed="true"，并且 aria-sort 的值将通过 JavaScript 切换为 "descending"。如果用户单击其他标题按钮，则会从“姓氏”标题中移除 aria-sort，并将其放置在被单击按钮的 <th> 父元素上。

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