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 都不需要。