ARIA：columnheader 角色
ARIA 角色属性的columnheader值将元素标识为表格行中包含列标题信息的单元格，类似于具有列范围的原生<th>元素。
描述
嵌套在具有role="row"的元素的后代中的具有role="columnheader"的元素是表格容器（表格或网格或需要显示数据关系的其他图表）中列标题单元格的静态表格结构。为了获得支持，columnheader 必须嵌套在具有row角色的元素中。
关联的 WAI-ARIA 角色、状态和属性
键盘交互
此角色不支持任何特定的键盘交互。
必需的 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 |
| 未知规范 |