Содержание

Резиновая карусель на CSS

Карусели, несмотря на всю свою ущербность, продолжают отсаватся очень востребованным компонентом на тысячах сайтов. Чаще всего для из создания используется Javascript. В этой статье я попробую описать технику создания отзывчивой (резиновой, responsive) карусели на чистом CSS.

Для начала ДЕМО.

А теперь давайте разберемся как это работает. Для начала создадим структуру будущей карусели.

HTML:

<div>
    <input type="radio" checked="checked" name="carousel-selector" />
    <input type="radio" name="carousel-selector" />
    <input type="radio" name="carousel-selector" />
    <ul>
        <li>
            Текст 1
        </li>
        <li>
            Текст 2
        </li>
        <li>
            Текст 3
        </li>
    </ul>
<!-- Yandex.RTB R-A-2268186-1 --><div class=inpostad id=yandex_rtb_R-A-2268186-4-10></div>
    <ul>
        <li>
            <label for="slide1"></label>
        </li>
        <li>
            <label for="slide2"></label>
        </li>
        <li>
            <label for="slide3"></label>
        </li>
    </ul>
</div>

CSS:

. carousel-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 30%;
    background-color: #eee;
    overflow: hidden;
}

Параметр padding-bottom: 30%; задает высоту нашей карусели, в данном случае 30 процентов от ширины.

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

HTML:

<input type="radio" checked="checked" name="carousel-selector" />
<input type="radio" name="carousel-selector" />
<input type="radio" name="carousel-selector" />

CSS:

.carousel-selector {
    display: none;
}

Сами элементы карусели находятся в списке carousel-items. В этом примере я сделал их всего три, от этого зависят и их параметры. Классы carousel-item-blue, carousel-item-red и carousel-item-green необходимы лишь для стилизации каждого элемента и обязательными не являются. Так же присутствуют анимации, чтобы переключение между элементами выглядело красиво.

HTML:

<ul>
    <li>
        Текст 1
    </li>
<!-- Yandex.RTB R-A-2268186-1 --><div class=inpostad id=yandex_rtb_R-A-2268186-4-25></div>
    <li>
        Текст 2
    </li>
    <li>
        Текст 3
    </li>
</ul>

CSS:

.carousel-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    width: 300%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: left .5s ease-out;
    -o-transition: left .5s ease-out;
    -ms-transition: left .5s ease-out;
    -moz-transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
}
.carousel-item {
    width: 33.33333333%;
    height: 100%;
    color: white;
}
.carousel-item-blue {
    background-color: blue;
}
.carousel-item-red {
    background-color: red;
}
.carousel-item-green {
    background-color: green;
}

В самом конце располагаем наши кнопки переключения слайдов.

HTML:

<ul>
    <li>
        <label for="slide1"></label>
    </li>
    <li>
        <label for="slide2"></label>
    </li>
    <li>
        <label for="slide3"></label>
    </li>
</ul>

CSS:

.carousel-labels {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
.carousel-selector {
    display: none;
}
.carousel-label {
    display: inline-block;
}
.carousel-label label {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: white;
    display: block;
    cursor: pointer;
}

А теперь подробнее про саму смену слайдов. С помощью CSS-селекторов мы задаем смену позиции для слайдов в зависимости от выбраного радио-баттана: #slide1:checked ~ .carousel-items

. Так же в CSS меняем наши кнопки переключения.

CSS:

#slide1:checked ~ .carousel-items {
    left: 0;
}
#slide1:checked ~ .carousel-labels .carousel-label:nth-child(1) label {
    background-color: black;
}
#slide2:checked ~ .carousel-items {
    left: -100%;
}
#slide2:checked ~ .carousel-labels .carousel-label:nth-child(2) label {
    background-color: black;
}
#slide3:checked ~ .carousel-items {
    left: -200%;
}
#slide3:checked ~ .carousel-labels .carousel-label:nth-child(3) label {
    background-color: black;
}

Еще раз ДЕМО.

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

Карусель. Компоненты · Bootstrap. Версия v4.3.1

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

Как это работает

«Карусель» — это слайд-шоу для отображения серии содержимого, созданная на основе CSS 3D-трансформаций и немного на JS. Она работает с текстом, изображениями или обычной разметкой. Она также поддерживает кнопки “next/prev”.

В браузерах с поддержкой API видимости страниц элементы карусели не будут сменяться, когда страница невидима пользователю (например, когда вкладка браузера неактивна, или окно браузера «минимизировано» — кнопка «квадратик» слева от крестика «закрыть браузер», и т.д.).

Эффект анимации этого компонента зависит от медиа запроса prefers-reduced-motion. Смотрите раздел о редукции анимаций.

