• Success Criterion 4.1.3
  • Conformance level AA

Auto-Rotating Carousel Slide Change With No Status Announcement

4.1.3 — Status Messages

Scenario

Setting

A hotel booking site's room-selection page

What’s wrong

Auto-rotating carousel slide changes updating visible content with no status exposure for assistive technology users.

Example 

<div class="room-carousel">
  <div class="slide active">Deluxe King, ocean view, $220/night</div>
  <div class="slide">Standard Queen, city view, $150/night</div>
</div>
<!-- a setInterval swaps the "active" class every 5 seconds, with no live region and no pause control -->

Why it matters

A guest browsing rooms with a screen reader never hears about the ocean-view option, since the carousel rotates silently.

How to test

Let a carousel auto-advance with a screen reader running: if the slide change isn't exposed as a status update, it fails.

How to fix

Add a pause control and let users step through slides on demand, rather than relying on a live region for fast-changing content.

<div class="room-carousel" aria-live="off">
  <div class="slide active" aria-hidden="false">Deluxe King, ocean view, $220/night</div>
  <div class="slide" aria-hidden="true">Standard Queen, city view, $150/night</div>
</div>
<button onclick="pauseCarousel()">Pause</button>

Outcome

A guest pauses the carousel and reads through every room option at their own pace.

Who is affected

Screen reader users comparing room options never learn about slides that rotate past before they're read.

Learn more

Related scenarios