Info & Relationships (semantic structure).

Proper HTML structure lets assistive technology understand page layout

What does this check test?

This check verifies that information, structure, and relationships conveyed visually through formatting are also represented programmatically in the HTML. Headings must use `<h1>`–`<h6>` tags (not just bold/large text), lists must use `<ul>`/`<ol>`/`<li>`, data tables must use `<th>` with proper `scope` attributes, form fields must have associated `<label>` elements, and related form controls must be grouped with `<fieldset>` and `<legend>`. This maps to WCAG 2.2 Success Criterion 1.3.1 (Level A).

Why does it matter?

Sighted users understand page structure through visual cues — larger text signals headings, indentation signals lists, and grid layouts signal tables. Screen reader users depend entirely on semantic HTML to get the same structural understanding. When a developer uses `<div class="heading">` instead of `<h2>`, that structure is invisible to assistive technology. Proper semantics enable screen reader navigation shortcuts (jumping between headings, tables, or landmarks), which dramatically improves efficiency. Forms without associated labels force screen reader users to guess what each input expects.

Who is affected?

Front-end developers making layout and markup decisions, designers creating visual hierarchies that must translate to semantic structure, CMS theme developers building templates, and accessibility auditors. Component library authors should ensure that form components automatically associate labels with inputs.

Where does this apply?

Every page that has visual structure: heading hierarchies, navigation menus, breadcrumbs, data tables, forms with multiple fields, grouped radio buttons or checkboxes, landmark regions (header, nav, main, footer), and definition lists. Single-page applications that dynamically render content are especially prone to losing semantic structure.

How to fix it

<!-- Bad: div with class instead of semantic element -->
<div class="heading">Page Title</div>
<div class="nav">...</div>

<!-- Good: semantic HTML with proper hierarchy -->
<h1>Page Title</h1>
<nav aria-label="Main">
  <ul>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main>
  <h2>Section</h2>
  <h3>Subsection</h3>
</main>
<footer>...</footer>

<!-- Associate every input with a label -->
<label for="email">Email</label>
<input id="email" type="email">

<!-- Group related fields with fieldset -->
<fieldset>
  <legend>Shipping Address</legend>
  <label for="street">Street</label>
  <input id="street" type="text">
</fieldset>

<table>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Widget</th><td>$9.99</td></tr>
  </tbody>
</table>

References

• WCAG 2.2 — Success Criterion 1.3.1 Info and Relationships
• W3C WAI — Page Structure Tutorial
• MDN — HTML elements reference