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 属性，因为它跨越了两行。