WCAG 1.3.1 Info and Relationships

Information, structure, and relationships conveyed through presentation must also be programmatically determinable. The criterion that powers headings, lists, table headers, and form-label association.

Normative spec: https://www.w3.org/TR/WCAG22/#info-and-relationships
Last verified: 2026-04-28
Byline: Editorial team

What this Level A criterion requires

Whenever a sighted user infers structure or relationship from visual presentation — a heading, a list, a paragraph break, a form label, a row in a table — that same structure must be exposed programmatically so assistive technology and machine-readable parsers can recover it.

The criterion is the bridge between visual layout and the accessibility tree. About 65% of WCAG audit findings recorded by the WebAIM Million 2024 study trace back to a 1.3.1 failure — typically a heading rendered as a styled <div>, a list rendered as <br>-separated lines, or a table laid out with <div role="row"> but no header cells.

Concrete obligations

Visual cue	Programmatic obligation
Heading text	Use `<h1>`–`<h6>`, in order.
List of items	Use `<ul>` / `<ol>` / `<dl>`; each item in `<li>` (or `<dt>`/`<dd>`).
Paragraph break	`<p>` per paragraph.
Emphasised word	`<em>` (italic) or `<strong>` (bold). Avoid pure CSS for semantic stress.
Form label	`<label for="...">` referencing the control id.
Required field	`required` attribute and a visible “required” hint.
Table data	`<table>` with `<th scope="col">` / `<th scope="row">`.
Region of the page	Sectioning element or ARIA landmark.

The HTML element is preferred; ARIA is the escape hatch where the right element does not exist.

Why visual-only conveyance fails

Sighted users decode structure from typography (heading size, indent, table grid). Screen reader, switch device, voice control, and braille users cannot. They navigate via lists of headings, landmarks, links, form fields, and tables. A <div> rendered as a heading is invisible to those navigation modes; the user has to read every line of body text in order to find the section.

Common implementation mistakes

<br>-separated lines instead of a list. Decoders read “line one … line two” with no list cue. Use <ul> / <ol>.
Visual table built from CSS grid. Use a real <table> with <th scope> for header cells; CSS grid layout is for visual only.
Bold paragraph as a heading. Use <h2>/<h3> and CSS-style it instead.
Placeholder as the only label. Placeholder vanishes on focus and has only a 3:1 contrast in most engines. Always pair with a real <label>.
Card title in a <div> with role="heading" but no aria-level. ARIA generic heading without level fails to slot into the navigation; specify aria-level="2" (or use <h2>).
Visually-grouped controls without a <fieldset>/<legend>. Three radio buttons under a styled label drift apart in the AX tree; wrap in <fieldset> so the legend is announced.

Authoring patterns

Form labelling

<label for="email">Email address</label>
<input id="email" type="email" name="email" required
       aria-describedby="email-hint">
<small id="email-hint">We send a confirmation, no marketing.</small>

The <label> is associated by id; the hint is associated via aria-describedby. Both are announced when the input receives focus on every modern engine across Chromium, WebKit, and Gecko.

Data table with row + column headers

<table>
  <caption>Browser engine support, Q1 2024</caption>
  <thead>
    <tr><th></th><th scope="col">Chromium</th><th scope="col">Gecko</th><th scope="col">WebKit</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">:has()</th><td>Yes</td><td>Yes</td><td>Yes</td></tr>
    <tr><th scope="row">@layer</th><td>Yes</td><td>Yes</td><td>Yes</td></tr>
  </tbody>
</table>

The scope attribute removes ambiguity when a cell could belong to either a row or a column header.

Heading hierarchy

<h1>Article title</h1>
<h2>Section A</h2>
  <h3>Sub-section A.1</h3>
  <h3>Sub-section A.2</h3>
<h2>Section B</h2>

Skipping levels (<h1> → <h3>) is permitted by HTML but discouraged for accessibility. Maintain a contiguous hierarchy.

Verification

Navigate the page with NVDA’s heading list (Insert+F7) and VoiceOver’s rotor (VO+U). Verify the headings reflect the document structure.
Tab through the page; verify every interactive element has a visible label and that the Tab order matches reading order.
Inspect the Accessibility tree in Chromium DevTools, Firefox Accessibility Inspector, or Safari Web Inspector. Check that every visually distinct region has a programmatic counterpart.

About 70% of 1.3.1 violations are detectable by automated tools (Deque axe-core 4.x stats); the other 30% (semantic appropriateness of the chosen element) require human review.

Cross-engine support

The criterion is platform-agnostic. The underlying HTML and ARIA mappings reached interop in 2018; minor edge cases in heading exposure inside <dialog> shadow trees were resolved in 2023.