aria-setsize

Kiedy używać

Zawsze gdy używasz aria-posinset. Oba atrybuty tworzą parę: pozycja jest bez sensu bez podania łącznej liczby. Typowe przypadki to wirtualizowane listy, siatki z paginacją, filtrowane pola kombi i nieskończone kanały przewijania — wszędzie, gdzie DOM zawiera jedynie wycinek większej kolekcji.

Atrybut jest dozwolony na elementach wewnątrz kontenerów o charakterze zestawu: option, menuitem, treeitem, tab, row, article wewnątrz feed. Atrybut umieszcza się na elementach, nie na kontenerze.

Działanie

Wartością jest liczba całkowita. Podaj rzeczywistą łączną liczbę, gdy ją znasz. Użyj -1, gdy zestaw jest naprawdę nieograniczony lub nieznany — np. kanał wyszukiwania na żywo, który ciągle wczytuje kolejne wyniki. Niektóre czytniki ekranu ogłaszają -1 jako „wiele” lub pomijają licznik; inne po cichu wracają do liczby rodzeństwa.

Aktualizuj aria-setsize za każdym razem, gdy zmienia się bazowy zestaw: nowy filtr, sortowanie, usunięty wiersz. Każdy element w widocznym oknie musi mieć tę samą wartość aria-setsize; niespójne wartości w obrębie rodzeństwa powodują mylące komunikaty w stylu „1 z 10”, a potem „2 z 9”.

Typowe błędy

• Ustawianie aria-setsize na kontenerze zamiast na każdym elemencie. Atrybut jest per-element.
• Zapomnienie o aktualizacji wartości po filtrowaniu lub sortowaniu — użytkownik słyszy całkowitą liczbę bez uwzględnienia filtra, choć wiele wyników jest niedostępnych.
• Niespójne aria-setsize w obrębie rodzeństwa — jeden element mówi 100, następny 99.
• Używanie aria-setsize na elementach, których kontener już zawiera w DOM cały zestaw. AT liczyło poprawnie; dodanie atrybutu wprowadza rozbieżność.
• Wartości zero lub ujemne inne niż -1. Znaczenie mają tylko dodatnie liczby całkowite i -1.
• Pominięcie aria-posinset. Sam aria-setsize informuje użytkownika o liczbie elementów, ale nie o ich pozycji.

Przykład

<!-- Drzewo, w którym leniwie ładowane dzieci są dodawane w miarę rozwijania gałęzi -->
<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 więcej, ładowanych leniwie podczas przewijania -->
</ul>