ARIA: aria-colcount 属性

描述

有些表格非常大，无法将所有列都显示给用户。或者，可以显示，但如此宽的表格会带来糟糕的用户体验。请使用 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>