Labelled demonstration · AP-DEMO-001

One finding, returned ready for independent retest

This is not a customer store, a live audit or a certificate. It shows the complete handoff for one Shopify theme-controlled focus indicator finding.

Status: Ready for independent retest. AccessProof fixed the scoped item and assembled the evidence. The original auditor still accepts or rejects it.

Finding and reproduction

WCAG 2.1 AA 2.4.7 Focus Visible. On a Shopify product template, the Add to Cart button receives keyboard focus but shows no visible focus indicator.

  1. Open the product template and use the keyboard only.
  2. Press Tab until focus reaches Add to Cart.
  3. Confirm the submit button is the active element.
  4. Expected: a clear focus marker. Before: the button looks unchanged.

The theme stylesheet applies outline: none to the shared button rule and never restores an outline under :focus-visible. The fault is in theme CSS, not checkout, an app iframe or a third-party widget.

Before and after

Demo product card before the fix: the focused Add to Cart button has no visible indicator
Before — keyboard focus is present but cannot be seen.
Demo product card after the fix: a blue outline visibly surrounds the focused Add to Cart button
After — a 3px offset outline makes keyboard focus visible.

Source diff

+.product-form__submit:focus-visible,
.button:focus-visible,
button.shopify-payment-button__button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

Mouse clicks remain free of a permanent ring; keyboard focus receives a visible indicator.

Regression and manual evidence

Evidence returned with AP-DEMO-001
CheckResultEvidence
CSS regressionPassBefore fixture has no focus-visible restore; after fixture requires a non-none outline.
Tab to Add to CartPass after fixFocus lands on the submit control.
Visible indicatorPass after fix3px blue outline with 3px offset.
Enter / SpacePassThe product form remains operable in the theme preview.
Scope boundaryTheme onlyNo claim about checkout, apps or the rest of the storefront.

What the auditor receives

  • the original finding and reproducible journey;
  • root-cause analysis and a source diff;
  • a focused automated regression test;
  • manual test notes and dated before-and-after frames; and
  • the final status Ready for independent retest.

AccessProof does not turn that status into a conformance badge. The auditor retests against the agreed acceptance criteria.

Ask about a partner handoff Read the partner model