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>