WCAG 1.3.1: Info and Relationships
Information, structure, and relationships conveyed through presentation (visual layout) must also be programmatically determinable through proper HTML markup. Headings should use heading tags, lists should use list markup, and form fields should be associated with labels.
What is WCAG 1.3.1 Info and Relationships?
WCAG 1.3.1 Info and Relationships is a Level A web accessibility success criterion under the Perceivable principle. Information, structure, and relationships conveyed through presentation (visual layout) must also be programmatically determinable through proper HTML markup. Headings should use heading tags, lists should use list markup, and form fields should be associated with labels. Common failures include using <div> or <span> with css styling instead of semantic html elements and creating visual headings with bold text instead of heading tags. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Verify headings use <h1>-<h6> tags, not just bold/large text
- ✓ Check that lists use <ul>, <ol>, or <dl> markup
- ✓ Ensure data tables use <th> elements with scope attributes
- ✓ Verify form inputs are associated with <label> elements
- ✓ Check that regions use semantic HTML (nav, main, aside, etc.) or ARIA landmarks
Common Failures
- ✗ Using <div> or <span> with CSS styling instead of semantic HTML elements
- ✗ Creating visual headings with bold text instead of heading tags
- ✗ Tables used for layout instead of CSS
- ✗ Form fields without associated <label> elements
- ✗ Using <br> tags to create visual lists instead of <ul>/<ol>
✓ Good Example
<main>
<h1>Product Catalog</h1>
<nav aria-label="Categories">
<ul>
<li><a href="/electronics">Electronics</a></li>
<li><a href="/clothing">Clothing</a></li>
</ul>
</nav>
<form>
<label for="search">Search products</label>
<input id="search" type="search" name="q">
</form>
</main> Uses semantic HTML elements (main, nav, h1, ul/li), proper heading hierarchy, labeled form inputs, and ARIA label for the nav landmark.
✗ Bad Example
<div class="main">
<div class="title" style="font-size:24px;font-weight:bold">
Product Catalog
</div>
<div class="nav">
<div><a href="/electronics">Electronics</a></div>
<div><a href="/clothing">Clothing</a></div>
</div>
<div>
<input type="search" placeholder="Search products">
</div>
</div> Uses div elements instead of semantic HTML. The heading is just a styled div. Navigation links are not in a list. The search input has no label (placeholder is not a substitute).
Test Your Site for 1.3.1 Compliance
Use our free accessibility tools to check your website against WCAG 1.3.1.
Open Testing Tool