Level A
Perceivable
WCAG 2.0+
Success Criterion 1.3.1: Info and Relationships
Official W3C Definition
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Why This Criterion Matters
When visual formatting conveys meaning (like headings, lists, or form labels), that structure must also be available to assistive technologies. This allows screen reader users to understand the same relationships that sighted users see.
- Headings must use
<h1>-<h6>tags, not just bold/large text - Lists must use
<ul>,<ol>, or<dl>, not just line breaks - Form labels must be programmatically associated with inputs
- Tables must use proper
<th>and scope attributes
Who Benefits
Screen Reader Users
Can navigate by headings, understand lists, and identify form fields.
Cognitive Disabilities
Consistent structure aids understanding and navigation.
Keyboard Users
Proper structure enables efficient navigation.
Assistive Technology Users
All AT relies on semantic structure to interpret content.
How to Meet This Criterion
Technique 1: Semantic Headings
Good Example - Proper Heading Structure
<h1>Company Annual Report</h1>
<h2>Financial Summary</h2>
<p>Overview of financial performance...</p>
<h3>Revenue</h3>
<p>Total revenue increased by 15%...</p>
<h3>Expenses</h3>
<p>Operating expenses remained stable...</p>
<h2>Strategic Initiatives</h2>
<p>Key projects for the coming year...</p>
Bad Example - Visual-only Formatting
<!-- Using CSS classes instead of semantic headings -->
<p class="big-bold-text">Company Annual Report</p>
<p class="medium-bold-text">Financial Summary</p>
<p>Overview of financial performance...</p>Technique 2: Semantic Lists
Good Example - Proper List Markup
<!-- Unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
<!-- Definition list -->
<dl>
<dt>WCAG</dt>
<dd>Web Content Accessibility Guidelines</dd>
<dt>ARIA</dt>
<dd>Accessible Rich Internet Applications</dd>
</dl>Technique 3: Form Labels
Good Example - Associated Labels
<!-- Explicit label association -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
<!-- Implicit label association -->
<label>
Phone Number
<input type="tel" name="phone">
</label>
<!-- Required field indication -->
<label for="name">
Full Name <span aria-hidden="true">*</span>
<span class="visually-hidden">(required)</span>
</label>
<input type="text" id="name" name="name" required>Technique 4: Data Tables
Good Example - Accessible Table
<table>
<caption>Quarterly Sales by Region</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">North</th>
<td>$50,000</td>
<td>$55,000</td>
<td>$60,000</td>
</tr>
</tbody>
</table>Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Using bold text instead of headings | Screen readers can't navigate by headings | Use <h1>-<h6> elements |
| Skipping heading levels | Creates confusing document structure | Use headings in sequential order |
| Form inputs without labels | Users don't know what to enter | Associate labels with inputs |
| Tables without headers | Data relationships are unclear | Use <th> with scope attribute |
| Using tables for layout | Confuses structure and presentation | Use CSS for layout, tables for data |
Testing Methods
Automated Testing
- Use WAVE to check heading structure
- Use axe DevTools to identify missing labels
- Use browser dev tools to inspect semantic structure
Manual Testing
- Heading test: Use a screen reader to navigate by headings (H key in NVDA/JAWS)
- List test: Screen readers announce "list of X items" for proper lists
- Form test: Focus on inputs - are labels announced?
- Table test: Navigate table cells - are headers announced?
Related Criteria
1.3.2 Meaningful Sequence
Content order must make sense
4.1.2 Name, Role, Value
UI components must be properly identified
3.3.2 Labels or Instructions
Form inputs need labels