aria-setsize

Quando utilizzarlo

Ogni volta che si usa aria-posinset. I due attributi formano una coppia: la posizione è priva di significato senza il totale. I casi più comuni sono liste virtualizzate, griglie paginate, combobox filtrate e feed a scorrimento infinito — ovunque il DOM contenga solo una finestra su una raccolta più ampia.

Valido sugli elementi all’interno di contenitori intrinsecamente insiemistici: option, menuitem, treeitem, tab, row, article all’interno di un feed. L’attributo va applicato agli elementi, non al contenitore.

Comportamento

Il valore è un intero. Si usa il totale reale quando è noto. Si usa -1 quando il totale è genuinamente illimitato o sconosciuto — ad esempio un feed di ricerca in tempo reale che continua a caricare risultati. Alcuni screen reader annunciano -1 come «molti» o omettono semplicemente il conteggio; altri tornano silenziosamente al conteggio dei fratelli nel DOM.

È necessario aggiornare aria-setsize ogni volta che l’insieme sottostante cambia: un nuovo filtro, un ordinamento, una riga eliminata. Ogni elemento nella finestra visibile deve portare lo stesso valore aria-setsize; valori discordanti tra fratelli producono annunci confusi come «1 di 10» e poi «2 di 9».

Errori comuni

• Impostare aria-setsize sul contenitore invece che su ciascun elemento. L’attributo è per-elemento.
• Dimenticare di aggiornare il valore dopo un filtro o un ordinamento, così l’utente sente il totale non filtrato anche se molti risultati non sono più raggiungibili.
• aria-setsize incoerente tra fratelli — un elemento indica 100, il successivo 99.
• Usare aria-setsize su elementi il cui contenitore include già tutti gli elementi nell’ordine del DOM. La tecnologia assistiva contava correttamente; aggiungere l’attributo introduce una discrepanza.
• Valori zero o negativi diversi da -1. Solo gli interi positivi e -1 sono significativi.
• Dimenticare aria-posinset. aria-setsize da solo indica all’utente quanti elementi esistono, ma non dove si trova.

Esempio

<!-- Albero in cui i figli vengono caricati in modo pigro quando l'utente espande i rami -->
<ul role="tree" aria-label="Files">
  <li
    role="treeitem"
    aria-level="2"
    aria-posinset="1"
    aria-setsize="248"
  >
    invoice-001.pdf
  </li>
  <li
    role="treeitem"
    aria-level="2"
    aria-posinset="2"
    aria-setsize="248"
  >
    invoice-002.pdf
  </li>
  <!-- altri 246, caricati in modo pigro mentre l'utente scorre -->
</ul>