ARIA: table 角色
ARIA role 属性的 table 值表示该元素包含一个非交互式的表格结构，其中数据按行和列排列，类似于原生的 <table> HTML 元素。
<div
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<div id="semantic_elements_table_desc">
Semantic Elements to use instead of ARIA's roles
</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="none">ARIA Role</span>
<span role="columnheader" aria-sort="none">Semantic Element</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="11">
<span role="cell">header</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">header</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">rowgroup</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">term</span>
<span role="cell">dt</span>
</div>
</div>
</div>
描述
具有 role="table" 的元素是一个静态的表格结构，其中包含带单元格的行。单元格不可聚焦或选择，但表格中单个单元格内的控件可以是交互式的。在可能的情况下，强烈建议使用原生的 HTML <table> 元素。
要创建 ARIA 表格，请将 role="table" 添加到容器元素。在该容器内，每行都设置为 role="row" 并包含子单元格。每个单元格的角色是 columnheader、rowheader 或 cell。行可以是表格的子元素，也可以位于 rowgroup 内。
表格标题可以通过 aria-labelledby 或 aria-label 定义。所有其他语义表格元素，例如 <tbody>、<thead>、<tr>、<th> 和 <td>，都需要通过关联的角色来添加，例如 rowgroup、row、columnheader 和 cell。
如果表格包含可排序的列或行，则应将 aria-sort 属性添加到列标题单元格元素（而不是表格本身）。如果任何行或列被隐藏，则应包含 aria-colcount 或 aria-rowcount，分别指示完整表格的列数或行数，以及每个单元格上的 aria-colindex 或 aria-rowindex。 aria-colindex 或 aria-rowindex 设置为单元格在行或列中的位置。如果表格包含跨越多行或多列的单元格，那么也应包含 aria-rowspan 或 aria-colspan。请注意，使用 <table> 元素，以及所有相关的语义元素和属性，所有这些都得到所有辅助技术的支持，会简单得多。
要创建具有表格结构的交互式小部件，请使用 grid 模式。如果交互提供了单个单元格的选择状态，如果提供了从左到右和从上到下的导航，或者如果用户界面允许重新排列单元格顺序或以其他方式更改单个单元格顺序（例如通过拖放），请改用 grid 或 treegrid。
注意： 在可能的情况下，强烈建议使用原生的 HTML 表格元素。
关联的 WAI-ARIA 角色、状态和属性
role="rowgroup"role="row"-
表格中的一行，也可以是行组中的一行，其中包含一个或多个单元格、列标题或行标题。
aria-describedby属性-
其值是作为表格描述的元素的 ID。
aria-label属性-
aria-label为表格提供了可访问的名称。 aria-colcount属性-
仅当列不始终存在于 DOM 中时，才需要此属性。它明确指示了完整表格中的列数。将值设置为完整表格中的总列数。如果未知，则设置为
aria-colcount="-1"。 aria-rowcount属性-
仅当行不始终存在于 DOM 中时，才需要此属性，例如用于最小化 DOM 节点数量而重复使用行的可滚动表格。它明确指示了完整表格中的行数。将值设置为完整表格中的总行数。如果未知，则设置为
aria-rowcount="-1"。
键盘交互
无。
所需的 JavaScript 功能
无。对于可排序的列，请参阅 columnheader aria 角色。
注意： ARIA 使用的第一条规则是：如果您可以使用原生功能，并且该功能已内置您所需的语义和行为，那么就应该这样做，而不是重新利用一个元素并添加 ARIA 角色、状态或属性来使其可访问。尽可能使用 HTML <table> 元素，而不是 ARIA 的 table 角色。
示例
<div
role="table"
aria-label="Semantic Elements"
aria-describedby="semantic_elements_table_desc"
aria-rowcount="81">
<div id="semantic_elements_table_desc">
Semantic Elements to use instead of ARIA's roles
</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="none">ARIA Role</span>
<span role="columnheader" aria-sort="none">Semantic Element</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="11">
<span role="cell">header</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">header</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">rowgroup</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">term</span>
<span role="cell">dt</span>
</div>
</div>
</div>
以上是表格的一部分。虽然完整表格有 81 个条目，如 aria-rowcount 属性所示，但目前只有四个可见。列是可排序的，但目前未排序，如列标题上的 aria-sort 属性所示。
最佳实践
仅将 <table>、<tbody>、<thead>、<tr>、<th>、<td> 等用于数据表格结构。您可以添加这些 ARIA 角色，以确保在表格的原生语义被移除时（例如通过 CSS）表格的可访问性。ARIA table 角色的一个相关用例是当 CSS 的 display 属性覆盖表格的原生语义时，例如通过 display: grid。在这种情况下，您可以使用 ARIA table 角色来重新添加语义。
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # table |
| 未知规范 |