WCAG 2.1 · Level A · Perceivable
WCAG 1.3.1 — Info and Relationships, explained with examples
The visual structure of a page (headings, lists, tables, form labels) must also be available programmatically — assistive tech relies on the markup, not the styling. When you style a <div> to look like a heading without using <h2>, screen readers cannot navigate by heading. When form fields are not associated with labels, voice users cannot fill them in. Programmatic structure is the contract between visual design and assistive tech.
- Number
- 1.3.1
- Level
- A
- Principle
- Perceivable
- Guideline
- 1.3 Adaptable
Why this criterion exists
When you style a <div> to look like a heading without using <h2>, screen readers cannot navigate by heading. When form fields are not associated with labels, voice users cannot fill them in. Programmatic structure is the contract between visual design and assistive tech.
If you only remember one thing: the visual structure of a page (headings, lists, tables, form labels) must also be available programmatically — assistive tech relies on the markup, not the styling. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Info and Relationships affects:
Screen reader users navigating by heading or landmark
Keyboard users relying on focus order
Voice control users referencing labels
Users with reading disabilities using reading-mode tools
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
<div class="title"> styled to look like a heading
Visual list (bulleted with images) without <ul>/<li>
Data tables without <th> and scope attributes
Form fields without <label for="..."> or aria-label
Multiple <h1>s competing for the page topic
How to test for it
Use a screen reader's heading list (NVDA: H key, VoiceOver: VO+U).
Inspect tables for <th> and either scope or headers attributes.
Check every <input> has a programmatic name.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Use semantic elements that match the role you are styling. Headings, lists, and labels are the difference between perceived structure and programmatic structure.
The problem
<div class="text-2xl font-bold">Pricing</div>
<div>Free</div>
<div>Pro</div>
<input type="email" placeholder="Email">The fix
<h2>Pricing</h2>
<ul>
<li>Free</li>
<li>Pro</li>
</ul>
<label for="email">Email</label>
<input id="email" type="email">Use semantic elements that match the role you are styling. Headings, lists, and labels are the difference between perceived structure and programmatic structure.
Frequently asked questions
Do ARIA roles replace semantic HTML for 1.3.1?
ARIA roles can satisfy the programmatic requirement, but native HTML is always preferred. Use role="heading" aria-level="2" only when a real <h2> is architecturally impossible — for example, inside a web component shadow DOM with strict styling constraints. Native elements carry implicit roles and states that you have to re-implement manually with ARIA.
What is the most common 1.3.1 failure on e-commerce sites?
Form fields without <label> elements — specifically, product filter checkboxes that render as <input type="checkbox"> without an associated <label> or aria-label. Screen readers in forms mode read through inputs looking for labels; without one, they announce "checkbox, unchecked" with no context about what the checkbox controls.
Does a visual data table always need <th> elements?
Yes, if it is a real data table (rows and columns with a relationship). Use <th scope="col"> for column headers and <th scope="row"> for row headers. Layout tables — which you should avoid in modern CSS — should have role="presentation" to suppress table semantics entirely so screen readers do not announce cell positions.
Has 1.3.1 come up in real ADA litigation?
Unlabelled form fields and missing list semantics are cited in the Department of Justice's 2024 web accessibility rule under ADA Title II, which went into effect for large public entities in April 2026. Many private-sector lawsuits cite "inaccessible forms" as the barrier, which typically traces back to 1.3.1 violations. The DOJ rule explicitly references WCAG 2.1 AA.
How do I check heading structure quickly?
Open the browser's developer tools, switch to the Accessibility panel, and look at the computed accessibility tree. Alternatively, browser extensions like HeadingsMap or axe DevTools surface the heading outline in one click. A correct page has one H1, followed by nested H2s and H3s without skipped levels.
Other Perceivable criteria
1.1.1 Non-text Content
Perceivable · Level A
1.4.3 Contrast (Minimum)
Perceivable · Level AA
1.4.11 Non-text Contrast
Perceivable · Level AA
1.2.2 Captions (Prerecorded)
Perceivable · Level A
All WCAG 2.1 criteria
Browse the full index by principle
Complete WCAG 2.1 guide
POUR principles, conformance levels, legal requirements
How to fix: form fields without labels
Fix recipe · 3.3.2, 1.3.1, 4.1.2
How to fix: missing H1 / wrong heading order
Fix recipe · 2.4.6, 1.3.1
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.