Сделайте карусели доступными

Роберт Флэк
Пенни Маклахлан
Penny McLachlan
LinkedIn Bluesky
Лукас Радаэлли
Lucas Radaelli
X LinkedIn

Опубликовано: 29 сентября 2025 г.

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

Однако сделать карусели доступными часто бывает непросто. Управление фокусом, корректная настройка оповещений экранного диктора и работа с интерактивными элементами, расположенными за пределами экрана, — всё это затруднительно, поэтому карусели на многих сайтах недоступны. Эти трудности побудили команду Chrome разработать интерактивные CSS-карусели в рамках модуля CSS Overflow уровня 5 , который входит в состав Chrome 135.

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

Мы считаем, что функции CSS Overflow 5 позволяют создавать надёжные и доступные карусели, интерактивные с первого взгляда. В этой статье мы подробно расскажем, как это сделать, уделив особое внимание использованию этих функций для решения давних проблем доступности.

Более общее представление о каруселях см. в статье «Карусели с CSS» . Помните: ни один пользовательский интерфейс не может быть гарантированно доступен сразу после установки, поэтому вам всегда необходимо проверять доступность своих страниц.

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

Карусели с одним товаром

Карусель с одним элементом на экране и маркерами для выбора других элементов.

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

Автоматически разбиваемые на страницы карусели

Карусель с несколькими слайдами, отображаемыми одновременно.

Автоматически разбиваемые на страницы карусели отображают «страницы» контента, например списки продуктов или телешоу.

Карусели с несколькими элементами

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

Для каждого типа карусели существуют свои требования к доступности и рекомендации.

Карусели с одним товаром

Это классическое слайд-шоу. Одновременно можно просматривать только один дочерний элемент, хотя во многих случаях пользователи будут видеть «заметный» фрагмент следующего или предыдущего элемента, чтобы получить контекстные подсказки о дополнительном контенте. Цель — обеспечить интерактивность только полностью видимого слайда, расположенного по центру.

Вот как сделать его доступным, шаг за шагом.

Шаг 1: Обеспечьте единый фокус с помощью привязки прокрутки

Чтобы гарантировать, что контейнер прокрутки всегда «прикрепляется» к слайдеру, не оставляя элементов, неловко застрявших между ними, используйте привязку прокрутки CSS . Это гарантирует, что после прокрутки элемент будет идеально «прикреплен» к нужному месту, создавая удобный пользовательский интерфейс.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

Пользователю, использующему программу чтения с экрана, необходимо знать, что он попал в карусель и когда меняется слайд. Для этого требуется несколько атрибутов ARIA в контейнере карусели:


Атрибут ARIA
Объяснение

role="region"
Определите карусель как ориентир на странице, чтобы к ней было легче переходить.

aria-label
Дайте региону описательное название, например, «Слайд-шоу рекомендуемых товаров».

aria-live="polite"
Это волшебный ингредиент. Он заставляет программы экранного доступа вежливо сообщать об изменениях в этой области, например, о появлении нового слайда, не прерывая пользователя.

Вот HTML-структура:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

Шаг 3: сделайте интерактивным только видимый слайд

Это критически важно для доступности, поскольку предотвращает случайное нажатие клавиш Tab на кнопки или ссылки на слайдах, находящихся за пределами экрана. Для этого используйте новый запрос контейнера scroll-state и свойство interactivity .

Сначала сделайте каждый элемент слайда инертным по умолчанию, используя interactivity: inert . Затем используйте запрос контейнера scroll-state чтобы выбрать слайд, который в данный момент «прикреплён» к области просмотра, и присвойте его содержимому значение interactivity: auto .

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

Благодаря этому CSS браузер автоматически определяет, какие элементы имеют фокус. Для управления tabindex больше не требуется JavaScript. Запрос scroll-state делает все слайды, кроме текущего, инертными.

Постраничные карусели

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

Используйте контейнер с role="region" и одним элементом с role="tabpanel" внутри. Содержимое этой tabpanel будет обновляться в соответствии с активной вкладкой или страницей.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

Для управления интерактивностью используйте хитрый анимационный приём, привязанный к временной шкале view() . Это гарантирует, что последовательность табуляции будет охватывать только те элементы, которые в данный момент видны на экране.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

Список содержания

Если содержимое по сути является списком, используйте элемент <ul> для правильной семантики .

Например:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

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

Карусели с несколькими элементами

Этот шаблон предназначен для каруселей, где несколько дочерних элементов могут быть видны и читабельны одновременно. Например, полка «Похожие товары» на сайте электронной коммерции.

Эти карусели ведут себя по-разному в зависимости от вашего ответа на следующий вопрос: направляете ли вы внимание пользователя на один элемент за раз или позволяете ему свободно получать доступ ко всему видимому контенту?

Шаблон 1: один интерактивный элемент среди видимых элементов

В этой модели видны несколько элементов, но интерактивным является только основной, или «текущий», элемент. Остальные видимые элементы инертны. Этот шаблон полезен для последовательного перемещения пользователя по набору элементов.

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

  • Используйте запрос контейнера с прокруткой состояния, чтобы применить интерактивность: инертность к неактивным элементам.
  • Добавьте достаточно отступов вокруг элементов, чтобы каждый элемент можно было прикрепить к основной позиции (например, к центру области прокрутки). Это придаст модели пошаговой навигации ощущение продуманности и плавности.

Шаблон 2: все видимые элементы интерактивны

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

Для этого шаблона:

  • Используйте элемент <ul> , если содержимое семантически представляет собой список, поскольку это обеспечивает правильный контекст для пользователей программ чтения с экрана.
  • Не используйте управление интерактивностью ( interactivity: inert ). Весь видимый контент должен оставаться в дереве доступности и быть доступен с помощью клавиши Tab на клавиатуре.

Подведение итогов

CSS Overflow 5 позволяет декларативно создавать стандартные интерактивные шаблоны каруселей, минимизируя проблемы с доступностью. Сочетая семантический HTML, современные CSS, такие как состояние прокрутки и интерактивность, а также правильные роли ARIA, вы можете создавать высокопроизводительные и доступные интерфейсы, которые интерактивны с первого взгляда.

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