Доступная карусель (слайдер)

Главный слайдер на главной странице и карусели изображений товаров относятся к самым критикуемым паттернам доступности — отчасти потому, что их часто делают плохо, отчасти потому, что люди редко смотрят дальше первого слайда. Если вы его используете, сделайте его управляемым. Эта страница входит в серию доступных UI-паттернов.

Когда использовать карусель

В APG карусель описана как представляющая «набор элементов, называемых слайдами, путём последовательного показа подмножества из одного или нескольких слайдов». Используйте её для изображений товара на странице товара или для короткого набора связанных элементов. Если каждая акция важна, рассмотрите возможность показать их отдельными блоками: ничто не скрыто и ничто не движется.

В APG указаны две конкретные проблемы: скрытые слайды не должны оставаться доступными для экранных дикторов (например, если их просто сдвинули за пределы экрана), а необъявленная прокрутка сбивает с толку пользователей экранных дикторов, которые вдруг оказываются в содержимом другого слайда.

Применимые критерии WCAG

• 2.2.2 Пауза, остановка, скрытие (A): движущемуся содержимому, которое «(1) запускается автоматически, (2) длится более пяти секунд и (3) показывается параллельно с другим содержимым», нужен «механизм, позволяющий пользователю поставить его на паузу, остановить или скрыть». Среди примеров W3C называет автоматически сменяющиеся презентации.
• 2.1.1 Клавиатура (A): все элементы управления работают с клавиатуры; свайп — не единственный способ.
• 2.5.1 Жесты указателем (A): для свайпа нужна альтернатива одним касанием, например кнопки «следующий» и «предыдущий».
• 1.1.1 Нетекстовый контент (A): у изображений слайдов есть текстовые альтернативы; текст внутри баннеров-изображений тоже должен входить в альтернативу.
• 1.4.5 Изображения текста (AA): рекламный текст должен быть настоящим текстом, а не «запечённым» в изображение.
• 4.1.2 Имя, роль, значение (A): у кнопок есть имена; переключатель показывает текущий слайд.
• 2.5.8 Размер цели (минимальный) (AA): точки-индикаторы часто намного меньше 24 на 24 CSS-пикселя.
• 2.4.3 Порядок фокуса (A): скрытые слайды не получают фокус.

Пример кода

<section class="carousel" aria-roledescription="carousel" aria-label="Осенние предложения">
  <button type="button" class="rotation" aria-label="Остановить прокрутку слайдов">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Предыдущий слайд">‹</button>
  <button type="button" aria-controls="slides" aria-label="Следующий слайд">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 из 3">
      <a href="/ru/autumn-jackets">
        <img src="jackets.jpg" alt="Осенние куртки, скидка 20 % до воскресенья">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 из 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 из 3" hidden>…</div>
  </div>
</section>

Что задаёт APG:

• Контейнер — это region (section с именем) или group с aria-roledescription="carousel" и подписью, которая не содержит слова «карусель».
• Каждый слайд — это group с aria-roledescription="slide" и именем; если у слайдов нет уникальных имён, подойдёт позиция вроде «3 из 10».
• У обёртки слайдов aria-atomic="false"; aria-live равен off, пока карусель прокручивается автоматически, и polite, когда нет, чтобы ручные смены объявлялись.
• Подпись кнопки прокрутки описывает действие — «Остановить прокрутку слайдов» или «Запустить прокрутку слайдов», — поэтому aria-pressed ей не нужен.
• Прокрутка останавливается, когда клавиатурный фокус попадает в карусель, и возобновляется, только если пользователь попросит; она также приостанавливается, пока курсор мыши находится над каруселью.
• Выбор слайда можно сделать вкладками (слайды становятся tabpanel) или подписанной группой кнопок, где у кнопки текущего слайда стоит aria-disabled="true", а не disabled, чтобы она оставалась в последовательности перехода по Tab.

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

В APG элемент управления прокруткой стоит первым в последовательности перехода по Tab, перед прокручиваемым содержимым.

Частые ошибки в интернет-магазинах

• Главные слайдеры, которые сменяются каждые три секунды без кнопки паузы.
• Скрытые слайды, сдвинутые за пределы экрана, со ссылками, которые всё ещё получают фокус, так что Tab прыгает в невидимое содержимое.
• Точки как единственная навигация, крошечные и без имён («кнопка», «кнопка», «кнопка»).
• Рекламный текст только внутри изображения при alt="баннер".
• Карусели изображений товара, которые работают только свайпом на мобильном и только с миниатюрами в виде элементов div на компьютере.
• Прокрутка продолжается, пока пользователь читает или переходит по Tab внутрь слайда.
• Клонированные слайды для бесконечной прокрутки, дублирующие ссылки и ID.

Что находит автоматика и что остаётся для ручной проверки

Все они — карточки в нашей библиотеке правил. Критерий 2.2.2 нельзя проверить автоматически: движется ли слайдер, как долго и можно ли его поставить на паузу, решает человек. Проверьте также с клавиатуры, что прокрутка останавливается при фокусе, что до скрытых слайдов нельзя добраться и что экранный диктор объявляет ручную смену слайдов.

Запустите бесплатную проверку одной страницы на вашей главной. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Разрешает ли WCAG автоматически прокручиваемые карусели?

Да, если есть способ их остановить. Критерий 2.2.2 «Пауза, остановка, скрытие» требует механизм паузы, остановки или скрытия для движущегося содержимого, которое запускается автоматически, длится более пяти секунд и показывается параллельно с другим содержимым.

Какие элементы управления нужны доступной карусели?

По APG: кнопки предыдущего и следующего слайда, при желании кнопки или вкладки выбора слайда, а для автоматически прокручиваемых каруселей — кнопка остановки и запуска прокрутки, которая идёт первой в порядке перехода по Tab.

Должна ли прокрутка останавливаться, когда пользователь фокусируется на карусели?

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

Как экранные дикторы узнают, какой слайд показан?

Каждый слайд — это группа с aria-roledescription="slide" и именем вроде «3 из 5», а контейнер слайдов имеет aria-live="polite", когда карусель не прокручивается автоматически, чтобы ручная смена слайдов объявлялась.

Может ли автоматическая проверка проверить карусель?

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

Источники

• W3C WAI, APG Carousel pattern: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
• W3C, Understanding 2.2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html