aria-setsize

När du ska använda det

Alltid när du använder aria-posinset. De två attributen är ett par: position är meningslös utan totalen. Vanliga fall är virtualiserade listor, sidnumrerade rutnät, filtrerade comboboxar och oändliga flöden — var som helst där DOM:en bara innehåller ett fönster in i en större samling.

Giltigt på objekt inuti behållare som är inherent uppsättningsliknande: option, menuitem, treeitem, tab, row, article inuti ett feed. Attributet sätts på objekten, inte behållaren.

Hur det fungerar

Värdet är ett heltal. Använd det verkliga totalet när du känner till det. Använd -1 när totalet är genuint obegränsat eller okänt — ett livesökflöde som kontinuerligt laddar fler resultat, till exempel. Vissa skärmläsare annonserar -1 som “många” eller utelämnar antalet; andra faller tyst tillbaka till antalet syskon.

Uppdatera aria-setsize när den underliggande uppsättningen förändras: ett nytt filter, en sortering, en borttagen rad. Varje objekt i det synliga fönstret måste bära samma aria-setsize-värde; felmatchade värden mellan syskon ger förvirrande annonseringar som “1 av 10” följt av “2 av 9”.

Vanliga fel

• Att sätta aria-setsize på behållaren i stället för på varje objekt. Attributet är per objekt.
• Att glömma att uppdatera värdet efter ett filter eller en sortering, så att användaren hör det ofiltrerade totalet trots att många resultat inte längre är nåbara.
• Inkonsekventa aria-setsize-värden mellan syskon — ett objekt säger 100, nästa säger 99.
• Att använda aria-setsize på objekt vars behållare redan innehåller alla objekt i DOM-ordning. Hjälpmedlet räknade korrekt; att lägga till attributet introducerar avvikelse.
• Noll eller negativa värden annat än -1. Enbart positiva heltal och -1 är meningsfulla.
• Att glömma aria-posinset. aria-setsize ensamt talar om hur många objekt som finns men inte var användaren befinner sig.

Exempel

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