aria-posinset

När ska det användas

När DOM:en inte innehåller hela uppsättningen — virtualiserade listor som bara renderar synliga objekt, paginerade rutnät, filtrerade comboboxar, flöden med oändlig scrollning. Utan aria-posinset och aria-setsize måste skärmläsaren gissa utifrån syskonantalet och meddelar “objekt 1 av 10” när användaren egentligen är på objekt 327 av 5 000.

Giltig på objekt inuti behållare som till sin natur är uppsättningsliknande: option inuti listbox, menuitem inuti menu, treeitem inuti tree, tab inuti tablist, article inuti feed, row inuti grid.

Om DOM:en naturligt inkluderar varje objekt i källordning behöver du inte aria-posinset; AT räknar syskon automatiskt.

Hur det fungerar

Värdet är ett positivt heltal — det 1-baserade indexet för detta objekt i den fullständiga uppsättningen. Kombinera det med aria-setsize på samma objekt; båda attributen hör hemma på objekten själva, inte på behållaren.

När objekt filtreras, uppdatera båda attributen för att spegla den synliga och relevanta uppsättningen, inte den ursprungliga fullständiga listan. Annars hör användare positioner som inte matchar vad de kan navigera till.

aria-setsize="-1" är giltigt för fall där totalen är genuint okänd (ett öppet sök-under-skrivning-flöde). Vissa AT meddelar det som “många”; andra förblir tysta.

Vanliga fel

• Att sätta aria-posinset utan aria-setsize. Halva informationen saknas; AT kan inte säga “3 av hur många”.
• Att glömma att uppdatera värdena efter en sortering eller filtrering. Användare hör inaktuella positioner.
• Att placera attributen på behållaren i stället för på objekten.
• Att använda aria-posinset när DOM:en redan speglar hela uppsättningen — AT hade räknat rätt ändå, och nu har du två sanningskällor som kan drifta.
• Noll eller negativa värden för aria-posinset (negativa är inte tillåtna; enbart aria-setsize accepterar -1).
• Positionsnummer som inte matchar den visuella ordningen — en skärmläsaranvändare läser “objekt 5” medan det tredje synliga objektet är markerat.

Exempel

<!-- Virtualiserad listbox: enbart objekt 12-16 finns i DOM, men uppsättningen är 5 000 lång -->
<div role="listbox" aria-label="Customers">
  <div role="option" aria-posinset="12" aria-setsize="5000">Customer 12</div>
  <div role="option" aria-posinset="13" aria-setsize="5000">Customer 13</div>
  <div role="option" aria-posinset="14" aria-setsize="5000" aria-selected="true">Customer 14</div>
  <div role="option" aria-posinset="15" aria-setsize="5000">Customer 15</div>
  <div role="option" aria-posinset="16" aria-setsize="5000">Customer 16</div>
</div>