---
title: "Карусель у веб-дизайні: коли слайдер шкодить, а коли працює"
description: "Скільки людей насправді клікають по слайдеру, чому автопрокрутка порушує WCAG рівня A, як карусель псує LCP і CLS — і коли вона все ж доречна."
url: https://apri-code.com/blog/karusel-u-veb-dyzayni/
language: uk
published: 2026-08-13
updated: 2026-09-03
author: "Богдан Кононенко"
publisher: Apricode
---

# Карусель у веб-дизайні: коли слайдер шкодить, а коли працює

Суперечка про карусель майже завжди йде без цифр. Одна сторона каже «слайдери мертві», друга — «клієнт хоче показати пʼять акцій одразу». Нижче чотири докази, які переводять розмову з рівня смаку на рівень фактів: клікова статистика першоджерела, критерій доступності рівня A, ціна в Core Web Vitals і SEO-спліт-тест. Плюс окремий розділ про випадки, коли карусель у веб-дизайні цілком доречна, бо рамка «карусель завжди зло» так само неправдива, як і «карусель обовʼязкова».

Спершу визначення, щоб не сперечатися про слова. W3C: карусель показує набір елементів по одному за раз; синоніми — «слайдшоу» і «слайдер». Там же W3C визнає, що каруселі є спірним патерном саме з погляду юзабіліті, бо їхній контент важко виявити.

## Доказ 1. Скільки людей насправді клікають по слайдеру

Найвідомішу статистику про каруселі — «1% кліків, 84% на першому слайді» — цитують десятки блогів, майже завжди без посилання. Першоджерело одне: Ерік Раньйон, який був розробником сайту Університету Нотр-Дам і опублікував власні дані в січні 2013 року. Даним понад десять років, читати їх треба з цією поправкою. Але це єдиний відкритий набір, де є абсолютні числа, а не переказ.

Ось що зафіксували на головній сторінці Нотр-Дам за період спостереження:

- 28 928 кліків по слайдах каруселі;
- 315 665 ручних перегортань — перегортали більш ніж у десять разів частіше, ніж клікали;
- приблизно 1% відвідувачів головної взагалі клікав по каруселі;
- з тих, хто клікав, 84% кліків припадали на перший слайд, решта чотири ділили залишок приблизно порівну — по 4% кожен;
- у числах: 6 331 клік у першої позиції проти 1 509 у пʼятої.

Той самий автор навів дані ще з кількох сайтів. На трьох сайтах зі статичною каруселлю (без автопрокрутки) середня частка кліків була від 1,7% до 2,3%, а перший слот забирав 48–62% усіх кліків. Концентрація на першому слайді менша, ніж на Нотр-Дам, але вона нікуди не зникає.

І одразу контрприклад від того самого автора, бо без нього картина буде нечесною: один сайт з автопрокруткою дав найвищий показник — 8,8% відвідувачів головної клікали по слайду, а розподіл був 40% на першому слайді, 18% на другому й аж 11% на останньому. Тобто карусель здатна працювати. Твердження «слайдери завжди мертві» не підтверджується навіть тим джерелом, з якого його зазвичай виводять.

