aria-colindex

aria-colindex 属性定义元素的列索引或相对于 table、grid 或 treegrid 中总列数的位置。

描述

一些表格非常大，因此只显示一部分内容。虽然只加载一部分列可以提高用户体验，但您需要让所有用户知道正在显示哪些内容以及并非所有表格内容都存在。

ARIA 提供了多个属性来提供有关 table、grid 和 treegrid 结构的信息。aria-colindex 属性定义子结构，即元素的列索引或相对于这些结构中总列数的位置。

与 aria-colcount 属性结合使用（告知辅助技术表格在所有列都存在的情况下有多少列），aria-colindex 用于元素的列索引或相对于该总列数的位置。

如果所有列都存在于 DOM 中，包括 aria-colindex 是没有必要的，因为用户代理可以计算每个单元格或网格单元格的列索引。但是，如果任何列在任何时候都从 DOM 中省略，请使用 aria-colindex 来指示每个单元格或网格单元格相对于完整表格的列。

aria-colindex 的值为大于或等于 1 的整数。每个值都应大于上一列的 aria-colindex，并且小于或等于完整表格中的列数。

如果单元格或网格单元格跨越多个列，请将 aria-colspan 设置为它跨越的列数（如果不使用 <td> 和 <th> HTML 元素），并将 aria-colindex 设置为跨度的起始值；如果它只跨越第一列，则它将具有的值。

如果 DOM 中存在的列集是连续的，并且如果该集内没有跨越多行或多列的单元格，您只需要在该集的第一列的每一行上设置一次 aria-colindex。如果列不连续，请在每一行的所有子元素或拥有元素上包含 aria-colindex 值。

以下示例显示了一个包含 6 列的网格，其中显示了列 1、2、5 和 6。表格本身的 aria-colcount="6" 设置了构成表格的总列数。由于列不连续，每个 cell（在本例中为 columnheader 和 gridcell 元素）都设置了 aria-colindex 属性。

html

<div role="grid" aria-colcount="6">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader" aria-colindex="1">First name</div>
      <div role="columnheader" aria-colindex="2">Last name</div>
      <div role="columnheader" aria-colindex="5">City</div>
      <div role="columnheader" aria-colindex="6">Zip</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell" aria-colindex="1">Debra</div>
      <div role="gridcell" aria-colindex="2">Burks</div>
      <div role="gridcell" aria-colindex="5">New York</div>
      <div role="gridcell" aria-colindex="6">14127</div>
    </div>
  </div>
  …
</div>

ARIA 使用的第一条规则是“如果您可以使用具有您所需语义和行为的本机功能，而无需重新利用元素并 **添加** ARIA 角色、状态或属性来使其无障碍，那么就使用该功能。”如果我们使用本机 HTML 语义与 <table>、<th>、<td> 等结合使用，并且只显示一部分列，则 aria-colcount 和 aria-colindex 属性仍然是必要的，但标记不会那么冗长。

当使用语义表格标题元素并且并非所有列都位于 DOM 中时，aria-colindex 属性只需要在列标题 <th> 中的每列定义一次。

html

<table aria-colcount="6">
  <thead>
    <tr>
      <th aria-colindex="1" scope="col">First name</th>
      <th aria-colindex="2" scope="col">Last name</th>
      <th aria-colindex="5" scope="col">City</th>
      <th aria-colindex="6" scope="col">Zip</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Debra</td>
      <td>Burks</td>
      <td>New York</td>
      <td>14127</td>
    </tr>
    …
  </tbody>
</table>