1.3.1 Info and Relationships

What WCAG 1.3.1 Requires

The relationships and structure conveyed visually, such as headings, lists, table headers and form labels, must also exist in the underlying markup, not just in visual styling.

Can AccessBell Test This Automatically?

Yes. AccessBell's scanner runs axe-core, which includes 9 rules that catch code-level failures of this criterion:

• aria-hidden-body — Ensure aria-hidden="true" is not present on the document body. (details (opens in a new tab))
• aria-required-children — Ensure elements with an ARIA role that require child roles contain them (details (opens in a new tab))
• aria-required-parent — Ensure elements with an ARIA role that require parent roles are contained by them (details (opens in a new tab))
• definition-list — Ensure <dl> elements are structured correctly (details (opens in a new tab))
• dlitem — Ensure <dt> and <dd> elements are contained by a <dl> (details (opens in a new tab))
• list — Ensure that lists are structured correctly (details (opens in a new tab))
• listitem — Ensure <li> elements are used semantically (details (opens in a new tab))
• td-headers-attr — Ensure that each cell in a table that uses the headers attribute refers only to other <th> elements in that table (details (opens in a new tab))
• th-has-data-cells — Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe (details (opens in a new tab))

This criterion is included in: WCAG 2.2 AA Checker, WCAG 2.1 AA Checker, ADA Compliance Checker, Section 508 Checker, EN 301 549 Checker.

How to Test It by Hand

View the page structure with a screen reader or the browser's accessibility tree and confirm headings, lists and table headers are marked up as such, not just styled to look like them.

Common Failures

• Headings are bold, larger text with no <h1>-<h6> tag behind them.
• A data table uses plain <td> cells with no <th> header cells.
• A visual list is built from styled <div> elements instead of <ul>/<ol>.

Example Fix

1. Only put li elements directly inside ul and ol. Wrap other elements inside the li, not between list items.

<!-- Correct -->
<ul>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Related Criteria in Adaptable

• 1.3.2 Meaningful SequenceLevel A · WCAG 2.0
• 1.3.3 Sensory CharacteristicsLevel A · WCAG 2.0
• 1.3.4 OrientationLevel AA · WCAG 2.1
• 1.3.5 Identify Input PurposeLevel AA · WCAG 2.1
• 1.3.6 Identify PurposeLevel AAA · WCAG 2.1

WCAG 1.3.1 Questions