Dynamic content & motion

<div id="count"></div>

<script>
  // Updates the text, but nothing announces the change.
  document.getElementById('count').textContent = '3 results';
</script>

<div id="count" role="status" aria-live="polite"></div>

<script>
  // The empty live region was already in the DOM on load;
  // writing into it is announced politely.
  document.getElementById('count').textContent = '3 results';
</script>

<!-- Polite: routine confirmations -->
<p role="status" aria-live="polite" id="save-msg"></p>

<!-- Assertive: errors that must interrupt -->
<p role="alert" id="form-error"></p>

<script>
  saveMsg.textContent = 'Draft saved';            // announced politely
  formError.textContent = 'Could not save. Try again.'; // interrupts
</script>

.hero {
  animation: drift 8s linear infinite;  /* always on, no opt-out */
}

@keyframes drift {
  from { transform: translateX(0) scale(1); }
  to   { transform: translateX(-40px) scale(1.1); }
}

.hero {
  animation: drift 8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;          /* no drift, no parallax */
  }
}

<button type="button" id="toggle" aria-pressed="false">Pause animation</button>
<div class="hero" id="hero"></div>

<style>
  /* Safe baseline for users who asked to reduce motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
  .hero.is-paused { animation-play-state: paused; }
</style>

<script>
  toggle.addEventListener('click', () => {
    const paused = hero.classList.toggle('is-paused');
    toggle.setAttribute('aria-pressed', String(paused));
    toggle.textContent = paused ? 'Play animation' : 'Pause animation';
  });
</script>

.alert {
  background: #ff0000;
  /* ~6.7 flashes per second — over the limit, saturated red */
  animation: strobe 0.15s steps(1) infinite;
}

@keyframes strobe {
  50% { opacity: 0; }   /* full on/off blink */
}

<p class="alert" role="alert">
  <svg aria-hidden="true" focusable="false" width="20" height="20">…</svg>
  <strong>Connection lost.</strong> Retrying…
</p>

<style>
  .alert { background:#fde8e8; color:#8a1f1f; } /* steady, no animation */
</style>

.dot {
  /* 2s cycle = 0.5 flashes/sec; gentle 0.6–1 opacity, not on/off */
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

// Logs the user out after 15 min — no warning, no way to extend
setTimeout(logout, 15 * 60 * 1000);

// Carousel jumps to the next slide every 3s, always, no pause
setInterval(nextSlide, 3000);

<div role="alertdialog" aria-labelledby="to-title" hidden id="timeout">
  <h2 id="to-title">Still there?</h2>
  <p>Your session ends in 2 minutes.</p>
  <button type="button" id="extend">Stay signed in</button>
</div>

<script>
  // Warn 2 min before the limit; let the user extend
  setTimeout(showTimeoutWarning, 13 * 60 * 1000);
  extend.addEventListener('click', resetSessionTimer);
</script>

<button type="button" id="cpause" aria-pressed="false">Pause slideshow</button>
<div class="carousel" id="carousel">…</div>

<script>
  let timer = setInterval(nextSlide, 5000);
  const stop = () => { clearInterval(timer); timer = null; };
  const play = () => { if (!timer) timer = setInterval(nextSlide, 5000); };

  cpause.addEventListener('click', () => {
    const paused = !!timer;
    paused ? stop() : play();
    cpause.setAttribute('aria-pressed', String(paused));
    cpause.textContent = paused ? 'Play slideshow' : 'Pause slideshow';
  });

  // Pause while the user reads or interacts
  carousel.addEventListener('mouseenter', stop);
  carousel.addEventListener('focusin', stop);
</script>