1.3.1 Info and Relationships

Level A · added in WCAG 2.0

Structure that you show visually, such as headings, lists, tables, form labels and groups, must also be present in the code. Assistive technology can then convey the same relationships, or you describe them in text.

Who it helps

Screen reader users rely on real headings, lists and table headers to navigate and to understand how content fits together. Without them, a page sounds like one long, flat stream of text, and form fields have no clear label.

How to meet it

Mark up headings with <h1> to <h6> in a logical order instead of styling a <div> or <p> to look like a heading.
Use <ul>, <ol> and <dl> for lists, with <li>, <dt> and <dd> as direct children.
In data tables, use <th> for header cells with scope="col" or scope="row", and add a <caption>; use headers and id only for complex tables.
Connect every label to its field with <label for> or by wrapping the input. Group related radio buttons in a <fieldset> with a <legend>.
Use landmark elements such as <header>, <nav>, <main> and <footer> for the main regions of the page.
When you build custom widgets with ARIA, include the required parent and child roles, for example role="listbox" containing role="option".

Examples

Fails:A styled div looks like a heading but is not one in the code

<div class="section-title">Shipping options</div>
<p>Choose how fast you want your order.</p>

Fails:A data table with no header cells: screen readers cannot say which column a value belongs to

<table>
  <tr><td><b>Plan</b></td><td><b>Price</b></td></tr>
  <tr><td>Starter</td><td>$9</td></tr>
  <tr><td>Team</td><td>$29</td></tr>
</table>

Passes:A real heading element carries the same visual style

<h2 class="section-title">Shipping options</h2>
<p>Choose how fast you want your order.</p>

Passes:Header cells use th with scope, and a caption names the table

<table>
  <caption>Monthly plans</caption>
  <tr><th scope="col">Plan</th><th scope="col">Price</th></tr>
  <tr><td>Starter</td><td>$9</td></tr>
  <tr><td>Team</td><td>$29</td></tr>
</table>

Can a scanner detect this?

Partly

Automated tools catch broken markup, such as list items outside a list or ARIA roles missing required parents or children. They cannot tell that bold text is acting as a heading or that a heading level is wrong. A person must compare the visual structure with the code.

axe-core rules that test it

list
listitem
definition-list
dlitem
td-headers-attr
th-has-data-cells
aria-required-children
aria-required-parent
aria-hidden-body

Common mistakes

Picking heading levels for their font size, such as jumping from <h1> to <h4>, instead of for the outline of the page.
Using placeholder text as the only label for a form field.
Using <br> tags or line breaks to fake a list instead of using <ul> or <ol>.
Grouping radio buttons visually under a question without a <fieldset> and <legend>, so the question is never announced.

Official W3C explanation of 1.3.1

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026