Title: Accessible Carousel & Slider – WCAG AA Compliant Slideshow Author: ananyoo Published: June 19, 2026 Last modified: June 20, 2026 --- Search plugins ![](https://ps.w.org/ananyoo-accessible-carousel/assets/banner-772x250.png?rev=3579042) ![](https://ps.w.org/ananyoo-accessible-carousel/assets/icon.svg?rev=3579042) # Accessible Carousel & Slider – WCAG AA Compliant Slideshow By [ananyoo](https://profiles.wordpress.org/anblik/) [Download](https://downloads.wordpress.org/plugin/ananyoo-accessible-carousel.2.4.3.zip) * [Details](https://wordpress.org/plugins/ananyoo-accessible-carousel/#description) * [Reviews](https://wordpress.org/plugins/ananyoo-accessible-carousel/#reviews) * [Installation](https://wordpress.org/plugins/ananyoo-accessible-carousel/#installation) * [Development](https://wordpress.org/plugins/ananyoo-accessible-carousel/#developers) [Support](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/) ## Description **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 »](https://showcase.ananyoo.com/accessible-carousel/) **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](https://ananyoo.com/ananyoo-accessible-carousel-block-plugin/) * [Live demo](https://showcase.ananyoo.com/accessible-carousel/) * [More accessibility plugins from Ananyoo](https://ananyoo.com/wordpress-accessibility-plugins/)— further WordPress accessibility plugins are in active development. * [Support & contact](https://ananyoo.com/contact-us/) **Privacy** This plugin collects no data, contacts no external services, and adds no front-end links. ## Screenshots [⌊The hero carousel and card scroller in the editor, with their design controls in the sidebar.⌉⌊The hero carousel and card scroller in the editor, with their design controls in the sidebar.⌉[ The hero carousel and card scroller in the editor, with their design controls in the sidebar. [⌊The "Choose a layout" picker shown when you insert a block — Editorial, Soft, Minimal, or Start blank, each with a thumbnail.⌉⌊The "Choose a layout" picker shown when you insert a block — Editorial, Soft, Minimal, or Start blank, each with a thumbnail.⌉[ The “Choose a layout” picker shown when you insert a block — Editorial, Soft, Minimal, or Start blank, each with a thumbnail. [⌊The six bundled patterns in the "Accessible Carousel" category of the inserter.⌉⌊ The six bundled patterns in the "Accessible Carousel" category of the inserter.⌉[ The six bundled patterns in the “Accessible Carousel” category of the inserter. [⌊A front-end hero carousel: a labelled region with prev/next, dots, and an always- present pause control when autoplay is on.⌉⌊A front-end hero carousel: a labelled region with prev/next, dots, and an always-present pause control when autoplay is on.⌉[ A front-end hero carousel: a labelled region with prev/next, dots, and an always- present pause control when autoplay is on. [⌊A front-end card scroller: a native scroll-snap row of cards, keyboard and screen- reader friendly.⌉⌊A front-end card scroller: a native scroll-snap row of cards, keyboard and screen-reader friendly.⌉[ A front-end card scroller: a native scroll-snap row of cards, keyboard and screen- reader friendly. ## Blocks This plugin provides 4 blocks. * Accessible Carousel A WCAG-compliant hero carousel. Add slides with a background image and an overlaid heading, text, and button. * Accessible Card Scroller An accessible, native scroll-snap row of cards. No autoplay, nothing hidden from assistive tech, and "cards per view" is pure CSS— keyboard, touch and screen readers work by default. * Hero Slide A single hero slide: background image with an overlaid heading, text, and button. * Scroller Card A single card within an Ananyoo Accessible Card Scroller: image, heading, text and a link. ## Installation 1. Upload the `ananyoo-accessible-carousel` folder to `/wp-content/plugins/`, or install the ZIP through Plugins > Add New > Upload. 2. Activate the plugin. 3. Add the “Accessible Carousel” block, add slides, and set each slide’s image, heading, text, button, and box position. ## FAQ ### Where is the settings page? There isn’t one. All options live in the block’s sidebar in the editor, which is the standard WordPress block approach. ### How do I use the ready-made templates? Open the block inserter, find the “Accessible Carousel” pattern category, and insert any pattern (hero, showcase, minimal, features row, and so on). It drops in as ordinary blocks you can edit freely. To save your own configured carousel or scroller as a reusable template, select it and choose “Create pattern” from the block toolbar— that is a built-in WordPress feature. ### When should I use the scroller instead of the carousel? Use the hero carousel for one large rotating slide at a time. Use the card scroller to show several cards at once (features, services, and similar) that visitors browse by scrolling. The scroller has no autoplay and uses native scrolling, which keeps it simple and accessible. ### Should I enable autoplay? Generally no. Auto-advancing content is a barrier for many people. When enabled, a stop control is always shown and rotation pauses on hover and focus. ### Does it work without JavaScript? Yes. Slides display as a stacked, readable list when JavaScript is unavailable. ## Reviews ![](https://secure.gravatar.com/avatar/0b90b31cd591d82366363ad1eaf77df4a3dbfee363db750689f5632c12c899f5? s=60&d=retro&r=g) ### 󠀁[Excellent Accessibility and Performance](https://wordpress.org/support/topic/excellent-accessibility-and-performance/)󠁿 [salehul786](https://profiles.wordpress.org/salehul786/) June 21, 2026 Excellent accessibility-focused slider plugin. We needed a carousel that met WCAG requirements without sacrificing design flexibility, and this plugin delivered. Keyboard navigation works smoothly, screen readers can properly interpret the content, and the setup process was straightforward. [ Read all 1 review ](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/) ## Contributors & Developers “Accessible Carousel & Slider – WCAG AA Compliant Slideshow” is open source software. The following people have contributed to this plugin. Contributors * [ ananyoo ](https://profiles.wordpress.org/anblik/) [Translate “Accessible Carousel & Slider – WCAG AA Compliant Slideshow” into your language.](https://translate.wordpress.org/projects/wp-plugins/ananyoo-accessible-carousel) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/ananyoo-accessible-carousel/), check out the [SVN repository](https://plugins.svn.wordpress.org/ananyoo-accessible-carousel/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/ananyoo-accessible-carousel/) by [RSS](https://plugins.trac.wordpress.org/log/ananyoo-accessible-carousel/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.4.3 * Listing and editor naming refresh for discoverability: the plugin is now presented as “Accessible Carousel & Slider”, with updated tags, a clearer short description, a live demo link, and a Links section. In the editor the two main blocks are now titled “Accessible Carousel” and “Accessible Card Scroller”, and the pattern category is “Accessible Carousel”. No functional or markup changes — block names and saved content are unaffected. #### 2.4.2 * Added a translation template (languages/ananyoo-accessible-carousel.pot) and a Domain Path header, so the plugin is ready for translation. Readme: added a Screenshots section and an Upgrade Notice. No functional changes. #### 2.4.1 * The “Choose a layout” picker now shows a small visual thumbnail for each look( Editorial, Soft, Minimal, Start blank) so the choice is clearer. Thumbnails are inline SVG — no extra files. #### 2.4.0 * New: inserting a bare Carousel or Card Scroller now shows a “Choose a layout” picker — pick Editorial, Soft, Minimal, or Start blank, and the block fills with that look (built from the same design attributes as the patterns; everything stays editable). Inserting a pattern still works as before. #### 2.3.1 * Fixed: scroller card body text could inherit an oversized base font from some themes. Cards now use a sensible default text size (still overridable with the block’s Typography control); headings are unaffected. #### 2.3.0 * Redesigned the bundled patterns into six designed starting points — three hero looks and three card looks (Editorial, Soft, Minimal) — under the “Ananyoo Carousel” category. Each is built entirely from the blocks’ own design controls (no extra CSS), uses a neutral palette with every colour pair at 4.5:1 or better, and ships with tiny self-contained placeholder images you replace with your own. #### 2.2.1 * Added a Button size control (Small / Medium / Large) to the call to action in both the carousel slide and the scroller card, alongside the existing shape and colour controls. Every size keeps a valid target size; medium matches the previous default. #### 2.2.0 * New: design controls for the hero carousel slide, matching the scroller. The “ Slide design” panel adds heading size, text size, and a call to action that can be a button or a text link, with button shape (square, rounded, pill). The Colours panel now covers box background, text, heading, and button background/text. Defaults preserve the previous look (the CTA stays a button), the heading level stays constrained, the image stays decorative by default, and the solid box still guarantees contrast. #### 2.1.0 * New: design controls for the Card Scroller. Each card now supports background, text colour, typography, border and spacing through the standard block panels, plus a “Card design” panel for heading size/colour and the call to action — switch it between a text link and a button, and set the button’s colour and shape (square, rounded or pill). Defaults stay neutral, the heading level stays constrained, the image stays decorative by default, and the link keeps its hidden context for distinct names (WCAG 2.4.4). * New: the scroller container supports a background colour and padding via the standard block panels. #### 2.0.2 * Fixed (accessibility): the carousel button inside a non-current (or mid-transition) slide is no longer reachable by keyboard while its slide is aria-hidden. Focusable controls in hidden slides are now removed from the tab order and restored when the slide is shown, resolving a WCAG 4.1.2 (Name, Role, Value) failure flagged as “aria-hidden element must not contain focusable elements.” #### 2.0.1 * Fixed: carousel pagination dots now use a 24×24 pixel tap target (the visible dot is drawn inside it), meeting WCAG 2.5.8 Target Size (Minimum). The dots looked the same but the clickable area was previously smaller than 24px. #### 2.0.0 * New block: Ananyoo Accessible Card Scroller — a native CSS scroll-snap row of cards (with a child Scroller Card block). Works with keyboard, touch and screen readers without JavaScript; nothing is hidden from assistive tech; “cards per view” is responsive by CSS; no autoplay. Optional previous/next buttons are injected only when the cards overflow. * New: ready-made patterns under the “Ananyoo Carousel” category — Hero (overlay), Hero (card), Showcase (autoplay), Minimal, Features row, and Services row. Insert and edit; save your own with WordPress’s built-in Create pattern. * The scroller’s previous/next buttons load their own small script and stylesheet, so they are only added on pages that use the block. #### 1.7.0 * New: the pause/stop control now has block options for its button label (used as both the visible text and the screen reader name, so they always match — WCAG 2.5.3), its position in the control bar (left, center, or right), and its size( small, medium, large; all keep a 44px minimum target). The control is still always shown whenever autoplay is on (WCAG 2.2.2); these options only customise it. * Fixed: the pause button’s accessible name no longer differs from its visible text. Previously the visible “Pause”/”Play” text did not appear in the descriptive aria-label, which fails WCAG 2.5.3 (Label in Name). The visible label is now the accessible name. * Internal: corrected the ANACB_VERSION constant (was out of step with the plugin header) and synced block versions. #### 1.6.0 * Maintenance: passed Plugin Check across all categories; coding-standards and prefix clean-up (aac_/AAC_/$anacb_). #### 1.5.7 * Default card background is now a light grey (#cccccc) so the carousel stands out on white pages, with control colours adjusted to keep AA contrast. Mobile: removed the white gap between image and text box, and kept the arrows, dots and play/pause on a single row. #### 1.5.6 * Fixed: on mobile, overlay carousels now sit inside the same contained card shell( padding, background, rounded corners, shadow) as the card layout, so the image, text, and controls are visually grouped instead of appearing detached. #### 1.5.5 * Fixed: call-to-action button now sets an explicit font size so it no longer inherits an oversized base font from some themes. Mobile control hover states corrected for readable contrast, and the CTA is sized down slightly on small screens. #### 1.5.4 * Improved mobile accessibility: on screens 600px and below, the overlay layout now reverts to the card layout (image on top, solid text bar beneath using the slide’s own colours, controls in a bar below). This removes text/control overlap on small screens and guarantees readable contrast. The overlay look is retained on larger screens. #### 1.5.3 * Fixed: on mobile, overlay-layout prev/next arrows moved from the vertical centre to the bottom of the slide so they no longer overlap the heading/text. The text box now uses the full width in the upper area. #### 1.5.2 * Fixed: in the overlay layout, the text box could overlap the previous/next arrows on some widths (desktop and mobile). The box now reserves clearance so the arrows and text never collide. #### 1.5.1 * Reverted demo-specific styling that had been added in 1.5.0 (grey card background, darkened borders, fixed gaps). The plugin now ships with neutral defaults so it inherits the active theme; any demo-specific styling belongs in site CSS, not the plugin. #### 1.5.0 * (superseded) Introduced demo-specific styling defaults — reverted in 1.5.1. #### 1.4.1 * Fixed the Overlay layout breaking out of its container and stretching full browser width. #### 1.4.0 * Width and height are no longer fixed. The carousel fills its container by default, with optional Maximum width and Slide height fields per carousel. #### 1.3.0 * Added a Layout style option per carousel: Card (controls below the image) and Overlay (controls over the image). #### 1.2.0 * Card layout: contained, centered card with controls in a bar below the image; full-width caption bar over the image. #### 1.1.0 * Transitions follow the W3C technique: the incoming slide is kept aria-hidden until the CSS transition ends. Added a reduced-motion bypass and a reveal safety net. #### 1.0.0 * Initial release. ## Meta * Version **2.4.3** * Last updated **2 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **7.0** * PHP version ** 7.4 or higher ** * Tags * [accessibility](https://wordpress.org/plugins/tags/accessibility/)[carousel](https://wordpress.org/plugins/tags/carousel/) [slider](https://wordpress.org/plugins/tags/slider/)[slideshow](https://wordpress.org/plugins/tags/slideshow/) [wcag](https://wordpress.org/plugins/tags/wcag/) * [Advanced View](https://wordpress.org/plugins/ananyoo-accessible-carousel/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/reviews/) ## Contributors * [ ananyoo ](https://profiles.wordpress.org/anblik/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/ananyoo-accessible-carousel/)