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?
They can, but native HTML is preferred. Use role="heading" aria-level="2" only when you cannot use <h2>.
Other Perceivable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.