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"] 選擇器新增的向下箭頭的輔助技術使用。