aria-colcount

当并非所有列都存在于 DOM 中时，aria-colcount 属性定义 table、grid 或 treegrid 中的总列数。

描述

有些表格非常大，无法向用户展示所有列。或者，虽然可以展示，但使用如此宽的表格会带来糟糕的用户体验。使用 aria-colcount 属性可以让辅助技术知道，如果所有列都存在，表格将有多少列。该值是一个整数，表示构成完整表格的列数。如果您不知道表格将有多少列，但知道并非所有列都将在 DOM 中，请使用值 -1，即 aria-colcount="-1"。此值告诉用户代理，当前 DOM 中存在的列数可能不是表格中的实际列数。

如果表格中的所有列都存在于 DOM 中，则不需要 aria-colcount 属性，因为浏览器会自动计算总列数。但是，如果在特定时刻，DOM 中只存在部分列，那么此属性就很有帮助，也是必须的。

在已知列数时使用 aria-colcount 时，请确保还使用 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 属性，但标记不会那么冗长。当使用语义表格标题元素，且并非所有列都在 DOM 中时，仍然需要使用 aria-colcount，但 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>

值

<integer>: 完整表格中的列数

关联角色

在角色中使用

table

继承到角色中

规范

规范
可访问的富互联网应用 (WAI-ARIA) # aria-colcount

另请参阅

aria-colindex