WCAG 1.3.1 Info and Relationships: what it means and how to fix it

Level A · Perceivable · Updated

Short answer: Structure you can see (headings, lists, tables, form groups) must also exist in the code, so screen reader users can navigate by it instead of hearing one flat stream of text.

What it requires

Information and relationships conveyed visually, such as headings, lists, data tables, required fields and grouped form controls, must be available in the markup or in text. Bold text that looks like a heading must actually be a heading element.

Who it affects

Screen reader users, who navigate by headings, lists and landmarks the way sighted users skim. When structure is missing, a long page has to be listened to from top to bottom.

How it shows up in ADA website claims

Complaints describe pages that could not be navigated by heading, product tables whose values were read without their column names, and forms whose required fields were marked only by color or an asterisk with no explanation.

How to check your site

  1. Use a headings outline tool (for example a browser extension) to check that every visual heading is an h1 to h6 and the order makes sense.
  2. Check that visual lists are ul/ol and data tables use th headers.
  3. Check that required fields say "required" in text or with the required attribute, not only with color.

How to fix it

<!-- Looks like a heading, so make it one -->
<h2>Shipping and returns</h2>        <!-- not <p class="big-bold"> -->

<!-- Data table with real headers -->
<table>
  <tr><th scope="col">Size</th><th scope="col">Chest (in)</th></tr>
  <tr><td>M</td><td>38-40</td></tr>
</table>

<!-- Grouped radio buttons -->
<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="ship" value="std"> Standard</label>
  <label><input type="radio" name="ship" value="exp"> Express</label>
</fieldset>

Use one h1 per page, then h2 for main sections. Do not use tables for layout.

Frequently asked questions

Can I skip heading levels?

WCAG does not strictly forbid it, but a logical order (h1, h2, h3) is much easier to navigate and is what auditors expect.

Is using divs a WCAG failure?

Only when a div replaces an element that carries meaning, such as a heading, list, table header or button, and nothing else provides that meaning.

Does 1.3.1 cover form labels?

Yes, the relationship between a label and its field is part of it. See also 3.3.2 Labels or Instructions.

Automated rules that test this (axe-core): list, listitem, definition-list, dlitem, th-has-data-cells, td-headers-attr, aria-required-children, aria-required-parent, p-as-heading. Our scanner runs these checks.

Other commonly cited criteria

Read the official WCAG 2.1 specification at W3C.

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.