Short answer: A carousel, also called a slider or slideshow, shows one item at a time in the same space. Many visitors see only the first slide, so lead with your main message and give it its own page too. If the carousel moves by itself, let people stop it, and make every control work from the keyboard.
What a carousel is
The W3C describes carousels as showing a collection of items one at a time, and notes they are also known as slideshows and sliders. Typical uses are news headlines, featured articles on home pages and image galleries.
The same tutorial adds a warning: carousels are disputed from a usability perspective, because their content can be hard to discover. Making one accessible can also make it easier to use.
| Problem | What happens | What helps |
|---|---|---|
| Hidden slides | Many visitors see only the first slide, or none | Lead with the main message and give it its own page too |
| Moving on its own | Slides change before people finish reading | A stop button, a pause on hover and focus, no movement on phones |
| Unclear controls | Dots and small arrows are missed or hard to tap | Large buttons inside the carousel, with the current slide marked |
Our summary of the W3C carousels tutorial and NN/g, read November 5, 2026.
Why most slides go unseen
NN/g found that people often scroll past large carousel images right away and miss their content, or at least everything after the first frame. Its advice is to place important content on another page of your site as well.
In one homepage NN/g studied, a deal shared a panel that rotated every 5 seconds, so it was visible only 20% of the time. Because it moves, people may take it for an ad and ignore it.
NN/g suggests considering a static carousel or a single hero image instead. Our homepage guide covers what that first screen should hold.
If it moves on its own
NN/g advises against auto-forwarding when you aren’t sure the timing lets most people read each slide, or when the content looks like ads. It also says not to auto-forward on phones, where people scroll quickly and miss the change.
When a carousel does move, NN/g uses 3 words per second as a timing guideline. The W3C recommends a button to stop and restart the movement, and a pause while the pointer hovers over the carousel or the keyboard focus is inside it.
A pause that lasts only while focus stays on the carousel doesn’t count as a pause under WCAG, so the button is still needed. Our website animation guide covers the W3C rule for anything that moves by itself.
Controls people can find and use
The W3C tutorial uses real buttons for previous and next, plus a button for each slide with the current one highlighted. Every function, including moving between slides, must work with the keyboard; our keyboard navigation guide covers how to test it.
Screen reader users need to hear which item is showing. The tutorial does it with an invisible announcement area, a polite live region, that reads “Item x of y”, which our aria-live guide explains. It also says not to move keyboard focus when someone uses the previous or next buttons.
NN/g adds that people should see how many frames there are and which one is showing. Controls belong inside the carousel, large enough to read and click. Dots are a poor cue on phones, where people often don’t notice them.
How to add a carousel that works
- Ask whether you need one: a single image with one message may do the job better.
- Keep it to 5 slides or fewer, each with one short message.
- Put the most important message on the first slide and on its own page.
- Add previous, next and slide buttons inside the carousel, large enough to tap, with the current slide marked.
- If it moves by itself, add a stop button, pause it on hover and focus, and keep it still on phones.
- Give each slide enough time to read, at about 3 words per second.
- Test it with only the keyboard and with a screen reader, on a phone and on a computer.
Before your carousel goes live
- The main message is on the first slide and on its own page.
- There are 5 slides or fewer.
- Every control works with the keyboard and shows where you are.
- A screen reader announces which slide is showing.
- Movement can be stopped with a button, and it doesn’t move on phones.
- Each slide stays long enough to read.
RememberMost people see only the first slide, so lead with what matters and repeat it elsewhere. If the carousel moves, let people stop it, and make every control work for keyboard and screen reader users.
Our web design service builds pages like these with you. Write to us through the form or on WhatsApp.
Quick answers about website carousels
Is a slider the same as a carousel?
Yes. The W3C notes that carousels are also known as slideshows and sliders. Whatever the name, the pattern is the same: one item shows at a time in the same space, and people move between items or the carousel moves by itself.
How many slides should a carousel have?
NN/g suggests 5 or fewer, because people are unlikely to engage with more. On a phone it is tiring to swipe through many, and past about five it gets hard to tell which ones you have already seen.
Should my carousel rotate on its own?
Usually not. NN/g advises against it when you can’t get the timing right or the slides look like ads, and never on phones. If it does move, people need a stop button and enough time to read each slide.
How long should each slide stay on screen?
Long enough to read it. NN/g’s guideline is about three words per second, so count the words on each slide and add time for the image. NN/g also advises testing the timing, or at least estimating how long an average visitor needs.
Is pausing on hover enough?
No. The W3C recommends pausing on hover and on keyboard focus, and also a button to stop and restart the movement. A pause that lasts only while focus stays on the carousel does not count as a way to pause under WCAG.
Sources
All read on November 5, 2026. W3C Web Accessibility Initiative: Carousels Tutorial. Functionality. Animations. Understanding Success Criterion 2.2.2: Pause, Stop, Hide. NN/g: Carousel Usability: Designing an Effective UI for Websites with Content Overload. Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility.