Рубрики
Верстальщику Разработка

Проблемы доступности слайдеров

Проблемы доступности слайдеров: анализ и варианты решений.

Сегодня карусель или слайдер – это одни из наиболее часто встречаемых элементов пользовательского интерфейса на сайтах. Они помогают создавать галереи изображений, витрины продуктов, ленты новостей и анонсов и прочее…

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

Но дайвайте сначала решим, что же такое карусель как компонент UX?

Что же такое карусель?

По своему предназначению компонент карусели можно рассматривать как некий дизайнерский паттерн предоставления большого объема информации «упакованного» в небольшой объем пространства с элементами контроля для навигации.

Семантически карусель удобнее всего представлять как список (нумерованный или ненумерованный), а в зависимости от назначения это может быть список чистых (картинки, видео) или смешанных (текст + картинка\видео) медиа-объектов. Однако не смотря на то, что семантически для карусели самый близкий элемент список, с точки зрения доступности это не совсем подходящее решение. Об этом мы поговорим ниже.

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

Если же элементы навигации присутствуют, то как-правило – это:

  • Стрелки навигации к следующему\предыдущему слайду;
  • Элементы пагинации, которые показывают общее количество слайдов и текущий слайд;
  • Также элементы пагинации позволяют автоматически переместится к желаемому слуйду.

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

Как видим, компонент предоставляет довольно много удобств, но они же могут стать проблемами доступности, если это не брать во внимание при разработке. Давайте же рассмотрим основные проблемы доступности каруселей.

Проблемы доступности слайдеров

Если мы можем выделить основные особенности компонента, то логично предположить, что и проблемы доступности во многом будут схожи. Зачастую, большинство плагинов\библиотек, которые реализуют карусели, как раз и имеют многие из описанных ниже проблем.

  • Зачастую карусель никак не обозначена для людей которые используют устройства считывания с экрана. В лучшем случае, она будет воспринята как список.
  • Карусель не прячет слайды для пользователей экранных ридеров. Не смотря на то, что визуально они спрятаны, они все еще доступны для считывания.
  • Для элементов навигации могут быть использованы не соответствующие элементы. Например, вместо кнопок для навигации используются просто стилизованные спаны.
  • Еще одной проблемой элементов навигации может быть то, что для их обозначения используются иконки без соответствующего текстового описания.
  • Без правильного обозначения компонента для устройств считывания с экрана перемещение по слайдам карусели (если они не спрятаны или добавляются автоматически) может быть большой проблемой и сбивать с толку.
  • В случае если вы все-таки позаботились о навигации с помощью клавиатуры, позаботьтесь также о том, чтобы описание действий и клавиш было доступно устройствам считывания с экрана.

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

Какой должна быть доступная карусель?

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

Поэтому давайте соберем все вместе здесь. В большинстве своем они будут соответствовать рекомендациям Консорциума.

  1. Карусель должна быть обернута в тег <section> c атрибутом aria-label, которой будет содержать название карусели. В названии лучше указать, что это именно карусель.
  2. Не смотря на то, что рекомендации не требуют этого, лучше поместить в самом начале карусели текст, который будет доступен только пользователям считывания с экрана, гду вы опишите как пользоваться вашей каруселью.
  3. Позаботьтесь о том, чтобы слайды которые не видны пользователю, также были скрыты для устройств считывания и навигации с клавиатуры. Прячьте слайды используя CSS свойства display: none; или visibility: hidden;, также можно использовать атрибут hidden. Для того, что отключить навигации по дочерним элементам слайда, если он не скрыт, можно использовать tabindex=»-1″.
  4. Старайтесь не использовать списки для формирования слайдов. Мы уже упоминали это выше. Все дело в том, что большинство устройств считывания с экрана будет оглашать длину списка для пользователя, когда он приступит к перемещению по списку. И скрытые элементы не буду оглашены в этом подсчете. То есть если изначально вы показываете один слайд, а слайдер имеет 20 слайдов и построен как список, то пользователю считывающего устройства будет оглашено, что это список из одного элемента.
  5. Используйте атрибут role="group" для слайда и атрибут aria-label с номером текущего слайда и общим количествов слайдов: aria-label="слайд 1 из 20"
  6. Для элементов навигации используйте <button> и позаботьтесь, чтобы кнопка «говорила» и своем предназначении, то есть «Следующий слайд», «Предыдущий слайд» и т.д.
  7. Если вы используете пагинацию, то кнопка которая показывает текущей слайд должна «говорить» об этом. Лучший способ использовать атрибут aria-current="true".
  8. Старайтесь не переопределять кнопки клавиатуры для навигации. Использование правильных элементов и правильно размещение блоков могут решить эту задачу за вас, а пользователь будет использовать удобные и привычные клавиши.
  9. Не используйте автоматическое перелистывание слайдов. Как минимум, останавливайте этот процесс тогда, когда ваша карусель становится активной (в фокусе).

Опираясь на вышеперечисленные требования и используя примеры, которые предоставляет консорциум вы можете сами построить доступную карусель. Но часто разработчики предпочитают использовать готовые решения для каруселей в виде плагинов для библиотек или на чистом JavaScript. Таких плагинов довольно много (Slick Slider, Flickity, Splide) и есть очень популярные. К сожалению, популярность не делает их автоматически удобными с точки зрения доступности.

Доработка плагинов в угоду доступности

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

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

accessible-slick

accessible-slick – это доступная замена для популярного Slick Slider. Не смотря на то, что плагин официально уже не поддерживается, он широко используется на многих сайтах. Это форк плагина, который не изменяет функционал, но вносит ряд улучшений доступности.

Flickity

Flickity не смотря на то, что плагин довольно неплох с точки зрения доступности, все же есть вещи которые можно улучшить. Старайтесь не использовать опции wrapAround и accessibility.

Owl Carousel 2

Owl Carousel 2 плагин официально не поддерживается и не рекомендован для использования в новых проектах, но ввиду большой популярности все еще используется разработчиками. Если вы все-таки его используете, то старайтесь не использовать пагинацию по умолчанию (сделайте свою реализацию), а также используйте API событий чтобы правильно спрятать слайды, которые не видны.

Splide

Splide – это, наверное, самый оптимальный вариант с точки зрения доступности, но и он может быть лучше. Старайтесь не использовать опции keyboard и slideFocus. Также нужно убедится что слайды, которые не видны, спрятаны согласно рекомендаций доступности.

Вот ссылка на примеры улучшений этих плагинов на CodePen: https://codepen.io/collection/narjZO.

Итоги и ресурсы

Теперь, используя информацию из данной статьи вы можете создать вполне доступный слайдер. Я умышленно не приводил куски кода в теле статью, поскольку есть прекрасные примеры по ссылкам на которые вы можете увидеть весь код.

Ниже я приведу список источников, которые были взяты для создания этой статьи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *