ARIA：columnheader 角色

描述

具有 role="columnheader" 且作为 role="row" 元素的后代嵌套的元素，是表格容器（可以是 table 或 grid，也可以是需要展示数据关系的其他图表）中列标题单元格的静态表格结构。要获得支持，columnheader 必须嵌套在具有 row 角色的元素中。

关联的 WAI-ARIA 角色、状态和属性

所有列标题都应嵌套在 row 中。而每一行又应嵌套在 grid、table 或 treegrid 中，或者嵌套在上述容器之一的 rowgroup 中。

aria-sort: aria-sort 属性一次只应用于一个列标题（如果有的话），它通过三个取值来指示某一列的排序情况：ascending（升序）、descending（降序）或 none（未排序）。

示例

html

<table>
  <thead>
    <tr role="row">
      <th role="columnheader" scope="col">
        <button>名字</button>
      </th>
      <th role="columnheader" scope="col">
        <button>姓氏</button>
      </th>
      <th role="columnheader" scope="col" aria-sort="ascending">
        <button>公司名称</button>
      </th>
      <th role="columnheader" scope="col">
        <button>职位</button>
      </th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

ARIA 的第一规则是：如果原生 HTML 元素或属性已经具备你所需要的语义和行为，就使用它，而不是重新利用某个元素并添加 ARIA 角色、状态或属性来使其可访问。建议使用原生 HTML <th> 元素并将 scope 属性设置为 <th scope="col">，而不是使用 <div> 或其他元素。如果使用语义化 HTML 的 <th scope="col">，则 role 属性不是必需的，但仍可以将其包含在内作为后备，以确保在默认语义因某个 CSS display 属性值而被移除时，表格仍能保留其语义。

即使未指定 ARIA role 属性，也可以将 aria-sort 属性添加到 <th scope="col"> 上。