Annex

Fixing Info and Relationships on Shopify (WCAG 1.3.1)

Structure you can see — headings, lists, tables, form labels — must exist in the markup too, not be simulated with font size and colour alone.

Why it matters

The expensive version of this failure is in the checkout form. A field whose label is not programmatically associated leaves a screen reader user guessing what to type, and they abandon at the payment step. That is a lost order, at the point in the funnel where the customer was most committed.

Shopify — where to look

Theme code: form sections such as sections/contact-form.liquid, plus product templates. Shopify's own checkout is platform-managed and cannot be edited from the theme.

What to do

Ensure label/for and id match on every form field. Use real headings and lists in the rich-text product description. Note that Shopify's own checkout is platform-managed and cannot be edited from the theme.

Verification status

Checked by reading the platform’s own source code. Dawn associates labels correctly (label class="field__label" for="ContactForm-name"). Broken associations usually come from a custom section or an app-injected form.

Source: https://github.com/Shopify/dawn/blob/main/sections/contact-form.liquid

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Click each form label. If the cursor jumps into the associated field, the association exists.
  2. List the page's headings in a browser accessibility inspector and check the order is sequential.
  3. Disable CSS and confirm the page still reads as a sensible document.

Other platforms

The full criterion

Read the full explanation of WCAG 1.3.1 Info and Relationships, or the formal W3C definition.