Генератор доступного CSS-спиннера

Что делает сгенерированный CSS и что он не охватывает

Инструмент создает визуальную часть: окружность с рамкой и поворот. Чисто визуальный индикатор ничего не значит для вспомогательных технологий, потому что элемент пуст. Доступность обеспечивают разметка и одно дополнительное правило CSS, которое вы добавляете вокруг нее.

Разметка, которая сообщает о состоянии

<div class="loader" role="status" aria-label="Загрузка результатов"></div>

role="status" помечает элемент как динамическую область, поэтому многие программы чтения с экрана озвучивают его подпись при появлении. aria-label должна описывать, что загружается, например «Загрузка результатов» или «Сохранение», а не общее слово. Удалите элемент, когда работа завершена, и покажите новый контент.

Можно также вывести видимый текст рядом с кольцом. Видимый текст помогает всем, в том числе тем, кто плохо воспринимает движение.

Учитывайте уменьшенное движение

Некоторые посетители включают системную настройку, которая просит сайты ограничивать анимацию. Учтите ее с помощью медиазапроса, размещенного после сгенерированного CSS:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Это замедляет вращение вместо того, чтобы его убрать, поэтому индикатор по-прежнему выглядит живым, но без быстрого движения. Если вы предпочитаете статичный сигнал, используйте animation: none; и покажите рядом с кольцом текст «Загрузка».

Чек-лист контраста и размера

Ограничения

• Генератор сам выбирает цвет трека (#eee). Измените его в скопированном CSS, если фон страницы похож на него.
• Слишком малое значение скорости заставляет кольцо мерцать. Не используйте значения меньше примерно 0,5 секунды.
• Не полагайтесь только на спиннер при долгом ожидании. Сообщите пользователю текстом, что происходит.

Быстрая проверка

Включите в операционной системе настройку уменьшенного движения и перезагрузите страницу: кольцо должно вращаться медленнее. Затем перемещайтесь по странице клавишей Tab и убедитесь, что спиннер никогда не забирает фокус у элемента управления, которым пользовался посетитель. Наконец, включите программу чтения с экрана и один раз вызовите состояние загрузки: проверьте, озвучивается ли подпись при появлении элемента и доступен ли новый контент после этого.