Carousel

A carousel cycles through a set of slides using previous and next controls, pauses on hover or focus, and announces each slide to assistive technology so all users can access the content.

Demo

Use the previous and next buttons to advance through slides. Tab into the carousel and observe that autoplay pauses when focus enters. Use the keyboard to activate controls and listen for how slide changes are announced by a screen reader.

Featured articles

Carousel. Use the Previous and Next buttons to change slides. Use Tab to reach the slide link.

Prev Next Pause

• Slide 1

  Intro to accessibility testing.

  Read more

• 1
• 2
• 3

What to Observe

• The previous and next controls are keyboard operable and have descriptive accessible names
• Autoplay pauses when the mouse hovers over the carousel or when keyboard focus enters it
• Each slide transition is announced to screen reader users, including the current slide position within the total
• Hidden slides are not reachable by keyboard or assistive technology
• The carousel region is identified with a label so screen reader users know where they are when they encounter it

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Carousel Region — the landmark or labelled container that identifies the carousel to screen reader users and holds all slides and controls
2. Slide Track — the scrollable or animated container that holds all individual slides in sequence
3. Slide — an individual content panel within the carousel; only the active slide is visible and reachable to all users
4. Previous and Next Controls — native button elements that advance or reverse the slide position; each carries a descriptive accessible name
5. Slide Indicators — optional dot or tab controls that show total slide count and allow direct navigation to a specific slide; each must have an accessible name identifying its target slide
6. Live Region — an announcement area that communicates slide changes to screen reader users without requiring focus to move

Accessibility Behavior

• Wrap the carousel in a labelled region so users navigating by landmarks can identify and locate it
• Pause autoplay whenever the mouse hovers over the carousel or keyboard focus is within it, so users are not timed out of content
• Announce slide changes to screen reader users, including position information such as "slide 2 of 5," so users understand what has changed and how much content remains
• Ensure hidden slides are completely inaccessible to keyboard and assistive technology — not merely visually hidden
• Give previous and next buttons descriptive accessible names that clarify their action; avoid naming them only with directional symbols
• Provide a way to stop autoplay entirely, giving users full control over moving content

Common Mistakes

• Continuing autoplay while the user is focused on or hovering over the carousel, which can disorient users before they finish reading a slide
• Failing to announce slide changes, leaving screen reader users unaware that the content has updated
• Allowing hidden slides to remain keyboard focusable, causing users to interact with content they cannot see
• Labelling navigation buttons only with icons such as arrows without providing an accessible name, making them ambiguous to screen reader users
• Omitting slide position context from announcements, so users have no sense of how many slides exist or where they are in the sequence

Why This Matters

Carousels are among the most accessibility-challenged components in common use. Autoplay that does not pause creates a time pressure that disproportionately affects users with cognitive and motor disabilities. Hidden slides that remain keyboard-reachable create a confusing and disorienting experience. Without slide announcements, screen reader users have no way to know the content has changed. When controls lack accessible names, users cannot tell what the buttons do. The carousel requires more careful accessibility engineering than almost any other component — done well, it gives all users access to the full content; done poorly, it effectively hides content from a significant portion of the audience.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code