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 都不是必需的。

值

<integer>

大于等于 1 且小于等于如果所有列都存在时的总列数。

关联接口

Element.ariaColIndex

ariaColIndex 属性（属于 Element 接口）反映了 aria-colindex 属性的值。

ElementInternals.ariaColIndex

ariaColIndex 属性（属于 ElementInternals 接口）反映了 aria-colindex 属性的值。

关联角色

用于角色：

继承到角色：

规范

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-colindex

参见