aria-setsize

Wanneer te gebruiken

Altijd wanneer aria-posinset wordt gebruikt. De twee attributen vormen een paar: positie is betekenisloos zonder het totaal. Veelvoorkomende gevallen zijn gevirtualiseerde lijsten, gepagineerde rasters, gefilterde comboboxen en feeds met eindeloos scrollen — overal waar de DOM slechts een venster bevat op een grotere verzameling.

Geldig op items binnen containers die inherent reeksachtig zijn: option, menuitem, treeitem, tab, row, article binnen een feed. Het attribuut wordt op de items geplaatst, niet op de container.

Hoe het werkt

De waarde is een geheel getal. Gebruik het werkelijke totaal wanneer dat bekend is. Gebruik -1 wanneer het totaal werkelijk onbegrensd of onbekend is — een live zoekfeed die steeds meer resultaten laadt, bijvoorbeeld. Sommige schermlezers kondigen -1 aan als “veel” of laten het aantal weg; andere vallen stilzwijgend terug op het aantal broerelementen.

Werk aria-setsize bij telkens wanneer de onderliggende reeks verandert: een nieuw filter, een sortering, een verwijderde rij. Elk item in het zichtbare venster moet dezelfde aria-setsize-waarde dragen; niet-overeenkomende waarden bij broerelementen produceren verwarrende aankondigingen zoals “1 van 10” gevolgd door “2 van 9”.

Veelvoorkomende fouten

• aria-setsize op de container instellen in plaats van op elk item. Het attribuut is per item.
• Vergeten de waarde bij te werken na een filter of sortering, waardoor de gebruiker het ongefilterde totaal hoort terwijl veel resultaten niet meer bereikbaar zijn.
• Inconsistente aria-setsize-waarden bij broerelementen — het ene item zegt 100, het volgende zegt 99.
• aria-setsize gebruiken op items waarvan de container al elk item in DOM-volgorde bevat. De hulptechnologie telde al correct; het toevoegen van het attribuut introduceert afwijkingen.
• Nul of negatieve waarden anders dan -1. Alleen positieve gehele getallen en -1 zijn betekenisvol.
• aria-posinset vergeten. aria-setsize alleen vertelt de gebruiker hoeveel items er bestaan maar niet waar zij zich bevinden.

Voorbeeld

<!-- Tree where lazy-loaded children are added as the user expands branches -->
<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>
  <!-- 246 more, lazy-loaded as user scrolls -->
</ul>