Пожалуйста, знайте, что вложенные карусели не поддерживаются, а карусели в целом не очень желательны «стандартам доступности».

В итоге, если вы используете карусели BS4, это требует подключения util.js.

Пример

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

Пока карусели поддерживают кнопки «prev/next», их не надо добавлять явно. Добавьте и настраивайте их самостоятельно.

Класс .active добавляют к одному из слайдов, иначе карусель не будет видно. Также для внедрения элементов управления необходимо задать уникальный ID элементу класса .carousel, особенно если у вас много каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут

data-target (или href для <a>), который совпадает с ID элемента класса .carousel.

Только слайды

Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block и .w-100, отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.

PlaceholderFirst slide

PlaceholderSecond slide

PlaceholderThird slide

<div data-ride="carousel">
  <div>
    <div>
        <img src=".
 
 .." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
</div>

С органами управления

Добавляет кнопки prev/next:

PlaceholderFirst slide

PlaceholderSecond slide

PlaceholderThird slide

Previous Next 

<div data-ride="carousel">
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <a href="#carouselExampleControls" role="button" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a href="#carouselExampleControls" role="button" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>

С индикаторами

Вы также можете добавить индикаторы к карусели, наряду с органами управления.

PlaceholderFirst slide

PlaceholderSecond slide

PlaceholderThird slide

Previous Next 

<div data-ride="carousel">
  <ol>
    <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt=". ..">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <a href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a href="#carouselExampleIndicators" role="button" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>
Требуется начальный активный элемент

Необходимо добавлять класс .active в один из слайдов, иначе карусель не будет видна.

С надписями

Добавляйте надписи в ваши слайды с помощью добавления элемента класса .carousel-caption в любой элемент карусели класса .carousel-item. Надписи легко скрыть на меньших устройствах, используя утилиты отображения. Они спрятаны первоначально с помощью класса . d-none и показываем их опять на средних устройствах с помощью класса .d-md-block.

PlaceholderFirst slide
First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

PlaceholderSecond slide
Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

PlaceholderThird slide
Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next 

<div>
  <div data-ride="carousel">
    <ol>
      <li data-target="#carouselExampleCaptions" data-slide-to="0"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div>
      <div>
        <img src=". .." alt="...">
        <div>
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div>
        <img src="..." alt="...">
        <div>
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div>
        <img src="..." alt="...">
        <div>
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span aria-hidden="true"></span>
      <span>Previous</span>
    </a>
    <a href="#carouselExampleCaptions" role="button" data-slide="next">
      <span aria-hidden="true"></span>
      <span>Next</span>
    </a>
  </div>
</div>

Склейка

Добавьте . carousel-fade в вашу карусель для анимации слайдов с постепенным переходом на следующий слайд.

PlaceholderFirst slide

PlaceholderSecond slide

PlaceholderThird slide

Previous Next 

<div data-ride="carousel">
  <div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <a href="#carouselExampleFade" role="button" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a href="#carouselExampleFade" role="button" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>

Индивидуальный интервал

. carousel-item

Добавьте data-interval="" к элементу .carousel-item, чтобы изменить время задержки между автоматическим циклическим переходом к следующему элементу.

PlaceholderFirst slide

PlaceholderSecond slide

PlaceholderThird slide

Previous Next 

<div data-ride="carousel">
  <div>
    <div data-interval="10000">
      <img src="..." alt="...">
    </div>
    <div data-interval="2000">
      <img src="..." alt="...">
    </div>
    <div>
      <img src="..." alt="...">
    </div>
  </div>
  <a href="#carouselExampleInterval" role="button" data-slide="prev">
    <span aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a href="#carouselExampleInterval" role="button" data-slide="next">
    <span aria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>

Использование

Через атрибуты

Атрибут data-slide принимает значения prev или next, которые изменяют позицию слайда относительно его текущей позиции. Или используйте data-slide-to для перехода на слайд с индексом, например, 2: data-slide-to="2", индексы слайдов начинаются с 0.

Атрибут data-ride="carousel" используется для создания анимации карусели. Его нельзя сочетать с явной инициализацией карусели через JavaScript.

Через JavaScript

Вызывайте карусель вручную:

$('.carousel').carousel()

Параметры

Параметры можно передавать через атрибуты или JavaScript. Для использования атрибутов добавьте название параметра в data-, например: data-interval="".

Имя Тип По умолч. Описание
interval число 5000 Время задержки между автоматической сменой слайда. Если false – карусель не будет автоматически сменять слайды.
keyboard boolean true Будет ли карусель реагировать на события клавиатуры.
pause строка | boolean «hover»

Если стоит "hover" – смена слайдов тормозится по mouseenter, и начинает смену по mouseleave. Если false – наведение на карусель не остановит смену слайдов.

