ARIA: aria-rowindex 屬性

描述

有些表格包含非常多的行。為了提高效能或改善使用者體驗，可以只加載表格的其中一部分行。

當只加載部分行時，您需要告知所有使用者當前顯示的是哪些行。aria-rowindex 屬性用於定義單元格或行的行索引或其相對於表格、網格或樹狀表格中總行數的行數位置。

該屬性可以包含在 <tr> 元素、角色為 row 的元素，或者直接包含在 <td>、<th> 或角色為 cell 或 gridcell 的元素上。其值表示該行相對於整個表格的行數位置。

aria-rowindex 的值是一個整數，必須大於或等於 1，大於任何先前行的 aria-rowindex 值，並且小於或等於整個表格的總行數。

如果表格的所有行都已載入並在 DOM 中，則不需要包含 aria-rowindex，因為瀏覽器會自動計算每行的索引。但是，當 DOM 中只存在部分行時，需要使用 aria-rowindex 來指示每行相對於整個表格的位置。如果只加載了部分行，您還需要在表格的祖先元素上包含 aria-rowcount 屬性，即使您不知道總行數。

如果只包含部分行的表格中存在跨越多行的單元格，則行和單元格都需要設定 aria-rowindex。如果一個單元格跨越多行（即單元格的角色包含 aria-rowspan 屬性，或 HTML 單元格具有大於 1 的 rowspan 屬性），則除了適當的行跨度屬性外，還需要在跨行單元格上包含該行開始處的 aria-rowindex 值。

注意： aria-rowindex 必須新增到每一行，但對單元格是可選的，除非單元格跨越多行：在這種情況下，aria-rowindex 屬性對所有跨行單元格都是必需的。

示例

以下示例顯示了一個包含 24 行的網格，其中第一行以及第 7 行到第 10 行顯示給使用者。最後一個“位置”單元格跨越第 9 列和第 10 列。

html

<div role="grid" aria-rowcount="24">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Position</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="7">
      <span role="gridcell">Morgan</span>
      <span role="gridcell">Brian</span>
      <span role="gridcell">Midfielder</span>
    </div>
    <div role="row" aria-rowindex="8">
      <span role="gridcell">Abby</span>
      <span role="gridcell">Dahlkemper</span>
      <span role="gridcell">Defender</span>
    </div>
    <div role="row" aria-rowindex="9">
      <span role="gridcell">Ashlyn</span>
      <span role="gridcell">Harris</span>
      <span role="gridcell" aria-rowspan="2" aria-rowindex="9">Goalkeeper</span>
    </div>
    <div role="row" aria-rowindex="10">
      <span role="gridcell">Alyssa</span>
      <span role="gridcell">Naeher</span>
    </div>
  </div>
</div>

請注意，“Goalkeeper”單元格同時具有 aria-rowspan 和 aria-rowindex 屬性，因為它跨越了兩行。