Conformance Demo for WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide (Level A)

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