Перейти к содержимому
v2.5.0
English
Русский
Документация

Spinner

Spinner — индикатор загрузки для состояний ожидания и асинхронных действий.
ОбъявлениеПереведите фокус на демо, чтобы увидеть, что оно отдаёт.

Именование

  • У Spinner есть role="progressbar" без значения, как у нативного <progress> без value: это индикатор загрузки с неопределённым прогрессом.
  • Встроенной метки у него нет. Назовите его через aria-label или укажите в aria-labelledby видимый текст рядом.
  • Задайте aria-hidden, если спиннер лишь украшает элемент, который уже сообщает о загрузке.

Работа с клавиатурой

  • У Spinner нет поведения для клавиатуры.

Поведение фокуса

  • Spinner не получает фокус.

Семантика для скринридеров

  • Скринридеры объявляют спиннер как занятый индикатор прогресса с его меткой, когда доходят до него; спиннер, появившийся позже, сам по себе не объявляется.
  • Сочетайте индикаторы загрузки с текстом статуса или live-регионом уровнем выше, когда операция важна для пользователей вспомогательных технологий.

Семантика формы

  • В формах используйте спиннер как дополнительную обратную связь, а не как единственный сигнал состояния.

Риски доступности

  • спиннер без aria-label или aria-labelledby, который скринридеры объявляют как безымянный индикатор прогресса
  • передача состояния загрузки только движением