aria-posinset

Wanneer te gebruiken

Wanneer de DOM niet de volledige set bevat — gevirtualiseerde lijsten die alleen zichtbare items renderen, gepagineerde rasters, gefilterde comboboxen, feeds met eindeloos scrollen. Zonder aria-posinset en aria-setsize moet de schermlezer raden op basis van het aantal gezusters en kondigt “item 1 van 10” aan terwijl de gebruiker werkelijk op item 327 van 5.000 staat.

Geldig op items in containers die inherent setachtig zijn: option in listbox, menuitem in menu, treeitem in tree, tab in tablist, article in feed, row in grid.

Als de DOM van nature elk item in bronvolgorde bevat, is aria-posinset niet nodig; de hulptechnologie telt gezusters automatisch.

Gedrag

De waarde is een positief geheel getal — de op-1-gebaseerde index van dit item in de volledige set. Combineer dit met aria-setsize op hetzelfde item; beide attributen horen op de items zelf, niet op de container.

Wanneer items worden gefilterd, update beide attributen zodat ze de zichtbare en relevante set weerspiegelen, niet de oorspronkelijke volledige lijst. Anders horen gebruikers posities die niet overeenkomen met wat ze kunnen bereiken.

aria-setsize="-1" is geldig voor gevallen waarbij het totaal werkelijk onbekend is (een open feed met zoeken-terwijl-typen). Sommige hulptechnologie kondigt dat aan als “veel”; andere blijft stil.

Veelvoorkomende fouten

• aria-posinset instellen zonder aria-setsize. De helft van de informatie ontbreekt; hulptechnologie kan niet zeggen “3 van hoeveel”.
• Vergeten de waarden bij te werken na sorteren of filteren. Gebruikers horen verouderde posities.
• De attributen op de container plaatsen in plaats van op de items.
• aria-posinset gebruiken wanneer de DOM al de volledige set weerspiegelt — de hulptechnologie zou toch correct hebben geteld, en nu zijn er twee bronnen van waarheid die kunnen gaan afwijken.
• Nul of negatieve waarden voor aria-posinset (negatieve waarden zijn niet toegestaan; alleen aria-setsize accepteert -1).
• Positienummers die niet overeenkomen met de visuele volgorde — een schermlezersgebruiker leest “item 5” terwijl het derde zichtbare item gemarkeerd is.

Voorbeeld

<!-- Gevirtualiseerde listbox: alleen items 12-16 staan in de DOM, maar de set is 5.000 lang -->
<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>