Исчерпывающий чек-лист для доступных каруселей
Информация о статье
Автор: Дмитрий Дугарев
Ах, эти карусели — они так популярны и в то же время столь проблематичны, когда речь заходит о доступности. Здесь вы найдете полный, объединенный чек-лист всех контрольных точек из моего полного руководства по доступным каруселям — идеальный вариант для непосредственного использования в вашем проекте или аудиторском отчете.
Основная структура
- Карусель заключена в элемент
<section>сaria-roledescription="Карусель". [1], [2] -
aria-roledescriptionлокализован на языке пользователя. [3] - Карусель имеет заголовок с уникальным ID. [4]
- Секция имеет атрибут
aria-labelledby, который ссылается на заголовок. [5]
Контейнер слайдов
- Слайды находятся в
<ul>с отдельными элементами<li>. [6], [7] -
<ul>имеетaria-label, описывающий список слайдов. [8]
Содержимое слайдов
- Каждый слайд является элементом
<article>для семантической структуризации. [1] - Каждый слайд имеет
aria-roledescription="Слайд". [2] -
aria-roledescriptionлокализован. [3] - Каждый слайд имеет уникальный заголовок с ID. [4]
- Каждый слайд имеет
aria-labelledby, который ссылается на заголовок. [5] - Каждый слайд имеет
aria-posinsetиaria-setsize. [7] - Скрытые слайды помечены
aria-hidden="true"иinertилиdisplay:none. [9]
Управление фокусом
- После ручного переключения фокус перемещается на заголовок нового слайда. [10], [11]
- Фокус переносится только после завершения анимации. [12]
Управление автоматической ротацией
- Присутствует видимая кнопка "Пауза/Воспроизведение". [13], [14]
- Кнопка является настоящим элементом
<button>сaria-labelиtitle. [9], [8], [15] - Кнопка использует
aria-pressedдля отображения состояния (включено/выключено). [16] - Кнопка доступна для управления с помощью клавиатуры (
Enter,Leertaste). [17] - Явный стиль фокуса с контрастом ≥ 3:1. [18], [19]
- Контраст кнопки ≥ 3:1. [19]
- Размер кнопки не менее 44 × 44 пикселей. [20]
- Автоматическая ротация приостанавливается при взаимодействии мышью или клавиатурой. [13]
- Ротация учитывает
prefers-reduced-motion. [13]
Кнопки-стрелки (Вперед/Назад)
- Стрелочная навигация размечена как
<ul>сaria-label. [6], [8] - Стрелки расположены согласованно в начале или конце карусели. [21]
- Стрелки являются элементами
<button>сaria-labelиtitle. [9], [8], [15] - Управление с клавиатуры работает (
Enter/Leertaste). [17] - Явный стиль фокуса с контрастом ≥ 3:1. [18], [19]
- Контраст стрелок ≥ 3:1. [19]
- Размер кнопок не менее 44 × 44 пикселей. [20]
- Декоративные иконки помечены
aria-hidden="true". [22]
Точечная навигация (Точки)
- Точки расположены в
<fieldset>с<legend>. [23], [7] - Точки реализованы как переключатели (Radio-Buttons). [9], [17]
- Клавиши
Home/Endпереключают на первый/последний слайд;ArrowLeft/ArrowRightилиUp/Downосуществляют навигацию между слайдами. [17] - Каждая точка имеет
aria-labelили видимую текстовую метку. [8], [24] - Элементы в фокусе визуально различимы (контраст ≥ 3:1). [18], [19]
- Активная точка визуально выделена и объявляется скринридерами как активная. [9]
- Активная точка программно различима. [9]
Живая область для смены слайдов
- Существует скрытый элемент с
aria-live="polite"иaria-atomic="true". [12] - Живая область имеет
role="status". [25] - Объявление происходит после переноса фокуса на новый слайд. [12]
- Нет объявления при автоматической ротации. [12]
- Живая область обновляется только при ручных переключениях. [12]
Визуальный фокус и фокус клавиатуры
- Все интерактивные элементы (точки, стрелки, кнопка паузы) имеют четко видимый стиль фокуса. [18]
- Стиль фокуса имеет контраст ≥ 3:1 по отношению к фону. [19]
Инструкции по взаимодействию
- Существует (возможно, скрытый) текстовый элемент с инструкциями по взаимодействию. [26]
- Инструкция связана с каруселью через
aria-describedby. [27] - Инструкция также связана с каждым слайдом через
aria-describedby. [27]
Общие требования (сквозные)
- Структура семантически корректна:
section,ul/li,article. [7] - Обеспечена полная доступность с клавиатуры. [17]
- Присутствует надежное управление фокусом. [11]
- Автоматическое движение управляется. [13]
- Скринридеры получают четкие сообщения о статусе и позиции. [12]
- Прогрессивное улучшение (Progressive Enhancement): работает даже без JavaScript.
- Интернационализация: Локализованные метки (особенно
aria-roledescription). [3] - Учитывается
prefers-reduced-motion. [13] - Регулярное тестирование с клавиатурой и скринридерами (VoiceOver, JAWS, NVDA).
Заключение
С помощью этого чек-листа вы отлично подготовлены для разработки или проверки карусели, соответствующей руководствам WCAG 2.2. Помните, что доступность — это непрерывный процесс: регулярно тестируйте с реальными пользователями и различными вспомогательными технологиями, чтобы убедиться, что ваша карусель остается доступной для всех.
Об авторе