Устройства, активируемые касанием: "hover" – пауза при touchend (когда пользователь закончил взаимодействие с каруселью) на два интервала, потом опять смена слайдов. Заметьте, что это поведение – дополнение к описанному выше поведению мыши.
ride строка false Автосмена слайдов карусели после первой ручной смены слайда юзером. Если carousel – автосмена включается после загрузки.
wrap boolean true Должна ли карусель сменяться плавно или дискретно.
touch boolean true Карусель должна поддерживать взаимодействие влево / вправо на сенсорных устройствах.

Методы

Асинхронные методы и переходы

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

Смотрите нашу документацию по JavaScript.

.carousel(options)

Инициализирует объект object карусели с установленными параметрами и начинает смену слайдов.

$('. carousel').carousel({
  interval: 2000
})
.carousel('cycle')

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

.carousel('pause')

Останавливает смену слайдов.

.carousel(number)

Прокручивает слайды до определенного момента (основано на 0, схоже с рядами). Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).

.carousel('prev')

Прокручивает к предыдущему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).

.carousel('next')

К следующему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid. bs.carousel).

.carousel('dispose')

Уничтожает карусель элемента.

События

Карусель в Bootstrap располагает 2-мя событиями для применения функциональности. У обоих событий есть следующие дополнительные свойства:

  • direction: Направление, в котором движутся слайды ("left" или "right").
  • relatedTarget: Элемент DOM, который движется на место «пролистанного» слайда.
  • from: Индекс текущего слайда
  • to: Индекс следующего слайда

Все события карусели запускаются непосредственно в карусель (т.е. в <div>).

Тип события Описание
slide.bs.carousel Это событие запускается немедленно, когда вызван метод slide.
slid.bs.carousel Это событие запускается, когда карусель завершила переходы своих слайдов. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Изменение продолжительности перехода

Длительность перехода .carousel-item можно изменять в переменной Sass $carousel-transition перед компиляцией, или обычным CSS (при использовании компилированного CSS). Если применяются множественные переходы, удостоверьтесь, что переход трансформации задан первым (например: transition: transform 2s ease, opacity .5s ease-out).

15 каруселей CSS

Коллекция бесплатных примеров кода карусели HTML и чистого CSS : адаптивных, горизонтальных и вертикальных . Обновление декабрьской коллекции 2019 года. 6 новых предметов.

  1. Карусели Bootstrap
  2. Карусели JavaScript
  3. Карусели jQuery
  4. Реагирующие карусели
  5. Карусели Vue
  1. Горизонтальные карусели
  2. Вертикальные карусели
О коде

Переменные CSS 3D-карусель

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Карусель плейлистов — только CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Ползунок-карусель только для CSS

Эта карусель создана только с помощью HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Чистая карусель CSS

Анимированная карусель на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Карусель

Карусель на чистом CSS с миниатюрами.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Адаптивная скользящая карусель

Pure CSS, отзывчивая скользящая карусель.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Карусель карт CSS-Tricks

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Многонаправленная карусель электронной почты

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

О коде

Вращающаяся 3D-карусель

Pure CSS 3D-карусель, которая вращается.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Бесконечная карусель автовоспроизведения

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

О коде

Чистые карусели CSS

Использование того, как элементы ведут себя в модели DOM, в сочетании с функциями CSS делает реализацию «карусели» на чистом CSS относительно тривиальной.

С код

CSS Carousel с элементами управления с клавиатуры

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Очень простая карусель на чистом CSS

Без JavaScript, крошечная разметка, минимум CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Вертикальная карусельная анимация CSS

Бесконечно вращающаяся вертикальная карусельная анимация. Только CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Чистая карусель CSS

Базовая карусель с радио.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Как сделать полностью доступную карусель только на CSS | Дженнифер Вьерцох

Нет JavaScript! Никаких плагинов jQuery! 18 октября 2021

Фото Oneisha Lee на Unsplash

Прежде всего, что такое карусель? Карусели показывают набор элементов один за другим. Также известны как «слайд-шоу» и «слайдеры». Часто они используются для размещения большего количества контента на веб-сайте, который в противном случае не поместился бы.

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

— Брэд Фрост

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

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

Не все карусели одинаковы с точки зрения реализации и функций. Но некоторые общие факторы идут не так с доступностью. Некоторые из распространенных проблем доступности в каруселях:

  1. Почти каждая карусель имеет различную структуру. Таким образом, также нет стандартизации для программ чтения с экрана, помогающих ориентироваться.
  2. Многие пользователи средств чтения с экрана не могут определить, когда их виртуальный курсор входит в карусель или покидает ее. Это приводит к тому, что они не знают, существует ли он вообще и как выйти.
  3. Очень часто элементы управления в слайд-шоу имеют слишком низкую контрастность или малы по сравнению с содержимым, которое они накладывают. Это затрудняет их использование пользователями.
  4. Если слайды карусели вращаются, пользователи экрана и клавиатуры могут запутаться. Им сложно понять содержание, которое постоянно меняется впереди. Автоповорот также может вызывать проблемы у пользователей с когнитивными расстройствами.

