Пауза, остановка и скрытие автоматически движущегося содержимого
Давайте пользователям контроль над каруселями и видео.
«Пауза, остановка и скрытие автоматически движущегося содержимого» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Give Users Control
If content moves on its own, the user needs a way out. WCAG calls this pause, stop, or hide for auto-moving content. ⏸️
What Counts as Auto-Moving
Think carousels, auto-advancing slideshows, scrolling tickers, and looping background video. Anything that animates without a user action qualifies.
The Five-Second Rule
The criterion targets motion that lasts more than five seconds and runs alongside other content. A brief intro animation is exempt.
Why It Matters
Moving content steals attention and can be impossible to read for users with cognitive or motion sensitivities. Control gives the page back.
Offer a Pause Control
The simplest fix is a real pause button. Let users freeze a carousel so they can finish reading a slide in peace.
<button aria-label="Pause slideshow">Pause</button>Stop Is Stronger Than Pause
Pause can resume; stop ends the motion for good. Either satisfies the rule, as long as the user is truly in charge.
Hide Is an Option Too
Sometimes letting users hide the moving element entirely is best. A dismiss control on a ticker removes the distraction outright.
Pause on Hover and Focus
A carousel should also pause when the user hovers or tabs into it, so reading or interacting never fights the auto-advance.
Make the Control Reachable
The pause button itself must be keyboard accessible with a clear label. A control nobody can find does not count.
Pair It With Reduced Motion
Best of all, do not auto-play for users who reduce motion. Combine the preference check with a visible pause control.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Skip the Auto-Advance
Honestly, many carousels work better with no auto-advance at all. Let users click through at their own pace and the problem disappears.
Quick Check
What does the pause, stop, or hide rule require?
Recap
Auto-moving content needs a user-controlled pause, stop, or hide. Make it keyboard reachable and skip auto-play when motion is reduced. ✅
Часто задаваемые вопросы
Урок «Пауза, остановка и скрытие автоматически движущегося содержимого» бесплатный?
Да — полный текст урока «Пауза, остановка и скрытие автоматически движущегося содержимого» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Пауза, остановка и скрытие автоматически движущегося содержимого»?
Давайте пользователям контроль над каруселями и видео. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Пауза, остановка и скрытие автоматически движущегося содержимого»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- prefers-reduced-motion в CSS и JS
- Вестибулярные расстройства и риски параллакса
- Порог в три вспышки для предотвращения судорог
- Пауза, остановка и скрытие автоматически движущегося содержимого