Shopify Debut theme — accessibility hot-spot audit
Accessibility hot-spots in Debut
Icon-only buttons (cart, search, account)
Auto-fixWCAG: 4.1.2 Name, Role, Value
Header icons (cart, search, account) often render as `<a><svg/></a>` with no `aria-label`, leaving screen readers to announce only "link" with no description. Auto-fix adds `aria-label` per icon and `aria-hidden="true"` on the inner SVG.
Focus-visible styling on theme buttons
Auto-fixWCAG: 2.4.7 Focus Visible
Custom button styling sometimes overrides browser default focus rings without replacing them. Auto-fix scopes a high-contrast focus ring to `:focus-visible` so it shows for keyboard users without leaving a lingering ring after mouse clicks.
Variant picker keyboard operability
Partial auto-fixWCAG: 2.1.1 Keyboard
Color-swatch and size-selector pickers built from styled `<div>` elements without `role="radiogroup"` are unreachable by keyboard. Auto-fix rewrites swatches to native `<input type="radio">` or `role="radio"` with full arrow-key handling.
Mobile skip-link visibility
Auto-fixWCAG: 2.4.1 Bypass Blocks
Skip-link present in desktop markup but display:none on mobile breakpoint. Auto-fix removes the breakpoint-gating CSS.
Cart drawer focus management
Auto-fixWCAG: 2.1.2 No Keyboard Trap
Cart-drawer modals open as overlays without enforcing a focus trap — keyboard users tabbing through the page after opening the drawer can land on background elements. Auto-fix patches the drawer JavaScript to trap focus, handle Escape, and restore focus to the trigger on close.
FAQ
Is the Shopify Debut theme accessible by default?
Shopify has not published a Theme VPAT for Debut. The theme is engineered with accessibility in mind, but accessibility regressions appear in standard merchant customizations (color palette, section layouts, third-party apps). The hot-spots above are the most common predictable regressions based on the theme's structural patterns.
What WCAG criteria does Debut most often fail?
Across stores running Debut, the most-frequently-cited criteria are 1.1.1 Non-text Content (alt text), 1.4.3 Contrast Minimum (color contrast), 4.1.2 Name, Role, Value (icon-only buttons), and 2.5.8 Target Size Minimum (mobile tap targets). Each maps to a deterministic theme-code fix.
Can AccessComply fix Debut accessibility issues automatically?
Yes. AccessComply scans the live Debut storefront, identifies WCAG 2.1 + 2.2 AA failures, and writes source-code fixes directly to the theme files via the Shopify Admin API. Roughly 70-80% of common violations auto-fix; the remainder are flagged for manual review with suggested code changes.
Will AccessComply break my Debut customizations?
No. Every fix is preceded by a full theme backup. Fixes are scoped to specific WCAG-relevant attributes and styles — not the merchant's custom layout, copy, or branding. If a fix introduces a regression, the post-fix re-scan triggers automatic rollback.
Run a real Debut scan
AccessComply scans your live Debut storefront for the hot-spots above and writes source-code fixes directly to your theme files.