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