外掛標籤
開發者團隊
② 後台搜尋「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
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.
