Доступна карусель (слайдер)

Оновлено 14 жовтня 2026 · 6 хв читання

Слайдер на головній і каруселі зображень товарів належать до найбільш критикованих патернів доступності — почасти тому, що їх часто будують погано, почасти тому, що люди рідко дивляться далі першого слайда. Якщо ви його використовуєте, зробіть його керованим. Ця сторінка входить до серії доступні UI-патерни.

Коли використовувати карусель

APG описує карусель як таку, що показує «набір елементів, званих слайдами, послідовно відображаючи підмножину з одного чи кількох слайдів». Використовуйте її для зображень товару на сторінці товару або короткого набору пов'язаних елементів. Для акцій, кожна з яких важлива, розгляньте показ окремими блоками: нічого не приховано, нічого не рухається.

APG вказує на дві конкретні проблеми: приховані слайди не повинні лишатися доступними для програм зчитування з екрана (наприклад, якщо їх просто винесено за межі екрана), а неоголошене перемикання плутає користувачів програм зчитування з екрана, які раптом опиняються у вмісті іншого слайда.

Відповідні критерії WCAG

2.2.2 Пауза, Зупинення, Приховування (A): рухомий вміст, який «(1) запускається автоматично, (2) триває понад п'ять секунд і (3) подається паралельно з іншим вмістом», потребує «механізму, що дає користувачеві змогу призупинити, зупинити чи приховати його». W3C наводить автоперемикані презентації серед прикладів.
2.1.1 Клавіатура (A): усі елементи керування працюють з клавіатури; свайп не є єдиним способом.
2.5.1 Керування жестами (A): свайп потребує альтернативи одним вказівником, як-от кнопки «Далі» й «Назад».
1.1.1 Нетекстовий вміст (A): зображення слайдів мають текстові альтернативи; текст усередині зображень банерів також має бути в альтернативі.
1.4.5 Зображення тексту (AA): рекламний текст має бути справжнім текстом, а не «запеченим» у зображення.
4.1.2 Назва, роль, значення (A): кнопки мають назви; засіб вибору показує поточний слайд.
2.5.8 Розмір активних елементів (мінімальні вимоги) (AA): індикатори-крапки часто значно менші за 24 на 24 CSS-пікселі.
2.4.3 Порядок переміщення фокуса (A): приховані слайди не отримують фокус.

Приклад коду

<section class="carousel" aria-roledescription="carousel" aria-label="Осінні пропозиції">
  <button type="button" class="rotation" aria-label="Зупинити перемикання слайдів">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Попередній слайд">‹</button>
  <button type="button" aria-controls="slides" aria-label="Наступний слайд">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 з 3">
      <a href="/uk/autumn-jackets">
        <img src="jackets.jpg" alt="Осінні куртки, знижка 20 % до неділі">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 з 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 з 3" hidden>…</div>
  </div>
</section>

Що визначає APG:

Контейнер — це region (section з назвою) або group з aria-roledescription="carousel" і підписом, який не містить слова «карусель».
Кожен слайд — це group з aria-roledescription="slide" і назвою; якщо слайди не мають унікальних назв, спрацює позиція на кшталт «3 з 10».
Обгортка слайдів має aria-atomic="false"; aria-live дорівнює off, поки карусель перемикається автоматично, і polite, коли ні, щоб ручні зміни оголошувалися.
Підпис кнопки перемикання описує дію — «Зупинити перемикання слайдів» або «Запустити перемикання слайдів», — тож aria-pressed не потрібен.
Перемикання зупиняється, коли фокус клавіатури потрапляє в карусель, і відновлюється лише на прохання користувача; воно також призупиняється, поки над каруселлю наведено курсор миші.
Вибір слайда можна побудувати як вкладки (слайди стають tabpanel) або як підписану групу кнопок, де кнопка поточного слайда має aria-disabled="true", а не disabled, щоб лишатися в послідовності Tab.

Взаємодія з клавіатури

