WCAG 1.3.1: Info and Relationships

Level A

Quick answer: Structure conveyed visually—like headings, grouped options, labels, and price relationships—must also be exposed in code.

This criterion is frequently cited in US ADA lawsuits. This criterion is frequently cited in US ADA lawsuits when product options, checkout forms, and merchandising pages look organized visually but break for screen-reader users because the structure does not exist programmatically.

In the US, WCAG 2.2 Level AA is the de facto standard for ADA compliance. That is why this criterion matters for Shopify, WooCommerce, Magento, Wix, Squarespace, Webflow, BigCommerce, and custom storefronts selling to US consumers.

Why this criterion matters in US cases

US retail cases such as Target and Domino's put navigation, product selection, and checkout clarity at issue. WCAG 1.3.1 matters because those user tasks depend on real headings, fieldsets, labels, and relationships in code.

Common violations on US ecommerce sites

Variant pickers look grouped visually but are only loose divs and spans.
Sale price and original price are styled differently with no semantic relationship.
Checkout forms rely on placeholder text instead of labels and fieldsets.
Comparison tables use bold styling instead of real headers.

How to fix it

Use headings, lists, fieldsets, legends, and table headers for real structure.
Associate each form label with its input and group related choices.
Expose price relationships with semantic HTML and readable text.
Review CMS blocks created visually to ensure the code preserves hierarchy.

Start with the live customer journey, not design mocks. Audit homepage, collection, product, cart, account, and checkout-adjacent flows first because those pages create both legal risk and direct revenue loss.

Code example

<!-- Before -->
<div class="options-title">Choose size</div>

<!-- After -->
<fieldset>
  <legend>Choose size</legend>
  <label><input type="radio" name="size"> Medium</label>
</fieldset>

FAQ

What is WCAG 1.3.1?
Structure conveyed visually—like headings, grouped options, labels, and price relationships—must also be exposed in code.

Why does this matter for US ecommerce ADA compliance?
This criterion is frequently cited in US ADA lawsuits when product options, checkout forms, and merchandising pages look organized visually but break for screen-reader users because the structure does not exist programmatically.

What standard do US online stores use?
In the US, WCAG 2.2 Level AA is the de facto standard used to evaluate ADA compliance for ecommerce sites.

Check if your US store passes WCAG 1.3.1 → Free ADA Scan — Check Your US Store Now