Что такое доступная карусель?
Информация о статье
Автор: Дмитрий Дугарев
Составные части карусели
Карусели (которые вы также знаете как слайдеры или слайд-шоу) действительно повсюду в интернете. Их часто используют для компактного отображения изображений и текста или для размещения важной маркетинговой информации на небольшом пространстве.
Вы обычно перемещаетесь с помощью стрелок «Вперед» и «Назад», маленьких точек («Dots») для прямого доступа, или же они вращаются автоматически. Основные функции обычно включают:
- Содержимое слайда: Каждый слайд содержит элементы, такие как изображения, текст и ссылки.
- Переходы между слайдами: Слайды меняются либо по клику, либо автоматически в цикле.
- Управление фокусом: Если вы выбираете слайд, фокус должен переходить к нему, чтобы программы для чтения с экрана могли его озвучить. [1]
- Элементы навигации: То есть кнопки-стрелки и селекторы-точки, которые должны быть доступными. [2]
- Автоматическое вращение: Обеспечивает автоматическую смену, но должно контролироваться пользователем. [3]
Здесь вы видите пример такой карусели:
Живая демонстрация
Карусель с 4 слайдами. Используйте кнопки "Далее" и "Назад" или выберите точку. Автоматическое вращение можно приостановить кнопкой. Нажмите клавишу Escape в любое время, чтобы остановить.
Что делает карусель доступной?
Доступная карусель гарантирует, что все эти функции доступны также людям, которые используют клавиатуру вместо мыши или полагаются на программы для чтения с экрана (скринридеры). Это означает для вас:
- Четкая структура: Связь между каруселью, ее слайдами и элементами управления семантически корректно отображена. [4]
- Полная управляемость с помощью клавиатуры: Все интерактивные элементы доступны и управляемы с помощью клавиатуры. [5]
- Надежное управление фокусом: Фокус управляется логически. Вы всегда знаете, где находитесь, особенно после смены слайда. [1], [6]
- Контролируемая анимация: Вы можете остановить автоматическое вращение. Оно также должно учитывать системные настройки пользователя. [3]
- Понятные объявления: Программы для чтения с экрана могут четко сообщать о назначении виджета, текущей позиции и любых изменениях статуса. [7]
Убедитесь, что ваша карусель соответствует этим критериям, чтобы создать инклюзивный и доступный пользовательский опыт для всех посетителей вашего веб-сайта.
Ресурсы для доступных каруселей
Этот раздел предназначен специально для разработчиков, которые хотят создавать доступные цифровые продукты. Здесь мы переходим к сути: Как создать доступные карусели, которые действительно работают — для всех групп пользователей?
Здесь вы найдете следующие ресурсы:
- Пошаговое руководство по внедрению доступной карусели
- Полный чек-лист для аудита доступности каруселей
Для каждой рекомендации я объясняю, почему она важна, показываю что делать и чего не делать на практике и предоставляю конкретные примеры кода. Кроме того, они снабжены ссылками на соответствующие критерии WCAG [8] и шаблоны WAI-ARIA [9], чтобы вы могли легко понять требования.
Просто начните с Пошагового руководства, чтобы создать надежную базовую структуру. Используйте Чек-лист, чтобы убедиться, что ваша карусель соответствует всем важным требованиям доступности.
Удачи в реализации доступных каруселей! Если у вас есть вопросы или вы хотите оставить отзыв, свяжитесь со мной.
Об авторе