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 個”。