Altwise

Animations, background video and motion: making a moving website comfortable for everyone

How to keep hero videos, sliders, parallax and animations on a small business website without causing problems: pause buttons, prefers-reduced-motion CSS, no flashing, no autoplay sound, platform notes and a 10-minute check.

Moving hero videos, sliding banners, parallax scrolling and animated text are easier than ever to add, and AI video tools now make a looping clip in minutes. Motion can look great, but for some visitors it gets in the way: people with vestibular disorders can feel dizzy or sick from large movement, people with attention or reading difficulties can't focus on text next to something moving, and flashing can trigger seizures in people with photosensitive epilepsy. Screen reader users also lose their place when audio starts on its own. The good news is that you can keep motion and still fix this with a pause button, a few lines of CSS and a couple of checks.

1. Give moving content a pause button

If anything moves, blinks or scrolls on its own for more than five seconds and sits next to other content, people need a way to pause, stop or hide it (2.2.2 Pause, Stop, Hide). That covers looping hero videos, auto-advancing sliders, scrolling tickers and animated GIFs. The button should be easy to find, reachable with the keyboard and say what it does. A short clip that stops by itself within five seconds doesn't need one.

<div class="hero">
  <video id="heroVideo" autoplay muted loop playsinline aria-hidden="true">
    <source src="hero.mp4" type="video/mp4">
  </video>
  <button type="button" id="heroToggle" aria-pressed="false">Pause background video</button>
  <h1>Example Bakery</h1>
</div>
<script>
  const v = document.getElementById("heroVideo");
  const b = document.getElementById("heroToggle");
  b.addEventListener("click", () => {
    if (v.paused) { v.play(); b.textContent = "Pause background video"; b.setAttribute("aria-pressed", "false"); }
    else { v.pause(); b.textContent = "Play background video"; b.setAttribute("aria-pressed", "true"); }
  });
</script>

The business name is example text. Use aria-hidden="true" only on a purely decorative video with no information in it; if the video shows something people need, give it captions and a text summary instead (see video captions).

2. Respect "reduce motion"

Phones and computers have a setting that asks websites for less motion (Reduce Motion on Apple devices, "Show animations" off in Windows, "Remove animations" on Android). Your site can read it with the prefers-reduced-motion media query and switch off parallax, big slide-ins and auto-playing video for those visitors. WCAG's 2.3.3 Animation from Interactions (a stricter AAA item) describes this, and it's a quick win even if you aim for AA.

/* Calm the page for visitors who asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .parallax { background-attachment: scroll; }   /* example class name */
}
<script>
  // Don't auto-play the hero video for visitors who prefer reduced motion
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    const v = document.getElementById("heroVideo");
    if (v) { v.removeAttribute("autoplay"); v.pause(); }
  }
</script>

Show a still image (the video's poster frame) instead, so the design still works.

3. No flashing

Nothing on the page should flash more than three times in any one second (2.3.1 Three Flashes or Below Threshold). Watch AI-generated clips, fast-cut promo videos, strobe effects in event or nightlife videos and "sale" banners that blink. If a clip has rapid flashes or strobing, cut that part or don't use it on the site.

4. No sound on its own

If audio plays automatically for more than three seconds, people need a way to stop it or turn it down separately from their device volume (1.4.2 Audio Control). The simplest fix is to keep background videos muted and let visitors press play for anything with sound.

5. Sliders and carousels

Auto-advancing sliders are the most common moving content on small business sites. Give them a visible pause button, stop them on hover and keyboard focus, and make the arrows and dots real buttons with names. Better still, show the slides as a simple list. See accessible image sliders.

6. Where to change this on common platforms

Settings names change often, so check your platform's own help pages for the current option.

Common mistakes

A 10-minute check you can do today

  1. Open your home page and wait 10 seconds. Does anything move, loop or change on its own? Can you find a pause button?
  2. Press Tab until you reach that pause button. Can you see it and press it with Enter or Space?
  3. Turn on Reduce Motion (or switch animations off) on your phone or computer and reload. Does the motion calm down?
  4. Watch your hero and promo videos once. Any flashing or strobing?
  5. Listen. Does any sound start without you pressing play?

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. It can flag a video or audio element that plays automatically, slider buttons with no name and low-contrast text where it can measure it. It can't watch your video for flashing, tell whether a pause button really stops the motion or test how your site behaves with reduce motion turned on, which is why the 10-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: accessible image sliders, video captions, pop-ups and chat widgets, website accessibility checklist.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Building a 3D, game-like or scroll-driven portfolio? See accessible interactive portfolio sites.

Making your site easier to follow for visitors with ADHD, autism or dyslexia? See our cognitive accessibility guide.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.