Для исследования я создал несколько прототипов на трех готовых слайдерах:

  1. UiKit Slider or Slideshow — Поставляется в комплекте и имеет небольшой вес. Но до этого я использовал только более мелкие вещи из UiKit, такие как макет кладки или аккордеон. Карусель — это уже нечто большее. Кроме того, не предусматривалась клавиатурная навигация и доступ через вкладку.
  2. Swiper Slider — Эта карусель может многое и позволяет импортировать только ядро ​​swiper и фактические компоненты, которые вам нужны. Эта карусель полностью доступна.
  3. a11y-slider — a11y-slider полностью построен на JavaScript и его сложно настроить. Но что меня вдохновило, так это возможность полностью пропустить карусель.

Вскоре у меня появилось ощущение, что нам все это не нужно, и я был прав. Мне удалось полностью установить карусель с помощью CSS scroll-snap. Таким образом, я не зависел ни от одного из готовых решений JavaScript.

Шаг 1 — Настройка базовой структуры HTML/CSS

Настройка базовой структуры HTML/CSS

Шаг 2 — Добавление привязки прокрутки

С помощью привязки прокрутки CSS вы можете зафиксировать элемент в определенном положении во время прокрутки. Это обеспечивает отличный пользовательский опыт при взаимодействии с вашей каруселью.

Scroll-snap уже имеет хороший браузерный дистрибутив.

caniuse.com

Все, что нам нужно для функционирующей карусели, уже находится в этой области: 

 .slides { 
  overflow-x: scroll; 
 тип прокрутки: x обязательно; 
 поведение прокрутки: гладкое;  
 }

Давайте посмотрим, что они делают в деталях: 

 overflow-x: scroll;

прокрутка
Содержимое обрезается по горизонтали в поле заполнения. Браузер решает, будет ли содержимое элемента отображаться с полосами прокрутки или без них.

 тип прокрутки: x обязательно;

x
Позволяет привязываться к определенным точкам макета при прокрутке этих точек.

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

Добавьте к элементу слайдов следующее: 

 . slides-item { 
  scroll-snap-align: start; 
  }

Давайте посмотрим, что он делает в деталях: 

 scroll-snap-align: start;

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

Add Scroll-Snap

Шаг 3 — Удаление полосы прокрутки с помощью CSS

Если вы хотите скрыть полосу прокрутки, вы можете добавить следующее. Решение работает очень хорошо. Есть преимущества в том, чтобы держать полосу прокрутки видимой, лично я не нахожу это очень красивым.

  // Скрывает полосу прокрутки в Firefox  
 .slides { 
 scrollbar-width: none; 
 }  // Скрывает полосу прокрутки в браузерах с поддержкой WebKit и Blink  
 .slides::-webkit-scrollbar { 
 display: none; 
 }
Удаление полосы прокрутки с помощью CSS

Шаг 4. Сделайте карусель доступной

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

Чтобы сделать карусели более эффективными, следует помнить о некоторых моментах:

  1. Tabindex
    Всеми функциями, включая навигацию между элементами карусели, можно управлять с клавиатуры через «фокус».
    Добавьте значение 0 в tabindex, это поместит элемент в порядок навигации по умолчанию. Это позволяет элементам, которые обычно не фокусируются (например,
  2. Aria-Label
    Добавить универсальный aria-label (например, aria-label="carousel" ) для элемента-обертки и слайдов, поэтому пользователи средств чтения с экрана точно знают, как настроена карусель и как она работает.
    Если метка aria не установлена, элемент HTML использует свое текстовое содержимое для более подробного описания.
  3. Пропустить содержимое
    Мы также позволяем программам чтения с экрана пропускать карусель с помощью скрытой ссылки «пропустить» при фокусе клавиатуры. В этом случае небольшое наложение перекрывает карусель и дает возможность перейти к следующему элементу.
  4. Не использовать автовоспроизведение
    Если карусель вращается, у пользователей могут возникнуть трудности с чтением содержимого каждого слайда до его изменения. В результате доступ с клавиатуры к каруселям и их содержимому может стать затруднительным или невозможным. Об изменении содержимого часто не сообщается пользователям программ чтения с экрана.
  5. Цветовой контраст
    Всегда проверяйте цветовой контраст и размер текста, отображаемого на слайде. Кроме того, чтобы пользователи могли подключаться к элементам управления, отображайте статус для пользователя во время фокусировки или наведения мыши.

    No related posts.