Cartessia — Accessible Product Blocks for WooCommerce

Περιγραφή

🛍️ Cartessia adds the interactive WooCommerce blocks shoppers expect — variation swatches, a product quick view, a live product customizer, a delivery date picker, and a wishlist — and builds every one of them to be keyboard-operable and screen-reader-correct against WCAG 2.2 Level AA out of the box.

Most third-party swatch, quick-view, and wishlist plugins quietly break keyboard support and mislead screen readers — colour swatches with no name, modals that trap or lose focus, “Add to wishlist” toggles that say nothing when saved. Cartessia is the opposite: accessible is the definition of done, not a paid tier. Each block ships several design presets, so it looks right with zero custom CSS, and inherits your theme’s colours and typography.

Cartessia is built the modern WordPress way — the Interactivity API, Block API v3 (block.json), and server-side rendering. No jQuery, no framework runtime on your shop pages, and each block’s script loads only where it’s used. Every block renders on the server and is only enhanced by a little JavaScript, so it holds up for screen readers, search engines, and slow connections.

🧱 The Blocks

• 🎨 Variation Swatches — turn WooCommerce variation dropdowns into colour, image, and button swatches. A real radio-group (arrow-key navigable, selection announced), never colour alone — every swatch keeps an accessible name. It drives WooCommerce’s own variation form, so add-to-cart, price, and stock stay correct, and a no-JS fallback keeps the native dropdowns working.
• 🪟 Quick View — open product details in an accessible modal without leaving the page. Built on the native <dialog> element: focus moved in and returned to the trigger, Escape always closes, background made inert — no focus-trap hacks. Swatches work inside the modal and add-to-cart goes through the WooCommerce Store API. Three presets: Centered, Side, Compact.
• 🧰 Live Product Customizer — let customers personalise a product with a custom-text field and priced add-on options, with the live total announced to screen readers. Prices are server-authoritative (HMAC-signed), so the browser can’t tamper with them, and the customer’s choices carry through to the cart, checkout, and the order (and its emails).
• 📅 Accessible Delivery Date Picker — let customers choose a delivery date on the product page. A real ARIA grid calendar with full keyboard support, disabled dates announced, and locale-aware month and weekday names plus your site’s start-of-week — with a native <input type="date"> fallback. Your rules (minimum lead time, booking window, disabled weekdays) are enforced on the server, and the chosen date is saved to the cart and the order. Three presets: Calendar, Dropdown, Popover.
• 💗 Wishlist — a save-for-later toggle for any product. It uses aria-pressed and changes its name to “Remove …” when saved (never colour alone). Guests are saved in their browser; logged-in customers are saved to their account and follow them across devices. A companion Wishlist display block lists saved products with a remove button on each. Three presets: Heart, Outline, Text.

Every block on a page shares one Interactivity API store, so selecting a swatch or saving to the wishlist updates everywhere live, without a reload.

♿ Accessible By Default

• ⌨️ Full keyboard operation — every control is a real button, radio, or grid cell, reachable and operable without a mouse
• 🔊 Screen-reader correct — selections, totals, chosen dates, and saved state are announced; decorative icons are hidden
• 🎯 Target sizes — interactive controls meet the WCAG 2.2 24×24px minimum
• 🌗 Respects the visitor — honours prefers-color-scheme (dark mode) and prefers-reduced-motion
• 👁️ Visible focus — a clear focus ring on every interactive element
• 🌐 RTL — full right-to-left layout support

🔒 Trustworthy Commerce

• 🧾 Server-authoritative pricing — custom-option prices and delivery rules are HMAC-signed; the server re-validates every add-to-cart, so a customer can’t forge a price or bypass a delivery rule from the browser
• 🏬 HPOS-safe — reads and writes everything through WooCommerce CRUD and declares High-Performance Order Storage compatibility; it never touches order tables directly
• ⚡ Cache-friendly — personalised state (like wishlist membership) hydrates in the browser, so nothing user-specific is baked into cached HTML
• 🚫 No data collection — no telemetry, no phone-home, no account, no external services

🚫 What Cartessia Will Not Do

• ❌ No accessibility overlay — no floating widget, no “profiles”. Cartessia builds correct markup instead of layering a widget over broken markup
• ❌ No fake urgency — no invented “12 people are viewing this” or countdown scarcity in the free blocks
• ❌ No jQuery bloat — built on core APIs, with per-block scripts that load only where used
• ❌ No lock-in — deactivate and your products, orders, and media are untouched

Want accessible blocks for the rest of your site — modals, sliders, tables, mega menus, and a full accessibility toolkit? See the sibling plugin Rayetun Accessible Blocks & Accessibility Toolkit.

Development

Cartessia is open source and built with the official @wordpress/scripts toolchain. The complete, unminified source for every block ships in the plugin’s src/ directory; the files in build/ are compiled from it. Nothing is obfuscated.

To build from source:

npm install && npm run build

That regenerates everything in build/. No build step is needed to use the plugin — the compiled output is included.