Клавіша	Функція
Tab / Shift + Tab	Переміщує по елементах керування та вмісту видимого слайда в порядку сторінки
Enter або Space на кнопці перемикання	Зупиняє чи запускає перемикання; підпис змінюється
Enter або Space на «Попередній» / «Наступний»	Показує попередній чи наступний слайд; фокус лишається на кнопці, щоб її можна було натиснути знову
Стрілки	Лише у варіанті засобу вибору з вкладками, за патерном вкладок

APG ставить елемент керування перемиканням першим у послідовності Tab, перед рухомим вмістом.

Типові помилки в інтернет-магазинах

Слайдери на головній, що перемикаються кожні три секунди без кнопки паузи.
Приховані слайди, винесені за межі екрана, з посиланнями, які все ще отримують фокус, тож Tab стрибає в невидимий вміст.
Крапки як єдина навігація, крихітні й без назв («кнопка», «кнопка», «кнопка»).
Рекламний текст лише всередині зображення з alt="банер".
Каруселі зображень товару, що працюють лише зі свайпом на мобільному й лише з мініатюрами, які є елементами div, на десктопі.
Перемикання триває, поки користувач читає або переходить Tab у слайд.
Клоновані слайди для нескінченного циклу, що дублюють посилання та ID.

Що знаходить автоматична перевірка, а що — ручне тестування

Автоматично (правило axe-core)	Що знаходить
`image-alt`, `role-img-alt`	Зображення слайдів без текстової альтернативи
`button-name`	Кнопки «Попередній», «Наступний», крапки й паузи без назви
`aria-hidden-focus`	Посилання з можливістю фокуса всередині слайдів, прихованих через `aria-hidden`
`duplicate-id-aria`	Дубльовані ID від клонованих слайдів, використані в посиланнях ARIA
`target-size`	Індикатори-крапки та стрілки, що надто малі
`color-contrast`	Текст поверх зображень слайдів із надто малим контрастом, де це можна виміряти
`marquee`, `blink`	Застарілі рухомі елементи

Усі вони є картками в нашій бібліотеці правил. 2.2.2 не можна перевірити автоматично: чи рухається слайдер, як довго і чи можна його призупинити, має оцінити людина. Також перевірте з клавіатури, що перемикання зупиняється при фокусі, що до прихованих слайдів не можна дістатися і що програма зчитування з екрана оголошує ручну зміну слайдів.

Запустіть безкоштовну перевірку однієї сторінки на головній. Це автоматична перевірка, а не повний аудит.

Часті запитання

Чи дозволяє WCAG каруселі з автоматичним перемиканням?

Так, але з можливістю їх зупинити. Критерій 2.2.2 «Пауза, зупинення, приховування» вимагає механізму паузи, зупинення чи приховування рухомого вмісту, який запускається автоматично, триває понад п'ять секунд і показується паралельно з іншим вмістом.

Які елементи керування потрібні доступній каруселі?

За APG: кнопки попереднього й наступного слайда, за потреби кнопки чи вкладки вибору слайда, а для каруселей з автоматичним перемиканням — кнопка зупинення й запуску перемикання, яка стоїть першою в порядку Tab.

Чи має перемикання зупинятися, коли користувач ставить фокус на карусель?

Так. APG каже, що перемикання зупиняється, коли фокус клавіатури потрапляє в карусель, і не відновлюється, доки користувач цього не попросить, а також призупиняється, поки над нею наведено курсор миші.

Як програми зчитування з екрана дізнаються, який слайд показано?

Кожен слайд — це група з aria-roledescription="slide" і назвою на кшталт «3 з 5», а контейнер слайдів має aria-live="polite", коли карусель не перемикається автоматично, тож ручну зміну слайдів оголошують.

Чи може автоматична перевірка протестувати карусель?

Вона знаходить зображення слайдів без альтернативного тексту, кнопки без назв, посилання з можливістю фокуса в прихованих слайдах і малі цілі. Вона не може перевірити, чи можна призупинити перемикання або чи воно зупиняється при фокусі.

Джерела

W3C WAI, APG Carousel pattern: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
W3C, Understanding 2.2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html