ARIA：aria-rowcount 属性

描述

有些表格有数百行，甚至数百万行。即使是行数较少的表格，仅加载一部分行也可能是一项设计要求，以提高性能或改善用户体验。当仅加载部分行时，您需要让所有用户知道当前显示的是部分数据。aria-rowcount 属性用于定义表格、网格或树状网格中的总行数。

将此属性添加到 <table> 元素或角色为 table 的元素上，其值应为完整表格的行数（一个整数）。如果总行数未知，请包含 aria-rowcount="-1"，这将告诉浏览器不要计算总行数。

如果所有行都已加载并在 DOM 中，则无需包含 aria-rowcount，因为浏览器会自动计算总行数。但是，如果所有行在任何时候都不全部存在于 DOM 中，则需要此属性来提供已知完整表格大小的行数，并在总行数未知时告知浏览器不要自动计数。

示例

以下示例显示了一个包含 24 行的网格，其中第一行以及第 7 行到第 9 行显示给用户。

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">Goalkeeper</span>
    </div>
  </div>
</div>