1.3.1 Info and Relationships

Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Partial (axe-core)

What This Means

Information, structure, and relationships conveyed through visual presentation must also be available programmatically. If something looks like a heading, it must BE a heading (<h1>–<h6>). If something looks like a list, it must BE a list (<ul>, <ol>). If a table has headers, they must be marked up as <th>.

Screen readers rely on semantic HTML to understand page structure. Without it, a visually organized page becomes a flat wall of text.

Who This Affects

Screen reader users — they navigate by headings, lists, and landmarks
Users of reading tools — tools that extract structure depend on semantic HTML
Users who customize CSS — custom stylesheets rely on correct semantics

Common Pitfalls

1. Using visual styling instead of semantic elements

<!-- Bad: looks like a heading but isn't one -->
<p style="font-size: 24px; font-weight: bold">Section Title</p>

<!-- Good -->
<h2>Section Title</h2>

2. Skipping heading levels

<!-- Bad: jumps from h1 to h3 -->
<h1>Page Title</h1>
<h3>Section</h3>

<!-- Good -->
<h1>Page Title</h1>
<h2>Section</h2>

3. Lists not using list elements

<!-- Bad -->
<div>• Item one</div>
<div>• Item two</div>

<!-- Good -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

4. List items outside a list

<!-- Bad -->
<li>Orphaned list item</li>

<!-- Good -->
<ul>
  <li>Properly nested list item</li>
</ul>

5. Tables without proper headers

<!-- Bad -->
<table>
  <tr><td>Name</td><td>Email</td></tr>
  <tr><td>Gandalf</td><td>gandalf@shire.com</td></tr>
</table>

<!-- Good -->
<table>
  <tr><th>Name</th><th>Email</th></tr>
  <tr><td>Gandalf</td><td>gandalf@shire.com</td></tr>
</table>

How to Test

Open DevTools (F12) and inspect the page structure. Verify that visual headings use <h1>-<h6> elements (not styled <p> or <div> tags).
Check heading levels are sequential and do not skip levels (e.g., no <h1> followed by <h3> without an <h2>).
Verify that visual lists use <ul>, <ol>, or <dl> elements, and that all <li> elements are inside a list parent.
Inspect data tables for proper <th> headers and check that complex tables use scope or headers attributes.
Disable CSS in the browser and read the page to confirm the content still has a logical, understandable structure.
Pass: All visual structure (headings, lists, tables, form groups) is conveyed through correct semantic HTML elements.
Fail: Any heading is a styled <div>/<p>, lists use non-list markup, table headers are <td> instead of <th>, or structure breaks when CSS is disabled.

axe-core Rules

| Rule | What It Checks | |------|---------------| | heading-order | Heading levels increase by one | | list | <ul> and <ol> only contain <li> | | listitem | <li> must be inside <ul> or <ol> | | definition-list | <dl> only contains <dt> and <dd> | | th-has-data-cells | <th> must relate to data cells |

Tools

Test this criterion with the Heading Structure Checker.