aria-setsize

aria-setsize 属性定义了当集合中并非所有项目都存在于 DOM 中时，当前一组 listitem 或 treeitem 中项目的数量。

描述

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

当 DOM 未完整时，浏览器计算集合中项目数量的结果可能不正确。当只有一部分项目（例如列表项目）加载到 DOM 中时，浏览器仅根据存在的项目计算项目数量。应使用 aria-setsize 属性覆盖浏览器的不正确计数。它定义了如果整个集合都已加载，则当前一组 listitem 或 treeitem 中项目的数量。

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>