Fixing Info and Relationships on Webflow (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.
Webflow — where to look
Designer, the HTML Tag setting on a text element; Field Settings on form inputs.
What to do
Choose the HTML tag by meaning, not appearance. Do not break the for/id pairing Webflow generates for form fields.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to it.
How to verify the fix
- Click each form label. If the cursor jumps into the associated field, the association exists.
- List the page's headings in a browser accessibility inspector and check the order is sequential.
- Disable CSS and confirm the page still reads as a sensible document.
Other platforms
- Fixing Info and Relationships on Shopify
- Fixing Info and Relationships on WooCommerce
- Fixing Info and Relationships on Wix
- Fixing Info and Relationships on Squarespace
The full criterion
Read the full explanation of WCAG 1.3.1 Info and Relationships, or the formal W3C definition.