• Success Criterion 2.5.1
  • Conformance level A

Swipe-Only Carousel With No Next or Previous Button

2.5.1 — Pointer Gestures

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Swipe-only carousels/galleries (no next/prev buttons).

Example 

<div class="carousel" ontouchstart="startDrag(event)" ontouchmove="dragCarousel(event)" ontouchend="endDrag(event)">
  <div class="playlist-card">Chill Vibes</div>
  <div class="playlist-card">Workout Mix</div>
</div>
<!-- no next/prev buttons anywhere in the markup -->

Why it matters

A listener browsing the featured-playlists row with a mouse or a switch device has no way to move to the next card.

How to test

Try a single tap on next/previous instead of swiping a carousel: if no button exists at all, it fails.

How to fix

Put the buttons outside the swipeable track so a mis-timed swipe never covers them up.

<div class="carousel" role="region" aria-label="Featured playlists">
  <button aria-label="Previous playlist" onclick="scrollPrev()">‹</button>
  <div class="playlist-card">Chill Vibes</div>
  <button aria-label="Next playlist" onclick="scrollNext()">›</button>
</div>

Outcome

A listener clicks the arrow once and the next playlist slides into view.

Who is affected

Switch-access users, keyboard-only users, and people with tremor who can't produce a clean, fast swipe.

Learn more

Related scenarios