aria-setsize

Hvornår bruges det

Når du bruger aria-posinset. De to attributter er et par: positionen er meningsløs uden totalen. Typiske tilfælde er virtualiserede lister, paginerede grids, filtrerede comboboxe og feeds med uendelig scroll — overalt hvor DOM’en kun indeholder et vindue ind i en større samling.

Gyldig på elementer inde i beholdere, der i sagens natur er sætlignende: option, menuitem, treeitem, tab, row, article inde i et feed. Attributten sættes på elementerne, ikke på beholderen.

Sådan fungerer det

Værdien er et heltal. Brug den sande total når du kender den. Brug -1 når totalen er reelt ubegrænset eller ukendt — et live-søgefeed der løbende indlæser flere resultater, for eksempel. Nogle skærmlæsere annoncerer -1 som “mange” eller udelader blot antallet; andre falder lydløst tilbage til søskendeantallet.

Opdater aria-setsize når det underliggende sæt ændres: et nyt filter, en sortering, en slettet række. Hvert element i det synlige vindue skal bære den samme aria-setsize-værdi; uensartede værdier på tværs af søskende producerer forvirrende annonceringer som “1 af 10” efterfulgt af “2 af 9”.

Typiske fejl

• At sætte aria-setsize på beholderen i stedet for på hvert element. Attributten er per element.
• At glemme at opdatere værdien efter et filter eller en sortering, så brugeren hører den ufiltrerede total selvom mange resultater ikke længere er tilgængelige.
• Inkonsistent aria-setsize på tværs af søskende — ét element siger 100, det næste siger 99.
• At bruge aria-setsize på elementer, hvis beholder allerede indeholder alle elementer i DOM-rækkefølge. Hjælpeteknologien talte korrekt; tilføjelse af attributten introducerer drift.
• Nul- eller negative værdier ud over -1. Kun positive heltal og -1 er meningsfulde.
• At glemme aria-posinset. aria-setsize alene fortæller brugeren hvor mange elementer der findes, men ikke hvor de befinder sig.

Eksempel

<!-- 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>