Watching Homepage Carousels: Autoplay, Pause, and Focus Order
Hero carousels move on their own, hide their pause buttons, and pull focus in odd orders. What to watch for on the most visited page of the store.
The hero carousel is usually the first thing on the page and the first thing that moves. Slides change every few seconds whether anyone is reading them or not, the pause control is a small icon in a corner, and the shopper who needs more time is the one least likely to find it.
WCAG 2.2.2 covers this directly: for moving or auto-updating content that starts automatically and lasts more than five seconds, there must be a way to pause, stop, or hide it. That is a Level A criterion. A carousel with no working pause does not need a long debate.
Reading speed is not a design setting
A slide interval chosen in a meeting, five seconds, seven seconds, is a reading deadline imposed on everyone. Shoppers using magnification may be reading a slide in sections. Shoppers using a screen reader are listening at their own rate, which the carousel does not know and does not wait for. When the slide changes mid sentence, the content they were on is simply gone.
Longer intervals soften the problem without solving it. The control is what solves it. Pause needs to be a real button, labelled as pause, reachable by keyboard early in the focus order, and it needs to stop the rotation completely rather than until the next interaction.
Focus and slides that are not there
Off-screen slides cause a specific, common failure. The slides are visually hidden but still in the keyboard tab order, so a keyboard user tabs into content they cannot see, on a panel that is not displayed, and focus appears to vanish for several presses. Slides that are not shown should not be focusable, and their links should be removed from the tab order until the slide is active.
The slide controls deserve the same check. Dots with no accessible name announce as button, button, button. Each control should say what it does: go to slide two, or the name of the promotion it shows. Arrow buttons need names too, previous and next at minimum, not just a chevron character a screen reader may read oddly or skip.
Decide whether it earns its place
Watch the analytics alongside the accessibility check. On many stores, almost nobody interacts with slides two and three, which means the store is paying an accessibility cost, a performance cost in image weight, and a maintenance cost, for content few shoppers see. That is an argument for a single static hero with the strongest offer, made in the open.
If the carousel stays, keep the slide count low, put real text in the page rather than baked into images, and run the pause and focus checks after every homepage campaign change. Carousels get rebuilt for every sale, and each rebuild is a chance to lose the pause button again.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Watching Loyalty Popups That Appear Right After Login, Watching Filter and Sort Controls on Mobile Collection Pages, and Watching Countdown Timers and Live Sale Clocks.
Frequently asked questions
What does WCAG require for autoplaying carousels?
WCAG 2.2.2 requires a mechanism to pause, stop, or hide content that moves or updates automatically, starts on its own, and lasts more than five seconds alongside other content. A labelled, keyboard reachable pause button is the usual answer.
Should hidden slides be keyboard focusable?
No. Slides that are not currently displayed should have their links and controls removed from the tab order, otherwise keyboard users tab into invisible content and focus appears to disappear.
How should carousel dot controls be labelled?
Each should have an accessible name saying what it does, such as go to slide two or the name of that promotion. Unlabelled dots announce as a row of identical buttons and give the user nothing to choose by.
Is removing the carousel a reasonable fix?
Often, yes. If interaction data shows later slides are rarely seen, a single static hero removes the autoplay, focus, and image weight problems at once and usually loses nothing in sales.