Goal
Ensure that information, structure, and relationships conveyed visually are also available programmatically.
Success Criterion · WCAG 1.3.1
Info and Relationships
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Level AWCAG 2.0Perceivable1.3 · Adaptable
Copy button ready
What to do
Use proper semantic markup to convey the structure and relationships that are apparent from visual presentation.
Why it matters
Assistive technologies rely on proper markup to convey page structure, not just visual styling.
Success criterion
What WCAG 1.3.1 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Intent
Why WCAG created this requirement
- Visual formatting (bold, spacing, position) conveys meaning that must also be available programmatically.
- Proper semantic HTML elements (headings, lists, tables) communicate structure to assistive technologies.
- The relationship between elements (labels to inputs, headers to data cells) must be programmatically determinable.
- If semantic markup is not possible, provide the structural information in text.
Benefits
Who gains when you pass
- Screen reader users can navigate by headings, lists, tables, and landmarks instead of reading everything linearly.
- Users can understand the structure of content even when they cannot see visual formatting.
- Proper markup enables assistive technologies to announce relationships (e.g., "Column 2, Row 3").
- Voice control users can reference elements by their semantic role ("click the search heading").
- Users with cognitive disabilities benefit from consistent, predictable structure.
- Content can be restyled or reformatted while maintaining its meaning and structure.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Without proper markup, screen reader users hear content as a flat stream of text without structure.
Headings that are only styled visually cannot be navigated to directly by screen reader users.
Data tables without proper headers become incomprehensible lists of disconnected values.
Visual groupings (like related form fields or sidebar content) become meaningless without programmatic structure.
Users cannot understand relationships between elements that are only conveyed through visual proximity or styling.
Overview
When information is conveyed visually through formatting, structure, or layout, that same information must be available to assistive technologies through proper semantic markup. This includes using heading elements for headings, list elements for lists, table elements for tabular data, form labels for inputs, and ARIA when needed. Users who cannot see the visual presentation must be able to perceive the same structural information through their assistive technology.
- Use native HTML elements for their semantic meaning: h1-h6 for headings, ul/ol for lists, table for tabular data.
- Associate form labels with their inputs using the for/id attributes or by nesting.
- Use th elements with scope attributes for table headers.
- Use ARIA landmarks (role="navigation", role="main") to define page regions.
- Do not use tables for layout; use CSS. Reserve table markup for actual data tables.
- Ensure visual groupings and relationships are represented in markup, not just through CSS positioning or styling.
Reference: All summaries and highlights originate from Understanding WCAG 1.3.1 and the W3C quick reference.
Fast facts
- Conformance level
- Level A
- WCAG version introduced
- WCAG 2.0
- Principle
- Perceivable
- Guideline
- 1.3 · Adaptable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Page headings
Pass
Section titles use h2 elements that screen readers can navigate to: <h2>Product Features</h2>
Fail
Section titles are styled divs: <div class="section-title">Product Features</div> — screen readers cannot navigate to them.
Data table
Pass
<table><caption>Q3 Sales</caption><tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>...</table>
Fail
A data table uses divs styled to look like a table, so screen readers announce it as plain text.
Form input
Pass
<label for="email">Email Address</label><input type="email" id="email">
Fail
A text label sits visually next to an input but has no programmatic association: <span>Email</span><input type="email">
Navigation
Pass
<nav aria-label="Main navigation"><ul><li><a href="/">Home</a></li>...</ul></nav>
Fail
Navigation links are in a div with no nav element or role, so screen reader users cannot jump to navigation.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Create a heading hierarchy map for each page template showing the h1-h6 structure.
- Document the landmark structure used across the site.
- Maintain a component library with proper semantic markup examples.
- List all data tables and their header markup structure.
- Document ARIA usage patterns for custom components.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Understanding 1.3.1
Official W3C interpretation, techniques, and intent for Info and Relationships.
Quick Reference 1.3.1
Filterable list of sufficient techniques and failures.
Technique H42
Using h1-h6 to identify headings.
Technique H51
Using table markup to present tabular information.
Technique H44
Using label elements to associate text labels with form controls.
ARIA Landmarks Example
ARIA Authoring Practices Guide examples for landmark regions.
Implementation checklist
Capture progress and blockers
- Use heading elements (h1-h6) for all visual headings, maintaining a logical hierarchy.
- Mark up all lists using ul, ol, or dl elements as appropriate.
- Use proper table markup with th, scope, and caption for data tables.
- Associate all form inputs with labels using for/id or by nesting the input within the label.
- Use fieldset and legend to group related form controls visually presented together.
- Define page landmarks using HTML5 elements (nav, main, aside) or ARIA roles.
- Ensure visual groupings and relationships are reflected in the markup or described in text.
- Use structural markup (sections, articles, aside) to represent content relationships shown visually.
- Avoid using CSS or layout alone to convey meaning that is not in the markup.
Testing ideas
Prove conformance with evidence
- Inspect the page with browser developer tools to verify semantic HTML is used appropriately.
- Use a screen reader to navigate by headings and verify the heading structure matches the visual hierarchy.
- Navigate by landmarks to verify page regions are properly identified.
- Verify that visual groupings (fieldsets, sections, sidebars) are reflected in the programmatic structure.
- Navigate data tables and verify header-cell relationships are announced correctly.
- Use accessibility testing tools (axe, WAVE) to identify missing or improper semantic markup.
- Disable CSS and verify content structure is still understandable.
- Check that visually conveyed relationships (lists, hierarchy, groupings) are determinable programmatically.
Related success criteria