ARIA: aria-colindex 属性

描述

有些表格非常大，因此最初只显示其一部分内容。虽然只加载一部分列可以改善用户体验，但您需要告知所有用户哪些内容被显示，并且表格并非完整内容。

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 角色、状态或属性使其可访问。”如果我们使用具有 <table>、<th>、<td> 等的本地 HTML 语义，并且只显示一部分列，那么 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>

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