Skip to content

Accessibility

The Parts Diagram block is built to meet WCAG 2.1 AA standards. This page documents the assistive-technology behavior so you can answer accessibility audits with confidence.

Keyboard navigation

  • All interactive elements are reachable with Tab in a predictable order.
  • Tab order: diagram tabs → side-panel rows → open popup (variant picker → quantity → add-to-cart) → close button.
  • Enter or Space activates focused rows and buttons.
  • Esc closes the popup.
  • Focus is trapped inside the popup while it's open — Tab cycles within the popup and does not leak to the page underneath.
  • Focus is restored to the originating hotspot row when the popup closes.

Screen reader behavior

  • The diagram image carries an alt attribute equal to its name.
  • Each hotspot is exposed as a button with an accessible name made from its label and product title (e.g. "Toe buckle, 1 of 8").
  • Side-panel rows are also button elements with the same naming pattern.
  • Popups announce as a dialog. The dialog title is the part name; the variant picker announces option name and value changes.
  • Stock state is announced — a sold-out hotspot reads as "Toe buckle, sold out" so blind shoppers don't waste time interacting with unavailable variants.

Color contrast

All interactive text and controls in the block meet the WCAG AA contrast minimum (4.5:1 for body text, 3:1 for UI components). The hover highlight, focus ring, and price strikethrough all pass against the standard light and dark theme palettes.

If your theme uses unusually low-contrast colors, the block falls back to its own neutral palette to maintain readability.

Motion

The hover effect uses a short, low-amplitude pulse animation. Shoppers who have prefers-reduced-motion set in their OS see the highlight without animation — the color change is applied instantly.

Visible focus

Focus rings are visible and respect the theme's :focus-visible styling when the theme defines one. A neutral high-contrast ring is applied as fallback when the theme provides no rule.

What we don't yet support

  • Voice control for hotspot navigation by name. Voice users can reach hotspots via the side-panel rows, which are standard buttons, but there's no shortcut to address a hotspot by label alone.
  • Custom keyboard shortcuts inside the storefront popup. Standard Tab / Enter / Esc only.

If you need to extend accessibility behavior for your store's audience, contact support — we triage accessibility requests as priority bugs.