A: No User Control
Equipment Desk
Today’s announcements
Camera kits due by 5:00 PM today
Motion and Timing
Read an announcement, reserve a camera, and open equipment details. Compare who controls the movement and the time.
Can You Stop It?
B: User Controls Movement
Equipment Desk
Today’s announcements
Camera kits due by 5:00 PM today
If you are still reading when the content moves, who controls the experience?
What does the standard say?
WCAG 2.2.2: Pause, Stop, Hide · Level A
Both components advance the same announcements every four seconds. Only B lets you keep an announcement in place while you read.
Automatically moving information that lasts more than five seconds alongside other content needs a way to pause, stop, or hide it unless the movement is essential. Auto-updating information alongside other content also needs control unless essential; it has no five-second exemption.
W3C: Understanding Pause, Stop, HideWhy Is There a Clock?
Choose the pickup time, then confirm the reservation. The 30-second hold is deliberately short for this classroom example. No equipment is actually reserved.
A: No Useful Adjustment
Camera Kit
Camera, lens, and tripod
Pickup: Thursday at 2:00 PM
We'll hold this reservation for 30 seconds.
Hold expires in 0:30
Select a pickup time to reserve this kit.
B: Adjustable Timing
Camera Kit
Camera, lens, and tripod
Pickup: Thursday at 2:00 PM
We'll hold this reservation for 30 seconds.
Hold expires in 0:30
Need more time?
Select a pickup time to reserve this kit.
Does reserving this camera actually require someone to finish within 30 seconds?
What does the standard say?
WCAG 2.2.1: Timing Adjustable · Level A
First determine whether the time limit is necessary. Where required, let users turn it off, adjust it, or extend it. Essential timing and real-time events have defined exceptions.
B offers more time from the beginning of the hold and permits repeated two-minute extensions. A conforming extension path warns users, gives at least 20 seconds to act, and allows at least ten extensions. Trying again after expiry does not replace that control.
W3C: Understanding Timing AdjustableHow Fast Is Too Fast?
These diagrams describe hypothetical flashes during one second. Every marker is static. Nothing plays or flashes.
Pattern A: Three flashes in one second
Pattern B: Four flashes in one second
WCAG 2.3.1: Three Flashes or Below Threshold · Level A
Content must not flash more than three times in any one-second period unless the flashing remains below the general flash and red flash thresholds.
Frequency alone is not the entire test. Flash area, brightness, and red flashing also matter.
Do not guess that flashing content is safe. Avoid unnecessary flashing and evaluate any required flashing effect carefully.
Why is this different from simply finding an animation annoying?
Why this is a safety issue
Flashing can trigger photosensitive seizures. This is a physical safety criterion, not simply a preference about animation. A pause button cannot prevent exposure that happens before someone reaches it.
W3C: Understanding Three Flashes or Below ThresholdWhat If the Motion Is the Problem?
Open the same kit details in both cards. The standard version slides upward and grows slightly; the reduced-motion alternative shows the details in place.
A: Standard Motion
Field Production Kit
Camera, tripod, microphone, and batteries
Included Equipment
- Camera with lens
- Tripod
- Microphone with cable
- Two charged batteries
Available for a two-day loan. Collect at the Art Building equipment desk.
B: Reduced Motion
Field Production Kit
Camera, tripod, microphone, and batteries
Included Equipment
- Camera with lens
- Tripod
- Microphone with cable
- Two charged batteries
Available for a two-day loan. Collect at the Art Building equipment desk.
A reduced-motion preference in your operating system or browser also removes the animation from the standard version.
WCAG 2.3.3 Animation from Interactions is AAA, not AA. Responding to reduced-motion preferences is a strong accessibility practice, not itself a universal WCAG 2.1 AA requirement.
How the reduced-motion alternative works
The details, controls, and task stay the same. CSS removes the slide and zoom.
.kit-details:not([hidden]) { animation: kit-details-arrival 600ms ease-out; }
@keyframes kit-details-arrival {
from { transform: translateY(40px) scale(.9); }
to { transform: none; }
}
.kit-details.reduced-motion { animation: none; }
@media (prefers-reduced-motion: reduce) {
.kit-details:not([hidden]) { animation: none; }
}