Annex

Fixing Info and Relationships on WooCommerce (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.

WooCommerce — where to look

WooCommerce core templates (global/quantity-input.php, single-product/add-to-cart/variable.php, myaccount/form-login.php); your theme and page builder blocks.

What to do

WooCommerce core already associates its labels, so a broken association almost always comes from a theme override, a page builder block or a custom checkout field. In the page builder, set the HTML tag of heading blocks by meaning and control the visual size separately.

Verification status

Checked by reading the platform’s own source code. Core ships label for/id pairs on the quantity input, the variation selects and the account forms, several of them as screen-reader-text so the association exists without a visible label.

Source: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/global/quantity-input.php

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.