View in EnglishAlways switch to English

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"。由于列不是连续的，因此每个单元格（在本例中为columnheader 和gridcell 元素）都设置了aria-colindex 属性。

html

<div role="grid" aria-colcount="6">  <div role="rowgroup">    <div role="row">      <div role="columnheader" aria-colindex="1">名字</div>      <div role="columnheader" aria-colindex="2">姓氏</div>      <div role="columnheader" aria-colindex="5">城市</div>      <div role="columnheader" aria-colindex="6">邮编</div>    </div>  </div>  <div role="rowgroup">    <div role="row">      <div role="gridcell" aria-colindex="1">德布拉</div>      <div role="gridcell" aria-colindex="2">伯克斯</div>      <div role="gridcell" aria-colindex="5">纽约</div>      <div role="gridcell" aria-colindex="6">14127</div>    </div>  </div>  …</div>

ARIA 使用的第一条规则是：“如果你可以使用具有你所需语义和行为的原生特性，而不是重新用一个元素并添加一个 ARIA 角色、状态或属性来使其无障碍，那么请这样做。”如果我们使用具有语义化的 HTML 元素，如<table>、<th>、<td> 等，那么aria-colcount 属性仍然是必需的，但标记不会那么冗长。

当使用语义化的表头元素且并非所有列都在 DOM 中时，仍然需要使用aria-colcount，但只需要在每列的列头<th> 中定义一次aria-colindex 属性。

html

<table aria-colcount="6">  <thead>    <tr>      <th aria-colindex="1" scope="col">名字</th>      <th aria-colindex="2" scope="col">姓氏</th>      <th aria-colindex="5" scope="col">城市</th>      <th aria-colindex="6" scope="col">邮编</th>    </tr>  </thead>  <tbody>    <tr>      <td>德布拉</td>      <td>伯克斯</td>      <td>纽约</td>      <td>14127</td>    </tr>    …  </tbody></table>

如果所有列都在 DOM 中，则aria-colcount 和aria-colindex 都不是必需的。