Accessible Carousel Block · WordPress plugin
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. The Accessible Carousel Block is built the opposite way — two blocks, a hero carousel and a native scroll-snap card scroller, keyboard- and screen-reader-first, on the WAI-ARIA carousel pattern. Move with the arrow keys, jump with Home and End, hear each slide announced by its own title, and switch on optional reading modes for visitors who need them — with three ready-made looks and full design controls.
2 blocks
Carousel + Scroller
3 looks
Editorial · Soft · Minimal
WCAG AA
Built to
None
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 blocks in the Accessible Carousel Block 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: the Accessible Carousel Block gives you 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 and reading-time pacing when it’s on
- Arrow / Home / End keys, a visible slide counter and a “Skip carousel” link
- 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 the Accessible Carousel 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 Accessible Carousel 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. Choose dots or a titled tab list for navigation, turn on reading-time pacing, and offer optional reader modes — all without touching CSS.
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.
Checked as you build
The editor flags accessibility problems before you publish.
As you edit a slide or card in the Accessible Carousel Block, a live Accessibility check reads out the WCAG colour contrast of every colour pair — text on its box, the heading on the background, and button text on its button — and flags a missing alt text, an empty heading, or vague button text like “click here”.
Every result is shown with an icon and words, never colour alone, so you fix issues while you build instead of discovering them in an audit weeks later.
Built on the parts most carousels skip.
Every feature of the Accessible Carousel Block 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 in the Accessible Carousel Block 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 reading-time pacing can hold each slide on screen long enough to actually be read — never for visitors who prefer reduced motion.
WCAG 2.2.2 Pause, Stop, HideScreen readers can follow along
The Accessible Carousel Block is a labelled region, and each slide is announced by its own title — “slide 2 of 3: Our Services”, not just “item 2”. 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
In the Accessible Carousel Block, previous/next and navigation controls are real, focusable buttons with clear names; arrow keys move between slides and Home/End jump to the first or last. Swap the dots for a titled tab list, read the “2 / 3” counter, or use the “Skip carousel” link to jump past. Every control has a visible focus ring, a target of at least 24×24 px, and stays visible in Windows High Contrast mode.
WCAG 2.1.1 · 2.4.1 · 2.4.7 · 2.5.8Works even with JavaScript off
Progressive enhancement: if scripts don’t run, the Accessible Carousel Block’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 designVisitor-controlled, off by default
Reading modes that put the visitor in control.
Options the Accessible Carousel Block lets a site owner switch on per carousel — each off by default, each loading its small extra script only when it’s enabled, so the default carousel stays lean.
View as list
Unfolds the whole carousel into a plain, static vertical list — so anyone who would rather read everything at once, with no motion, simply can.
Easier reading
A dyslexia-friendly toggle that widens letter, word and line spacing and left-aligns the text, for more comfortable reading without changing your theme.
Titled tab navigation
Swap the row of identical dots for a tab list that shows each slide’s own heading — so visitors recognise where they are at a glance.
The 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 Accessible Carousel 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 Accessible Carousel Block 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 — the Accessible Carousel Block bundles both.
How do the three looks work?
When you insert the Accessible Carousel 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.
Can I show slide titles instead of dots?
Yes. Choose a titled tab list in place of the row of dots and each button shows its slide’s own heading — easier to recognise and remember. It’s a per-carousel setting, and on narrow screens the tab list moves to its own row so it never crowds the arrows.
Can visitors read the slides without the carousel motion?
If you switch them on, yes. A “View as list” mode unfolds the carousel into a plain vertical list so everything can be read at once with no motion, and an “Easier reading” toggle widens the spacing and left-aligns the text for a dyslexia-friendly view. Both are off by default, and the extra script loads only when they’re enabled.
Does the editor help me keep it accessible?
Yes. A live Accessibility check runs as you edit a slide or card: it reads out the WCAG colour contrast of every colour pair and flags a missing alt text, an empty heading, or vague button text — each shown with an icon and words, not colour alone — so you catch issues while you build.
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 Accessible Carousel Block always shows a pause control, rotation stops on hover, on keyboard focus and for anyone who prefers reduced motion, and reading-time pacing can hold each slide long enough to be read.
Can I change the colours and buttons?
Yes — from the Accessible Carousel 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 Accessible Carousel Block. The plugin collects no data, contacts no external services, and adds no front-end links.
Add an accessible carousel in minutes.
It’s live and free on WordPress.org. Install from Plugins → Add New, search for Accessible Carousel & Slider, then add the Accessible Carousel block (or the Card Scroller), pick a look, and drop in your content. The Accessible Carousel Block is part of our collection of WordPress accessibility plugins, and pairs perfectly with the WordPress ADA-compliance theme.
GPLv2 or later · Free · No registration · No tracking