Практичний висновок із цих чисел інший: майже весь трафік каруселі забирає перший слайд, тож слайди з другого по пʼятий — це не «ще чотири шанси», а спосіб сховати чотири повідомлення. Якщо на кожному слайді свій заклик до дії, ви ділите увагу між пʼятьма кнопками замість того, щоб підсилити одну — про ієрархію закликів ми писали докладно в матеріалі [кнопки у веб-дизайні та конверсія](https://apri-code.com/blog/knopky-veb-dyzayn-konversiya/).

## Доказ 2. Автокарусель без паузи — порушення WCAG рівня A

Із замовником цей аргумент працює найкраще: норму видно в документі, її не треба доводити.

![Розвилка: якщо карусель гортає сама довше пʼяти секунд і не має кнопки паузи — це порушення WCAG рівня A; якщо рух запускає користувач або пауза є — критерій виконано.](https://apri-code.com/api/media/file/karusel-wcag.webp)

Критерій WCAG 2.2.2 «Pause, Stop, Hide» має рівень A — найнижчий, тобто обовʼязковий рівень відповідності. Формулювання: для будь-якого рухомого, миготливого чи прокручуваного контенту, який (1) стартує автоматично, (2) триває понад пʼять секунд і (3) показується паралельно з іншим контентом, має бути механізм поставити на паузу, зупинити або сховати його — окрім випадків, коли рух є невіддільною частиною самої активності. W3C прямо відносить «автоматично змінювані презентації» до контенту, що підпадає під цей критерій.

Перекладіть на практику: типова карусель героя, яка сама гортає слайди кожні 5 секунд і не має кнопки паузи, не проходить рівень A. Не «не дуже зручна» — не проходить.

WebAIM додає, що саме ламається технічно:

- коли слайд із клавіатурним фокусом зникає під час автопрокрутки, фокус втрачається;
- неправильно реалізовані каруселі мають слайди, які приймають клавіатурний фокус, поки вони приховані — користувач табом «провалюється» у невидимий контент;
- користувач мусить мати доступний і з клавіатури, і мишею спосіб поставити на паузу, зупинити чи сховати автоматичний рух;
- кнопки паузи, «наступний» і «попередній» мають бути саме елементами `<button>`, а не посиланнями;
- медіазапит `prefers-reduced-motion` — офіційно рекомендований механізм для користувачів, яких рух на сторінці сильно відволікає.

Патерн ARIA APG від W3C задає решту: контейнер із роллю region або group та `aria-roledescription="carousel"`, кожен слайд — `role="group"` з `aria-roledescription="slide"`. Обертання має зупинятися, щойно клавіатурний фокус потрапляє в карусель, і не відновлюватися без явного запиту користувача; так само воно зупиняється при наведенні миші.

Кому це шкодить найбільше, перелічує Nielsen Norman Group: людям із порушеннями моторики, людям з низьким рівнем читання та іноземцям, які читають сайт не рідною мовою — вони просто не встигають прочитати панель до того, як вона зникне.

## Доказ 3. Карусель коштує вам LCP і накопичує CLS

Перший слайд каруселі героя — це, як правило, велике зображення вгорі сторінки. За визначенням web.dev, кандидатами на LCP є елементи `<img>` та елементи з фоновою картинкою через `url()`. Тобто перший слайд героя-каруселі майже завжди і є LCP-елементом сторінки, а хорошим LCP вважається 2,5 секунди або менше. І якщо слайди не завантажуються ліниво, браузер тягне не одну картинку, а всі: скрипт слайдера, розмітку пʼяти слайдів і їхні зображення.

![Ланцюг: карусель героя ставить велике зображення вгорі сторінки, воно стає LCP-елементом, автоперемикання зсуває сусідні блоки, і в підсумку просідають LCP і CLS.](https://apri-code.com/api/media/file/karusel-perf.webp)

З CLS механіка ще цікавіша. Зсуви, що йдуть один за одним з інтервалом менше секунди, рахуються як одне «вікно сесії» тривалістю до 5 секунд. Автокарусель, яка перемикає слайди різної висоти або підвантажує картинку із запізненням, бʼє саме в цей режим накопичення — кілька зсувів підряд складаються в одне вікно з великим сумарним значенням. Пороги CLS і решту метрик ми розбирали в матеріалі [Core Web Vitals простими словами](https://apri-code.com/blog/core-web-vitals-2026/), а що ще гальмує завантаження — у статті про [швидкість сайту](https://apri-code.com/blog/shvydkist-saitu-pryskoryty-zavantazhennia/).

NN/g забороняє автопрокрутку на мобільних із двох причин, і перша з них саме перформансна: вона сповільнює сторінку, а друга — короткі мобільні екрани люди й так швидко гортають. Baymard у своїх вимогах до мобільних каруселей окремим пунктом ставить швидке завантаження слайдів.

## Доказ 4. Спліт-тест: що дало прибирання каруселі

SearchPilot провів SEO-спліт-тест: прибрали карусель товарів на категорійних сторінках e-commerce. Уже наступного дня органічний трафік зріс приблизно на 4 000 сесій, зростання трималося всі 11 днів тесту, підсумок — +29% органічного трафіку.

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

## Мобільні: окремий набір правил

Мобільна карусель ламається інакше, ніж десктопна. NN/g: крапки-індикатори особливо погано працюють на мобільних, бо люди їх часто просто не помічають. Велике зображення не гарантує уваги — люди часто одразу прокручують такі блоки й пропускають увесь контент усередині. А карусель, яка виглядає як рекламний банер, потрапляє під банерну сліпоту: анімовану рекламу взагалі помічають лише в 27% випадків.

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

## Коли карусель доречна

Тепер чесна друга половина. Карусель на головній лишається масовим патерном: 33% провідних e-commerce-сайтів США та Європи мають її на десктопі. Проблема не в самому факті наявності. Baymard фіксує, що 46% усіх каруселей на головних сторінках e-commerce мають проблеми з UX-продуктивністю. Тобто більшість зроблена погано, а не існує помилково.

![Порівняння: карусель доречна там, де користувач сам гортає однорідні елементи — галерея товару, новинні заголовки; і шкодить там, де в слайди ховають різні повідомлення з окремими закликами до дії.](https://apri-code.com/api/media/file/karusel-fit.webp)

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

Галерея товару — найпереконливіший випадок. Baymard: мобільні користувачі схильні свайпати, і щойно існування прихованих зображень позначене візуально, вони їх майже не пропускають. Умова — саме позначка. Головна помилка обрізаної галереї в тому, що користувач вважає видимі за замовчуванням мініатюри повним набором. У недавньому тестуванні Baymard на 75% мобільних сайтів замість мініатюр використовували крапки-індикатори.

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

## Якщо карусель усе-таки лишається: чек-лист

Правила нижче — не наші, а зведення з NN/g, Baymard, W3C і WebAIM.

1. **Без автопрокрутки за замовчуванням.** Базове правило NN/g: показувати нову панель лише тоді, коли користувач сам про це просить. На мобільних автопрокрутку не вмикати взагалі.
2. **Якщо автопрокрутка на десктопі потрібна** — інтервал 5–7 секунд для слайдів із мінімумом тексту, пауза при наведенні, повна зупинка після ручної взаємодії (Baymard). Поріг WCAG — пʼять секунд, тож кнопка паузи потрібна в будь-якому разі.
3. **Не більше 5 кадрів.** NN/g: далі користувачі просто не доходять.
4. **Слайди дублюються деінде.** Карусель — не єдиний шлях до контенту.
5. **Доступність за APG:** зупинка обертання при клавіатурному фокусі й наведенні, коректні ролі, справжні `<button>` для керування, повага до `prefers-reduced-motion`.
6. **Текст — у HTML, не в картинці.** І перше зображення оптимізоване, бо це ваш LCP.

Якщо після цього списку сенс каруселі зникає — це і є відповідь. Часто замість пʼяти слайдів достатньо одного екрана з одним чітким повідомленням; логіку такого прибирання ми розбирали в матеріалі про [мінімалізм у веб-дизайні](https://apri-code.com/blog/minimalizm-veb-dyzayn/), а те, які патерни інтерфейсу зараз працюють, — у [трендах UI/UX](https://apri-code.com/blog/trendy-ui-ux-2026/). Тоді задача перестає бути налаштуванням слайдера — це [робота над першим екраном](https://apri-code.com/poslugy/dyzayn/).

## FAQ

### Чи шкодить карусель на головній сторінці конверсії?

Прямого доказу «прибрали карусель — виросла конверсія» у відкритому доступі ми не знайшли, і вигадувати його не будемо. Задокументовано інше: близько 1% відвідувачів клікають по каруселі, 84% цих кліків забирає перший слайд (дані Нотр-Дам, 2013), а 46% каруселей на головних e-commerce-сайтів мають проблеми з UX (Baymard). Шкода не в самому блоці, а в тому, що важливе повідомлення ховається у слайді, якого не побачать.

### Скільки відвідувачів насправді клікають по слайдеру?

За першоджерелом: ~1% на головній Нотр-Дам, 1,7–2,3% на трьох сайтах зі статичною каруселлю і 8,8% на одному сайті з автопрокруткою. Розкид великий — тому «стандартної цифри» не існує, є діапазон.

### Чому не можна вмикати автопрокрутку слайдера?

Формально: автоматичний рух довше пʼяти секунд без механізму паузи порушує WCAG 2.2.2 рівня A. Практично: у прикладі NN/g панель мінялася кожні 5 секунд, потрібна пропозиція була видима лише 20% часу, і користувачка не змогла знайти знижку £100 на пральну машину, написану шрифтом у 98 пунктів угорі сторінки — «я не встигла прочитати, воно надто швидко блимає».

### Скільки слайдів має бути в каруселі?

NN/g рекомендує не більше 5 — далі користувачі просто не доходять. Клікові дані це підтверджують: пʼята позиція на Нотр-Дам зібрала 1 509 кліків проти 6 331 у першої.

### Чи впливає карусель на Core Web Vitals і швидкість сайту?

Так, у двох місцях. Перший слайд героя — типовий LCP-елемент, бо кандидатами на LCP є `<img>` і елементи з фоном через `url()`; хороший LCP — 2,5 с або менше. А зсуви, що йдуть підряд з інтервалом менше секунди, збираються в одне вікно сесії до 5 секунд, тож перемикання слайдів здатне накопичити CLS.

### Чи погіршує слайдер SEO-позиції сторінки?

Є один документований спліт-тест: SearchPilot прибрав карусель товарів на категорійних сторінках і за 11 днів отримав +29% органічного трафіку. Це один кейс і саме про трафік, а не про позиції чи конверсію.

### Як зробити карусель доступною для незрячих і клавіатури?

За ARIA APG: контейнер із роллю region або group та `aria-roledescription="carousel"`, кожен слайд — `role="group"` з `aria-roledescription="slide"`. Обертання зупиняється при вході клавіатурного фокуса і при наведенні миші й не відновлюється без явного запиту. Керування — справжні `<button>`. І стежте за двома поломками з переліку WebAIM: втрата фокуса, коли слайд зникає, і фокус на прихованих слайдах.

### Чим замінити карусель на головній сторінці?

Головне правило Baymard: карусель не має бути єдиним або основним шляхом до розділу чи товару. Тому найпростіша заміна — показати ті самі пункти статичним блоком, де все видно одночасно, а не по одному за раз. Якщо контенту забагато для одного екрана, питання не в каруселі, а в пріоритетах головної.

### Коли карусель усе-таки доречна?

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

### Яка оптимальна швидкість зміни слайдів?

Найкраща — жодна: NN/g радить показувати нову панель лише на запит користувача. Якщо автопрокрутка на десктопі все ж потрібна, Baymard називає 5–7 секунд для слайдів із мінімумом тексту, з паузою при наведенні й повною зупинкою після ручної взаємодії.

### Чи потрібна каруселі кнопка паузи за WCAG?

Так, якщо рух стартує автоматично, триває понад пʼять секунд і показується паралельно з іншим контентом. Це рівень A — обовʼязковий мінімум відповідності.

### Чи працюють крапки-індикатори на мобільних?

Як навігація — погано: NN/g зазначає, що на мобільних люди їх часто просто не помічають. Як позначка існування прихованого контенту в галереї товару — працюють: саме крапки використовують замість мініатюр на 75% мобільних сайтів у тестуванні Baymard, і щойно приховані зображення позначені, користувачі їх майже не пропускають.

## Підсумок

Карусель у веб-дизайні перевіряється не смаком, а чотирма вимірюваними речами: скільки людей клікають (мало, і майже всі по першому слайду), чи проходить блок рівень A за WCAG (автопрокрутка без паузи не проходить), скільки він коштує в LCP і CLS, і чи є до контенту інший шлях. Каруселі, що проходять усі чотири перевірки, існують: новинні стрічки й галереї товарів. Ті, що не проходять, зазвичай просто ховають пʼять повідомлень замість того, щоб донести одне.

Якщо у вас на головній стоїть слайдер і ви не знаєте, до якої категорії він належить, — покажіть сторінку, подивимось разом на цифри й доступність.

---

Source: https://apri-code.com/blog/karusel-u-veb-dyzayni/