• Success Criterion 1.4.10
  • Conformance level AA

Carousel Slide Content Cut Off With No Way to Reach It

1.4.10 — Reflow

Scenario

Setting

A university's online course catalog

What’s wrong

Carousels whose slide content is cut with no alternative path to it.

Example 

.course-carousel { width: 100%; overflow: hidden; }
.course-slide { width: 800px; flex-shrink: 0; } /* card text is cut off at 320px with no scroll or next control visible */

Why it matters

At mobile width, the description inside each fixed 800px slide is clipped by overflow: hidden, and no visible control lets the student reach the rest.

How to test

Set the viewport to 320px and check carousel/slider content: if slide content is cut off with no alternative way to reach the full content, it fails.

How to fix

Size each slide to its container and provide visible, reachable next and previous controls so no content stays trapped.

.course-carousel { overflow: hidden; }
.course-slide { width: 100%; }
.course-slide .description { white-space: normal; }

<button class="carousel-next" aria-label="Next course">Next</button>

Outcome

A student swipes to see the full course description instead of losing the second half behind a clipped card.

Who is affected

Mobile students can't read a course's full description or requirements, and have no alternate way to view the cut-off content.

Learn more

Related scenarios