Info and Relationships
Information, structure, and relationships conveyed visually (headings, lists, tables, grouped form fields) must also be programmatically determinable through HTML semantics or ARIA.
What it requires
Visual users can see at a glance that a piece of text is a heading because it is bigger or bolder; that a group of items is a list because they are bulleted; that a set of inputs is a form section because they are grouped under a visual title. Screen-reader users only know any of this if the underlying HTML semantically marks it up.
A `<div class="big-text">` styled to look like a heading is a 1.3.1 failure — use `<h2>`. A list of items wrapped in `<div>` instead of `<ul>` / `<li>` is a failure. A form section without a `<fieldset>` and `<legend>` (or `aria-labelledby` equivalent) is a failure.
Common Shopify failure
Theme product pages where the variant selector group ("Color", "Size") is just `<div>` containers. Cart drawer where the "Cart subtotal" label is visually styled but not associated with the value via a list or definition.
How to fix it
Replace styled `<div>` headings with `<h2>` / `<h3>`. Use `<fieldset>` + `<legend>` for variant groups. Use `<dl>` / `<dt>` / `<dd>` for cart summary lines.
Primary source: W3C — WCAG 2.0 Understanding 1.3.1