Build a carousel so people can find it, understand which slide is current, and operate it without a swipe or pointer. Use semantic structure and native buttons; if slides rotate automatically, provide a visible pause control and stop rotation when users focus or hover the carousel. Test the behavior with a keyboard and screen readers—not just the ARIA markup.
Decide whether a carousel is the right pattern
Carousels can make content harder to discover. If the same information works as a static list or another simpler layout, that may be easier to browse. If you keep a carousel, make its content and controls usable without relying on visual position, swipe, or automatic movement. Complex slides with interactive content need a deliberately designed interaction model; a simple image-carousel example may not be suitable.
As an Amazon Associate I earn from qualifying purchases.
Structure the carousel and name its slides
Use a visible heading to identify the subject, and associate the component with it. Choose a section or another suitable container based on the page structure. The WAI-ARIA Authoring Practices Guide (APG) describes using a region or group with aria-roledescription="carousel"; slides can be groups described as slides. A list is often a natural way to represent a collection of items.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Give each slide a useful accessible name. Prefer a meaningful title; if titles are not unique or available, a position such as “3 of 10” can identify it. Use appropriate headings, articles, and image text alternatives inside slides. The label should describe the carousel’s subject, rather than merely repeating “carousel.” ARIA descriptions do not replace semantic HTML or working interaction.
#1 Best Overall
Provide controls that work without a pointer
Use native <button> elements for previous and next actions, with names such as “Previous slide” and “Next slide.” This gives keyboard users browser-standard button behavior and makes icon-only controls understandable to assistive technology. Keep controls in a predictable tab order, and do not move focus unexpectedly after a user activates one.
Do not require dragging or swiping. Keep previous and next controls available even if the carousel also has autoplay or slide pickers. For direct selection, the APG describes either a tabbed interaction or a group of buttons. Tabs bring the tabs keyboard interaction model with them; grouped buttons are another option. Consider how many slides there are: putting every picker in the tab sequence can become cumbersome as the set grows. Name each picker for the slide it selects, and do not use decorative dots as the only indication or selection method.
Communicate slide changes without disrupting reading
Keep keyboard focus on the control the user activated during ordinary previous/next navigation. Moving focus into a new slide after every activation can make repeated browsing difficult. For a user-requested change, a polite live region can announce the new slide or its position, such as “Item 2 of 5.” Choose a coherent interaction model and verify it with the screen readers and browsers you support: the older WAI tutorial describes a focus move for one slide-picker pattern, not as a rule for every navigation method.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsWhen autoplay is running, the APG recommends setting the live region to off so routine rotation does not repeatedly interrupt screen-reader users. When the carousel is not rotating, polite announcements can communicate changes. Ensure inactive slides are hidden both visually and from assistive technology when they are not meant to be available; keep the active slide’s content accessible.
Decide whether slides rotate automatically
Manual rotation avoids unsolicited changes and is simpler to reason about. If you choose autoplay, provide an always-visible start/stop button. Put it first in the carousel’s tab sequence so keyboard users can reach it before slide content changes. Its label should state the next action, such as “Stop slide rotation” while rotating and “Start slide rotation” while paused.
Stop rotation when keyboard focus enters the carousel and when a mouse pointer hovers over it. Do not restart merely because focus leaves; the user should explicitly restart it. The APG example starts rotation paused when the system requests reduced motion. You can also choose to disable autoplay altogether.
Rank #4
WCAG 2.2 Success Criterion 2.2.2, Pause, Stop, Hide, is Level A. It requires a mechanism to pause, stop, or hide automatically started moving, blinking, or scrolling information that lasts more than five seconds and is presented in parallel with other content, unless the movement is essential to an activity. The criterion also addresses automatically updating information presented in parallel with other content. Assess the actual motion and updates against the complete criterion and its exceptions; an APG pattern by itself does not establish conformance.
Make the carousel perceivable on screen
- Maintain sufficient contrast for text and controls, especially when they sit over images that vary from slide to slide. A solid backing can make captions and buttons easier to perceive.
- Show a visible keyboard-focus treatment. Do not remove outlines without providing an equally visible alternative.
- Indicate the selected slide with more than color alone—for example, use a distinct shape or border as well as an accessible name.
- On small viewports, keep text readable and untruncated. Keep controls visible for people who cannot swipe.
- For non-inline buttons and links, WAI’s styling tutorial recommends a target of at least 44 × 44 CSS pixels. This is the tutorial’s recommendation associated with WCAG’s Level AAA Target Size (Enhanced), not a WCAG 2.2 AA minimum.
Controls placed on a separate solid background can simplify contrast and caption legibility. Over-image controls can work too, but need deliberate contrast treatment across all slides.
Best Value
Test the behavior, not just the markup
W3C describes WCAG and ARIA as normative technical standards and the APG as informative guidance. APG examples are illustrative, and W3C warns that support can vary across browser and assistive-technology combinations, particularly on mobile and touch devices. Treat the pattern as a starting point and test the implementation you ship.
- Keyboard: Tab to the carousel and through its controls. Operate previous, next, pickers, and rotation controls. Check that focus stays predictable and rotation stops on focus.
- Pointer: If autoplay is enabled, hover over the carousel and confirm rotation stops.
- Screen reader: Check that the carousel name, slide name or position, and button names are announced. Trigger a slide change and confirm the announcement is useful; verify autoplay does not interrupt unrelated reading.
- Reduced motion: Enable the operating-system preference and confirm autoplay starts paused if you follow the APG example.
- Visual and mobile: Check contrast, visible focus, active-slide indication, readable text at narrow widths, and a non-swipe way to navigate.
- Compatibility: Test a representative range of browser and assistive-technology combinations, including the mobile and touch contexts relevant to your audience.
Or skip the browser setup
If you also need screenshots of the pages containing your carousel, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF; for example, this cURL call saves a WebP screenshot of your page. It captures the page for visual inspection, but does not test keyboard, screen-reader, or WCAG behavior.
ScreenshotNeo API documentation
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp- Cookie banners are accepted and removed before the shot, along with known newsletter popups and chat widgets; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers identify the page verdict and billing status.
- An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
- The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
