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