WCAG 1.3.1 Info and Relationships: Fix Semantic HTML Issues

What This Criterion Requires

WCAG 1.3.1 requires that information, structure, and relationships conveyed through visual presentation are also available programmatically or through text. When sighted users can infer structure from visual cues like font size, bold text, indentation, or spatial grouping, that same structural information must be encoded in the underlying HTML so assistive technologies can convey it. This means using proper heading elements for headings instead of styled divs, semantic list elements for lists, table markup for tabular data, label elements for form controls, and fieldset/legend for grouped form elements. ARIA landmarks and roles can supplement native HTML semantics where needed. This criterion is one of the most frequently violated because developers often rely on visual styling alone to convey structure.

Why It Matters

Visual structure is meaningless to users who cannot see the page layout. Screen reader users navigate by headings, landmarks, and other structural elements to understand and move through content efficiently. If a heading is just a large bold div, a screen reader user has no way to jump to that section or understand the page hierarchy. Similarly, if a data table is built with divs and CSS Grid, the relationships between headers and cells are lost entirely. This criterion ensures that the semantic meaning behind visual design choices is preserved in code, enabling assistive technologies to present content in a meaningful way. It also benefits users who apply custom stylesheets, text-only browser users, and voice navigation users who rely on structural commands. Proper semantic HTML is the foundation of an accessible, maintainable, and SEO-friendly website.

Common Failures and How to Fix Them

<div class="section-title" style="font-size: 24px; font-weight: bold;">
  Our Services
</div>

<h2>Our Services</h2>

<div class="features">
  <div class="feature-item">Free shipping</div>
  <div class="feature-item">24/7 support</div>
  <div class="feature-item">30-day returns</div>
</div>

<ul class="features">
  <li>Free shipping</li>
  <li>24/7 support</li>
  <li>30-day returns</li>
</ul>

<table>
  <tr>
    <td><strong>Product</strong></td>
    <td><strong>Price</strong></td>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>$9.99</td>
    </tr>
  </tbody>
</table>

How to Test

1. Use the WAVE toolbar or axe DevTools to identify structural and semantic issues such as missing headings, empty labels, and improper table markup.
2. Navigate the page using a screen reader's heading navigation (H key in NVDA/JAWS) to verify all visual headings are announced as headings with the correct level.
3. Check that all form controls have programmatically associated labels using the browser's accessibility tree inspector in DevTools.
4. Inspect data tables to confirm th elements with scope attributes are used for row and column headers.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Accessible Forms Guide
• Five Minute Accessibility Audit

Related WCAG Criteria

• WCAG 1.1.1
• WCAG 2.4.6
• WCAG 3.3.2
• WCAG 4.1.2