aria-setsize

Кога да се използва

Винаги когато се използва aria-posinset. Двата атрибута са двойка: позицията е безсмислена без общия брой. Чести случаи са виртуализирани списъци, разбити на страници мрежи, филтрирани combobox полета и безкрайно превъртащи се потоци — навсякъде, където DOM съдържа само прозорец към по-голяма колекция.

Валиден за елементи в контейнери, които по природа са набори: option, menuitem, treeitem, tab, row, article в feed. Атрибутът се поставя върху елементите, не върху контейнера.

Как работи

Стойността е цяло число. Използвайте истинския общ брой, когато е известен. Използвайте -1, когато общият брой е действително неограничен или неизвестен — например поток за търсене на живо, който продължава да зарежда резултати. Някои екранни четци обявяват -1 като „много” или просто пропускат броя; други тихо се връщат към броя на братските елементи.

Актуализирайте aria-setsize при всяка промяна на основния набор: нов филтър, сортиране, изтрит ред. Всеки елемент в видимия прозорец трябва да носи еднаква стойност на aria-setsize; несъвпадащи стойности при братски елементи водят до объркващи обявявания като „1 от 10”, след което „2 от 9”.

Чести грешки

• Задаване на aria-setsize върху контейнера вместо върху всеки елемент. Атрибутът е за отделния елемент.
• Забравяне да се актуализира стойността след филтриране или сортиране, така че потребителят чува нефилтрирания общ брой, въпреки че много резултати вече не са достъпни.
• Непоследователен aria-setsize при братски елементи — единият казва 100, следващият — 99.
• Употреба на aria-setsize за елементи, чийто контейнер вече включва всички елементи по ред в DOM. Помощната технология броеше правилно; добавянето на атрибута въвежда разминаване.
• Нулеви или отрицателни стойности, различни от -1. Само положителни цели числа и -1 са смислени.
• Забравяне на aria-posinset. aria-setsize само указва на потребителя колко елемента съществуват, но не и къде се намират те.

Пример

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