Accessible Carousel & Slider – WCAG AA Compliant Slideshow
The hero carousel and card scroller in the editor, with their design controls in the sidebar.
Accessible Carousel & Slider gives the WordPress block editor two accessibility-first blocks — a hero carousel / slider and a native card scroller — built to WCAG 2.2 Level AA. Use it as an accessible carousel, slider, or slideshow that is fully keyboard-operable, screen-reader friendly, and responsive, with an always-visible pause control and no forced autoplay. Both are real Gutenberg blocks, so there are no shortcodes and nothing is hidden from assistive technology, plus ready-made patterns you can insert and edit.
Live demo: Try the accessible carousel & slider demo »
Hero carousel (built to the W3C/WAI Carousels tutorial): each slide has a background image and a solid “contrast box” holding a heading, a paragraph, and an optional button, placed left, right, or bottom. The solid box guarantees readable text contrast over any image. No autoplay by default; when enabled, a configurable pause/stop control is always shown.
Card scroller: a native CSS scroll-snap row of cards. Because it uses real browser scrolling, it works with the keyboard, touch, the scrollbar, and screen readers with no JavaScript — and nothing is hidden from assistive technology, avoiding the focusable-but-hidden trap common to multi-slide carousels. “Cards per view” is pure CSS (it steps down to 2 then 1 on smaller screens), and there is no autoplay.
Patterns: insert ready-made layouts (hero overlay, hero card, autoplay showcase, minimal, features row, services row) from the Accessible Carousel category, then edit freely. To save your own configured layout as a template, use WordPress’s built-in “Create pattern” on the block toolbar.
Carousel accessibility features
- Carousel is a labelled region containing a semantic list of slides; with JavaScript off it degrades to a readable list.
- Controls are real buttons, fully keyboard operable, with no keyboard trap.
- Keyboard focus is never moved by next/previous or by auto-advance.
- A visually hidden polite live region announces “Item x of y” on user-initiated changes; auto-rotation stays silent so it does not interrupt screen reader users.
- No autoplay by default; when enabled, a stop/start control is always provided (WCAG 2.2.2) and rotation pauses on hover and focus.
- Transition animations (fade or slide) are disabled automatically under prefers-reduced-motion.
- Background images are decorative by default, with a real alt-text option when the image is meaningful.
- Solid contrast box, 44px control targets, and a high-visibility focus indicator.
Card scroller accessibility features
- Native CSS scroll-snap: keyboard, touch, scrollbar, and screen readers all work with no JavaScript.
- The scroll region is itself keyboard-focusable and labelled, so it can be scrolled with the arrow keys.
- Cards are a real list; nothing is set to aria-hidden, so there is no focusable-but-hidden content.
- Each card link carries hidden context (e.g. “Learn more – Design”) so repeated links have distinct names (WCAG 2.4.4).
- No autoplay. Optional previous/next buttons are added only when the cards overflow, so there are never dead controls.
- “Cards per view” is responsive by CSS (desktop value, capped at 2 on tablet and 1 on mobile).
Links
- Plugin home & documentation
- Live demo
- More accessibility plugins from Ananyoo — further WordPress accessibility plugins are in active development.
- Support & contact
Privacy
This plugin collects no data, contacts no external services, and adds no front-end links.