A Pithy Guide to WCAG 2.1, WCAG 2.2, & Section 508: Non-Conformance Demo 2.2.2

2.2.2 Conformance Shown with Non-Technical Explanation

This sentence is scrolling

2.2.2 Conformance Shown with Technical Explanation and Javascript markup

The CSS markup is unchanged, but Javascript for a button was added.

button.addEventListener("click", () => {
  const isRunning = marqueeText.style.animationPlayState == "running";

  // change behaviour of animation and button
  if (isRunning) {
    // stop the animation
     marqueeText.style.animationPlayState = "paused";
    // change button text
    button.innerText = "Play";
    button.ariaPressed = "true";
  } else {
    // start the animation
    marqueeText.style.animationPlayState = "running";
    // change button text
    button.innerText = "Pause";
    button.ariaPressed = "false";
  }
});

Code copied from HTMHell