ARIA: aria-setsize 属性

描述

浏览器会自动计算一组项中每一项的集合大小和位置，例如列表中的 <li> 的数量、一组同名的单选按钮中的按钮数量，以及 <select> 中的 <option> 的数量。辅助技术（如屏幕阅读器）会利用这种状态管理向用户报告集合的大小。

当 DOM 不完整时，浏览器计算集合中项数的准确性可能会出错。当只有一部分项（例如列表项）加载到 DOM 中时，浏览器仅根据存在的项来计算项数。aria-setsize 属性应被用来覆盖浏览器不正确的计数。它定义了如果整个集合都已加载，当前列表项或树项集合中的项数。

aria-setsize 属性设置在每一项上，而不是任何容器元素上。该值对每一项都是相同的：一个整数，反映了完整集合中的项数，或者当集合大小未知时为 -1。如果所有项都存在于 DOM 中，浏览器可以计算集合大小和每一项的位置，因此 aria-setsize 和 aria-posinset 都是不必要的。

带有 aria-setsize 的元素通常也会包含 aria-posinset 属性，以指示该项在集合中的位置。aria-posinset 的值介于 1 和 aria-setsize 的正值之间。

例如，在一个页面的评论区，当所有评论都不在 DOM 中时（例如评论被分页），评论的层级、总数和每一条评论的位置都应通过 ARIA 设置。评论的层级可以使用 aria-level 指示。组的位置信息通过 aria-posinset 和 aria-setsize 指示。

当一个 feed 具有固定数量的文章时，可以在每个文章元素上添加 aria-setsize，其值可以是已加载文章的总数，也可以是 feed 中的总数。选择哪个值取决于对用户最有帮助。如果文章数量非常庞大、不确定或经常更改，可以将 aria-setsize="-1" 设置为传达集合大小未知。

在 listbox 中，当由于滚动时的动态加载而未在 DOM 中显示所有可用选项时，可以在每个 option 上设置 aria-setsize 和 aria-posinset。

在树状视图中，如果由于用户在树中移动焦点或滚动而导致的动态加载，未在 DOM 中显示所有可用节点，则每个节点都会设置 aria-level、aria-setsize 和 aria-posinset。

在菜单中，aria-setsize 会设置在所有 menuitem、menuitemcheckbox 或 menuitemradio 角色上，其值为菜单中项目的总数，不包括任何分隔符。

示例

以下示例显示了 16 个项目中的第 5 到第 8 个项目。

html

<h2 id="label_fruit">Available Fruit</h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="16" aria-posinset="5">apples</li>
  <li role="option" aria-setsize="16" aria-posinset="6">bananas</li>
  <li role="option" aria-setsize="16" aria-posinset="7">cantaloupes</li>
  <li role="option" aria-setsize="16" aria-posinset="8">dates</li>
</ul>

为了帮助用户定位，辅助技术会将上面的香蕉列表报为“第 6 个，共 16 个”。