ARIA: columnheader 角色

描述

role="columnheader" 作為 role="row" 元素的後代巢狀的元素，是表格容器（表、網格或其他需要顯示資料關係的圖表）中列標題單元格的靜態表格結構。要獲得支援，columnheader 必須巢狀在具有 row 角色的元素中。

關聯的 WAI-ARIA 角色、狀態和屬性

所有列標題都應巢狀在 row 中。每個 row 又應巢狀在 grid、table 或 treegrid 中，或者巢狀在上述任一元素中的 rowgroup 中。

aria-sort: aria-sort 屬性最多應用於一個列標題，它指示列是否按 ascending（升序）、descending（降序）或 none（未排序）這三種值進行排序。

示例

html

<table>
  <thead>
    <tr role="row">
      <th role="columnheader" scope="col">
        <button>First Name</button>
      </th>
      <th role="columnheader" scope="col">
        <button>Last Name</button>
      </th>
      <th role="columnheader" scope="col" aria-sort="ascending">
        <button>Company Name</button>
      </th>
      <th role="columnheader" scope="col">
        <button>Job Title</button>
      </th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

ARIA 的第一條規則是：如果原生 HTML 元素或屬性具有您所需的語義和行為，請使用它，而不是重新利用元素並新增 ARIA 角色、狀態或屬性使其可訪問。建議使用具有 scope 屬性設定為 <th scope="col"> 的原生 HTML <th> 元素，而不是 <div> 或其他元素。如果您使用語義 HTML 的 <th scope="col">，則不需要 role 屬性，但可以包含它作為備用，以確保表格在預設語義因 CSS display 屬性值而移除時仍保留其語義。

即使未指定 ARIA 角色屬性，也可以將 aria-sort 屬性新增到 <th scope="col">。