Accessible Carousel & Scroller · WordPress · v2.4.2
A carousel that’s actually accessible — and a card row to match.
Most sliders are an accessibility minefield: autoplay you can’t stop, controls a keyboard can’t reach, slides a screen reader can’t follow. Ananyoo Accessible Carousel is built the opposite way — two blocks, a hero carousel and a native scroll-snap card row, keyboard- and screen-reader-first, on the WAI-ARIA carousel pattern, with three ready-made looks and full design controls.
2 blocks
Carousel + Scroller
3 looks
Editorial · Soft · Minimal
WCAG 2.2 AA
Built to
0
Trackers · external calls
Why this exists
Carousels are where accessibility usually breaks.
It’s one of the most-cited failure patterns on the web: content that auto-advances faster than people can read, with no way to pause it; arrow and dot controls that keyboards skip over; slides a screen reader can’t announce or count; and off-screen slides that still grab keyboard focus. The carousel is often the single least accessible thing on an otherwise fine page.
Both of these blocks are built to be the exception, not the rule.
Two blocks, one accessible foundation.
A rotating hero, or a row of cards you browse at your own pace — whichever the page needs, with the same care underneath.
Hero Carousel
One slide at a time: a background image with a solid contrast box holding a heading, text and a call to action.
- Built on the WAI-ARIA carousel pattern
- No autoplay by default; a pause control whenever it’s on
- Off-screen slides keep nothing in the tab order
- Degrades to a readable list with JavaScript off
Card Scroller
A native scroll-snap row of cards for features, services or a portfolio — browsed by scrolling, never auto-moving.
- Native scrolling: keyboard, touch and scrollbar all work
- Nothing hidden from assistive tech — no focus traps
- “Cards per view” is pure CSS (3 → 2 → 1 responsively)
- Each card link carries distinct context for screen readers
Designed, not default
Three looks. All neutral. All AA.
Insert a block and a “Choose a layout” picker offers three designed styles — or start blank. The same looks ship as patterns. Every colour pair is checked at 4.5:1 or better, so whichever you pick is accessible out of the box and recolourable in seconds.
Editorial
High contrast, crisp corners, solid buttons. Confident and content-first.
Soft
Rounded corners, a light surface and pill buttons. Friendly and modern.
Minimal
Flat, square, with a text-link call to action. The lightest, most restrained.
Neutral by design. The looks differ in shape and treatment, not brand colour — so they sit happily on any theme, and you can recolour any part from the block.
Style it in the block, not in CSS
Full design control — with accessibility kept intact.
Change the look from the block’s own panels: heading size and colour, text size, and a call to action that can be a button or a text link, with its own shape, size and colours. The card background and border use WordPress’s standard design tools.
The guardrails never move: the heading level stays in range, images stay decorative by default, off-screen slides stay out of the tab order, and a contrast reminder sits right next to the colour pickers.
In the editor
The Accessible Carousel Block, right in your WordPress editor.
Insert the Accessible Carousel Block, pick a look, then style every part — heading, text, the call to action, the pause control — from the block’s own panels. No code, no separate settings page.
Built on the parts most carousels skip.
Every feature maps to a real WCAG success criterion — because it was designed by an accessibility consultant, not retrofitted.
No autoplay by default
Auto-advancing content is a barrier, so it’s off out of the box. If you enable it, a visible pause/stop control is always shown (with configurable label, position and size), rotation pauses on hover and on keyboard focus, and it never runs for visitors who prefer reduced motion.
WCAG 2.2.2 Pause, Stop, HideScreen readers can follow along
The carousel is a labelled region; each slide is announced as “slide N of M.” A polite live region announces changes during manual navigation, and stays silent during auto-rotation so it never spams the user. Nothing on an off-screen slide can be tabbed to.
WCAG 4.1.2 · 4.1.3 Status MessagesFull keyboard, no traps
Previous/next and dot controls are real, focusable buttons with clear names; the active dot is marked with aria-current. The scroller’s strip is keyboard-scrollable too. Every control has a visible focus ring and a target of at least 24×24 px (the dots included).
Works even with JavaScript off
Progressive enhancement: if scripts don’t run, the carousel’s slides degrade to a simple readable stack and the scroller stays a scrollable list — every piece of content remains reachable. Nothing is hidden behind a script that might fail.
Robust by designThe second block, live
A card scroller you can actually use.
Scroll it, tab into it, or use the arrow keys — it’s a real instance of the block, no autoplay, nothing hidden. Try the buttons or your keyboard’s arrows.
Standards-based
Built on the WAI-ARIA Authoring Practices.
Rather than inventing custom widget behaviour, the carousel follows the W3C’s published “Carousel” design pattern — the same reference implementation accessibility specialists test against. The success criteria both blocks are built around:
Frequently asked questions
What’s the difference between the carousel and the scroller?
The carousel shows one slide at a time and rotates between them — a classic hero. The scroller shows a row of cards you browse by scrolling, with no auto-movement. Use the carousel for a headline hero; use the scroller for features, services or a portfolio.
How do the three looks work?
When you insert a block, a “Choose a layout” picker offers Editorial, Soft and Minimal (or Start blank), each with a thumbnail. The same three looks are also available as ready-made patterns. They’re neutral and pass AA as-is, and every part is editable afterwards.
Should I turn on autoplay?
Generally, no — auto-advancing content is a barrier for many people, which is why it’s off by default. If you do enable it, the block always shows a pause control, and rotation stops on hover, on keyboard focus, and for anyone who prefers reduced motion.
Can I change the colours and buttons?
Yes — from the block itself. Set the heading size and colour, the text size, and turn the call to action into a button or a text link with its own shape, size and colours, plus the card background and border. A contrast reminder sits next to the colour controls so your choices stay readable.
Does it work without JavaScript?
Yes. Without JavaScript the carousel’s slides display as a stacked, readable list and the scroller remains a scrollable list, so all content stays reachable. The interactive behaviour is a progressive enhancement on top.
Will it slow down or track my site?
No. The front-end scripts are vanilla JavaScript with no dependencies and no build step, and assets load only on pages that use the blocks. The plugin collects no data, contacts no external services, and adds no front-end links.
Add an accessible carousel in minutes.
Once it’s live, install from Plugins → Add New, add the Accessible Carousel Block (or the Card Scroller), pick a look, and drop in your content.
Ananyoo Accessible Carousel is currently in review on WordPress.org — the install button will appear here once it’s approved.
GPLv2 or later · Free · No registration · No tracking
Built by Shivaji Mitra — Accessibility Consultant since 2003 · Kolkata, India
Part of the Ananyoo collection of WordPress accessibility plugins.