INTERACTION DETAILS // THE VIEWER'S PERSPECTIVE
Eliminating the Four Classic Carousel Frustrations
Every design choice inside a sequence component should be explained in terms of the person navigating it. Below are the four most common navigation pitfalls we see in studio critiques and how to solve them permanently.
1. The Vanishing Contrast Arrow
When designers place a white SVG arrow directly on top of a photograph, the arrow disappears the moment a sunlit sky or white paper print enters that corner of the frame. Placing solid terracotta pill buttons (#9a3412 with white text, offering a 7.1:1 contrast ratio) in a dedicated header or footer bar guarantees visibility regardless of the photograph's brightness.
2. The Invisible Off-Screen Tab Trap
Many CSS-only carousels hide inactive slides by shifting them horizontally with transform: translateX(100%) inside an overflow: hidden wrapper. To a sighted mouse user, Slide 2 is invisible. To a keyboard user pressing the Tab key, the browser still focuses links inside Slide 2, causing the focus indicator to vanish off-screen. Setting display: none (or the HTML inert attribute) on inactive slides ensures keyboard navigation only visits what is currently visible.
3. Wrapping vs. Hard Stops
Should clicking "Next" on Slide 3 loop back to Slide 1, or should the Next button become disabled? Both patterns can work if communicated clearly. When looping is enabled, the live status indicator (Slide 1 of 3) immediately confirms to the viewer that they have returned to the start of the cycle.
4. Respecting Reduced Motion Preferences
Always wrap slide transition animations inside a media query check:
@media (prefers-reduced-motion: reduce) {
.carousel-slide, .btn-pill, .lesson-card {
transition: none !important;
transform: none !important;
}
}
Next Lesson: Adapt Without Hiding Meaning →
