Skip to main content
Perceivable WCAG 1.3.1

1.3.1 Info and Relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Level A Critical WCAG 2.0 (new) WCAG 2.1 WCAG 2.2
td-headers-attr th-has-data-cells scope-attr-valid table-fake-caption table-duplicate-name p-as-heading list listitem definition-list dlitem empty-heading heading-order label input-button-name select-name aria-required-children aria-required-parent landmark-banner-is-top-level landmark-contentinfo-is-top-level landmark-main-is-top-level landmark-no-duplicate-banner landmark-no-duplicate-contentinfo landmark-one-main region form-field-multiple-labels

What this rule means

Success Criterion 1.3.1 requires that all information conveyed visually through formatting, structure, or relationships is also available to assistive technologies. When sighted users perceive a heading because it is larger and bolder, screen reader users must receive the same structural information through proper HTML semantics. This applies to headings, lists, tables, form labels, landmarks, and any grouping conveyed through visual presentation.

The fundamental principle is straightforward: if structure is visible, it must be coded. A data table with row and column headers must use <th> elements so assistive technologies can announce cell relationships. A navigation region must use a <nav> landmark so users can jump directly to it. A required form field shown with a red asterisk must have its required state exposed programmatically.

Why it matters

This criterion has the broadest impact of almost any WCAG requirement. Screen reader users depend entirely on programmatic structure to understand page layout. Without proper semantics, a complex data table becomes an incomprehensible stream of text, a form becomes a guessing game, and page navigation becomes impossible. Voice control users also rely on labeled elements to issue commands like "click submit" or "go to navigation."

Beyond assistive technology, proper semantics improve SEO, enable better browser default styling, and make codebases more maintainable. Semantic HTML is the foundation of accessible web development.

Related axe-core rules

  • td-headers-attr — Ensures each cell in a data table with a headers attribute refers to valid <th> elements.
  • th-has-data-cells — Ensures that <th> elements are actually associated with data cells.
  • scope-attr-valid — Ensures the scope attribute on <th> elements uses only valid values (row, col, rowgroup, colgroup).
  • table-fake-caption — Warns when a <caption> is faked using a table cell spanning all columns.
  • p-as-heading — Detects paragraphs styled to look like headings instead of using <h1>–<h6> elements.
  • list / listitem — Ensures <li> elements are contained within <ul> or <ol>, and vice versa.
  • heading-order — Ensures heading levels do not skip (e.g., <h2> followed by <h4>).
  • label — Ensures every form input has a programmatically associated label.
  • landmark-one-main — Ensures the page has exactly one <main> landmark.
  • region — Ensures all page content is contained within a landmark region.

How to test

  1. Use a browser extension like axe DevTools or WAVE to scan for structural violations.
  2. Navigate the page with a screen reader (VoiceOver, NVDA, JAWS) and verify that headings, lists, tables, and form fields are announced with their correct roles.
  3. Disable CSS and check that the page still conveys the same information hierarchy.
  4. Inspect the DOM to confirm that visual groupings correspond to semantic elements (<nav>, <aside>, <section>, <fieldset>, etc.).
  5. Verify every data table has appropriate <th> elements with scope attributes, and that complex tables use headers/id associations.

How to fix

Use proper heading elements to create a logical document outline:

<h1>Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<p>Content within the subsection.</p>
<h2>Another Section</h2>

Mark up data tables with header cells and scope:

<table>
  <caption>Quarterly Sales by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$1.2M</td>
      <td>$1.5M</td>
    </tr>
  </tbody>
</table>

Associate form labels with their inputs:

<label for="email">Email address</label>
<input type="email" id="email" name="email" required
       aria-describedby="email-hint">
<p id="email-hint">We will never share your email.</p>

Use landmark regions to structure the page:

<header role="banner">
  <nav aria-label="Main navigation">...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer role="contentinfo">...</footer>

Common mistakes

  • Using <div> or <span> elements styled as headings instead of <h1>–<h6>.
  • Building data tables from nested <div> elements with CSS Grid or Flexbox, destroying table semantics entirely.
  • Omitting <label> elements for form inputs and relying only on placeholder text.
  • Using multiple <main> landmarks on a single page, or nesting banners inside other landmarks.
  • Skipping heading levels (e.g., jumping from <h1> to <h4>) which breaks the document outline.
  • Using <br> tags to create visual lists instead of <ul>/<ol> with <li> elements.

Resources