ARIA：columnheader 角色

ARIA 角色屬性的columnheader值將元素標識為表格行中包含列標題資訊的單元格，類似於具有列範圍的原生<th>元素。

描述

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

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

所有 columnheader 應巢狀在row內。依次，每個 row 應巢狀在grid、table或treegrid內，或者巢狀在上述其中一個元素內的rowgroup內。

aria-sort

如果存在，則一次僅應用於一個列標題，aria-sort屬性指示列是否按ascending或descending順序排序，或者對於未排序的列，指示為none。

鍵盤互動

此角色不支援任何特定的鍵盤互動。

必需的 JavaScript 功能

僅當使用aria-sort屬性時才需要 JavaScript。

示例

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>

最佳實踐

Columnheader 應包含列的標題或標題資訊。

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

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

優先使用 HTML

Columnheader 具有相同的語義<th scope="col">。

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# columnheader
未知規範

另請參閱