Lesson 7 of 8
Carousel
- 15 min
- 6 checks
- 3 hints
- Go to task
Goal
It wraps around and announces its position
Explanation
A carousel shows one slide at a time with two buttons to move between slides, and it wraps around: clicking "Next" on the last slide takes you back to the first, and clicking "Previous" on the first takes you to the last.
Someone who can't see the screen needs to know where they are. If you put an indicator like "2 of 4" inside an aria-live="polite" region, the screen reader reads it after every move, so the user learns both their position and the number of slides.
Watch out: the remainder operator in JavaScript keeps the sign of the number on its left, so -1 % 4 is -1, not 3. That's why going back from the first slide needs (i + n) % n.
Your task
Make #next and #prev show the next and previous slide, wrapping around, and add hidden to the other slides. Then write the position in #status in the form 3 of 4, and make it an aria-live="polite" region.
Checks
6 checks- Only one slide is visible, and it's the first
- "Next" shows the next slide only
- The indicator announces the position "3 of 4"
- "Next" after the last slide goes back to the first
- "Previous" before the first slide goes to the last
- The indicator is a live region