aria-colindex

aria-colindex 屬性定義元素的列索引或相對於 table、grid 或 treegrid 中總列數的位置。

描述

一些表格非常大，因此只顯示一部分內容。雖然只加載一部分列可以提高使用者體驗，但您需要讓所有使用者知道正在顯示哪些內容以及並非所有表格內容都存在。

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 角色、狀態或屬性來使其無障礙，那麼就使用該功能。”如果我們使用本機 HTML 語義與 <table>、<th>、<td> 等結合使用，並且只顯示一部分列，則 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>