Accessible Carousel & Slider – WCAG AA Compliant Slideshow
Changelog
2.5.6
New: added a “Settings” link on the Plugins screen that opens the plugin’s Accessible Carousel dashboard, next to the existing “How to use” link.
Readme: the description now reads “WCAG AA” instead of “WCAG 2.2 AA”, so the conformance wording does not need editing when a newer WCAG version is published. Specific success-criterion numbers are unchanged.
Internal: synced the four block.json versions to the plugin version (they had lagged at 2.4.3).
2.5.5
Previous/next arrows are now crisp inline SVG chevrons (using currentColor, so they follow the theme colour and Windows High Contrast mode) instead of thin text glyphs.
Pause/Play button has a fixed minimum width, so the label swap no longer shifts the dot navigation (better stability for screen-magnifier users).
Overlay layout: the card background variable is neutralised, so the grey card colour can no longer show through overlay carousels, including in the small-screen styles.
2.5.4
Accessibility (WCAG 2.4.3 Focus Order / 4.1.2 Name, Role, Value): in the card scroller, pressing Previous or Next now moves keyboard focus onto the card that has just scrolled into view (the leading-edge card in the scroll direction) and announces that card’s own heading and text — replacing the previous polite “Showing items N to M of TOTAL: titles” summary. Each card is a list item that names itself via aria-labelledby (its heading and description), so the focus move reads the right content, and the card shows a clear focus outline. The cards remain a list, so “list, N items” is still announced.
No settings or visual-design changes.
2.5.3
Accessibility (WCAG 2.4.3 Focus Order): in the card scroller, the Previous/Next buttons are now placed AFTER the cards in the DOM and rendered below them, so keyboard focus lands on the visible cards first and reaches the buttons last — focus order, DOM order and visual order now all agree.
Accessibility (WCAG 4.1.3 Status Messages): activating Previous or Next now announces the cards that have scrolled into view through a polite live region (for example, “Showing items 4 to 6 of 8: Build, Extend, Audit”), so screen-reader users hear what changed. Announcements fire only on a button press, not on every manual scroll. No settings or visual-design changes beyond the buttons moving below the cards.
2.5.2
Accessibility (WCAG 2.4.3 Focus Order): in the card scroller, only the cards currently visible in the viewport are now in the keyboard tab order. Cards scrolled off-screen have their focusable contents set to tabindex=”-1″ and are restored as they scroll into view (via the Previous/Next buttons or the focusable scroll region). Uses IntersectionObserver, with a safe fallback that keeps every card tabbable where it is unavailable. Nothing is hidden from screen-reader browse mode. No settings or visual changes.
2.5.1
Accessibility (WCAG 2.4.3 Focus Order): in the card scroller the Previous/Next buttons now sit visually ABOVE the cards, matching their position in the tab order. In 2.4.4 the buttons were moved first in the tab order but kept below the cards, so keyboard focus jumped to the lower buttons before the cards — a focus/visual order mismatch. They are now reached first AND shown first. No settings change.
2.5.0
New: added an “Accessible Carousel” admin menu with an About / how-to page (hero header, list of blocks, insertion steps, accessibility summary and links). Block plugins have no global settings, so this page is informational only.
New: the plugin’s blocks are now grouped under an “Ananyoo Accessible Blocks” category in the editor inserter for easier discovery.
New: added “How to use”, “Live demo” and “Support” links on the Plugins screen.
No changes to the blocks themselves or to front-end output.
2.4.4
Accessibility (WCAG 2.4.3 Focus Order): in the card scroller, the Previous/Next buttons are now placed before the scroll viewport in the DOM, so keyboard focus reaches them before tabbing through the card content. Their on-screen position is unchanged (kept via CSS flex order). No settings or visual changes.
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.
