aria-posinset

Quando usarlo

Quando il DOM non contiene l’insieme completo — liste virtualizzate che renderizzano solo le voci visibili, griglie paginate, combobox filtrati, feed a scorrimento infinito. Senza aria-posinset e aria-setsize, lo screen reader deve dedurre la posizione dal numero di elementi fratelli e annuncerà «elemento 1 di 10» quando in realtà l’utente si trova all’elemento 327 di 5.000.

Valido sugli elementi all’interno di contenitori che sono intrinsecamente a insieme: option dentro listbox, menuitem dentro menu, treeitem dentro tree, tab dentro tablist, article dentro feed, row dentro grid.

Se il DOM include naturalmente ogni voce nell’ordine sorgente, aria-posinset non è necessario; l’AT conta i fratelli autonomamente.

Come funziona

Il valore è un numero intero positivo — l’indice 1-based di questo elemento nell’insieme completo. Va abbinato ad aria-setsize sullo stesso elemento; entrambi gli attributi appartengono agli elementi stessi, non al contenitore.

Quando le voci vengono filtrate, è necessario aggiornare entrambi gli attributi in modo che riflettano l’insieme visibile e pertinente, non l’elenco originale completo. In caso contrario, gli utenti sentono posizioni che non corrispondono a ciò che possono navigare.

aria-setsize="-1" è valido per i casi in cui il totale è genuinamente sconosciuto (un feed di ricerca in tempo reale a fini aperti). Alcuni AT lo annunciano come «molti»; altri restano in silenzio.

Errori comuni

• Impostare aria-posinset senza aria-setsize. Manca metà dell’informazione; l’AT non può dire «3 di quanti».
• Dimenticare di aggiornare i valori dopo un ordinamento o un filtro. Gli utenti sentono posizioni non aggiornate.
• Inserire gli attributi sul contenitore invece che sugli elementi.
• Usare aria-posinset quando il DOM riflette già l’insieme completo — l’AT avrebbe contato correttamente comunque, e ora esistono due fonti di verità che possono divergere.
• Valori zero o negativi per aria-posinset (i negativi non sono consentiti; solo aria-setsize accetta -1).
• Numeri di posizione che non corrispondono all’ordine visivo — un utente di screen reader legge «elemento 5» mentre è evidenziato il terzo elemento visibile.

Esempio

<!-- Listbox virtualizzato: solo le voci 12-16 sono nel DOM, ma l'insieme è lungo 5.000 -->
<div role="listbox" aria-label="Clienti">
  <div role="option" aria-posinset="12" aria-setsize="5000">Cliente 12</div>
  <div role="option" aria-posinset="13" aria-setsize="5000">Cliente 13</div>
  <div role="option" aria-posinset="14" aria-setsize="5000" aria-selected="true">Cliente 14</div>
  <div role="option" aria-posinset="15" aria-setsize="5000">Cliente 15</div>
  <div role="option" aria-posinset="16" aria-setsize="5000">Cliente 16</div>
</div>