Accessible carousel design without autoplay traps

Carousels hide content and require interaction to reveal it. Use one when the items form a meaningful sequence or when a compact gallery supports the main task. A grid is usually better for unrelated promotions users should compare at once.

Do not use autoplay to compensate for hidden content. If every slide must be seen, place it in normal page flow. When autoplay is valuable for a story or ambient showcase, provide a visible pause control and stop movement when users interact or request reduced motion.

Label the carousel by its content, such as “Customer stories” or “Product photos.” Use buttons named “Previous slide” and “Next slide,” and expose the current position with concise text such as “Slide 2 of 5.” Dot controls need names that identify their destination.

Keep controls in a predictable location and large enough for touch. Disabled boundaries in a non-looping carousel should be visible, while an infinite loop must not create duplicated focusable content from cloned slides.

                      <section aria-roledescription="carousel" aria-label="Product photos">
  <button aria-label="Previous slide">…</button>
  <p aria-live="polite">Slide 2 of 5</p>
  <button aria-label="Next slide">…</button>
</section>
                    

Only the active slide should expose interactive descendants when off-screen slides are visually unavailable. Use inert or remove them from the tab order, but avoid destroying user-entered state when slides represent steps in a form.

Activating next or previous should usually keep focus on the control, letting users advance repeatedly. Move focus into a slide only when the action explicitly promises navigation to that content.

• No invisible links remain in the Tab order.
• Slide changes do not steal focus.
• Live announcements remain short and user-triggered.

Swipe can enhance touch interaction but cannot replace visible buttons. Distinguish a horizontal swipe from vertical page scrolling and avoid hijacking small movements. Mouse drag is optional and should not break text selection inside content-heavy slides.

Use a short transition that indicates direction, then replace it with an immediate state change under reduced motion. Test zoom, keyboard, touch, screen readers, and a slide with long content to ensure the carousel height does not create disruptive page shifts.