Info & Relationships
Structure conveyed visually (headings, lists, tables, form groups) must also be conveyed programmatically. If it looks like a heading, it must be a heading element.
The structure you see — headings, lists, tables — must be built into the code too, so screen readers can announce it, not just sighted users seeing the layout.
WCAG 1.3.1 (Level A) requires that information, structure, and relationships conveyed through presentation are programmatically determinable.
This single criterion covers an enormous range of failures: headings used for styling, tables used for layout, form fields without fieldset/legend grouping, and any visual grouping that lacks a programmatic equivalent.
Why this matters
This is one of the most broadly applicable WCAG criteria — it covers headings, lists, tables, form groups, and any visual relationship. When structure is only visual (bold text that looks like a heading but isn't), screen reader users miss the entire organizational framework of the page.
How to detect
Open DevTools → Accessibility tab and inspect the computed roles. Check: are visual headings actual heading elements? Are visual lists using ul/ol/li? Are data tables using th with scope? Are related form fields in a fieldset with legend?
How to fix
<!-- Headings must be real headings --> <div class="big-bold">Features</div> <!-- ✗ --> <h2>Features</h2> <!-- ✓ --> <!-- Lists must be real lists --> <div>• Item one<br>• Item two</div> <!-- ✗ --> <ul><li>Item one</li><li>Item two</li></ul> <!-- ✓ --> <!-- Related form fields need grouping --> <fieldset> <legend>Shipping Address</legend> <label for="street">Street</label> <input id="street" /> </fieldset>