Стандарти · ARIA

Роля Контрола

progressbar

Отбелязва елемент като индикатор за напредък. Използвайте първо <progress> — той осигурява семантиката, детерминирания визуален изглед и атрибутите за стойност нативно. Прибягвайте до role="progressbar", когато задължително трябва да стилизирате отвъд възможностите на нативния елемент.

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

Използвайте <progress value="42" max="100">. Нативният елемент е трудно да се стилизира последователно в различните браузъри — това е основната причина да се прибегне до role="progressbar" върху персонализиран <div>.

Два варианта:

  • Детерминиран — когато общото количество е известно. Задайте aria-valuemin, aria-valuemax и обновявайте aria-valuenow с напредъка на работата.
  • Индетерминиран — когато общото количество не е известно. Пропуснете aria-valuenow (или не го задавайте). Екранният четец обявява „busy” / „loading” без процент.

Задайте aria-valuetext, когато голото число не е достатъчно информативно — например aria-valuetext="Uploading photo 3 of 8" звучи по-добре от „37 percent”.

Лентата за напредък НЕ е активна област — екранните четци не обявяват всяка промяна на aria-valuenow. Ако е необходимо промяната да бъде изговорена, използвайте също role="status" върху придружаващ елемент с четим от човека текст за напредъка.

Чести грешки

  • role="progressbar" върху въртящ се елемент без aria-label. Ролята се обявява, но задачата няма наименование.
  • Използване на role="progressbar" за индетерминиран въртящ се елемент И задаване на aria-valuenow="0". Това обявява „0 percent complete” за неопределено дълго.
  • Забравяне да се премахне лентата за напредък (или нейния aria-busy), когато работата приключи. Някои екранни четци продължават да я проверяват.
  • Съчетаване на лентата за напредък с визуално скрит процент без обновяване на нито едното, когато качването е спряло. Потребителите получават замразено състояние без съобщение.
  • Поставяне на role="progressbar" едновременно върху обвиващия контейнер И върху вътрешната лента за запълване. Дублирани роли — изберете само една.

Пример

<!-- Preferred -->
<label for="upload">Uploading</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- Custom determinate -->
<div id="uploadLabel">Uploading photo 3 of 8</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>