Skip to main content
WCAG Patterns

WCAG 1.3.1 · Level A · WCAG 2.0

Info and Relationships

Structure must be conveyed in code, not just visual styling. Use real headings, lists, tables, fieldsets, and ARIA roles so assistive tech can parse relationships.

Principle
Perceivable
Guideline
Adaptable
Level
A
Added in
WCAG 2.0

What it really means

Structure conveyed visually must also be conveyed in code. If sighted users see a heading, assistive tech should encounter a <h2>, not a <div className="text-2xl font-bold">. If users see a grouped set of radio buttons, the grouping should live in a <fieldset> with a <legend> — not just visual proximity.

This is the criterion that bundles semantic HTML into WCAG language. Headings, lists, tables, form labels, fieldsets, landmark regions, and ARIA roles are all programmatic relationships.

Who it helps

  • Screen-reader users who navigate by heading, by landmark, by list, or by form control.
  • Switch users who use link-and-heading dialogs to jump around.
  • Voice-control users saying "click the heading" — which only works when the heading is marked as one.
  • Reading-mode extensions that lift main content.

How to test

  1. Turn on Safari or Edge reader mode — if your article is gone, your headings or <main> are missing.
  2. In your screen reader, open the headings list (VoiceOver: ⌃⌥⌘H; NVDA: H). Verify hierarchy is h1 → h2 → h3, not h1 → h4.
  3. Run axe DevTools; heading-order, list, listitem, definition-list, table-fake-caption, and all landmark-* rules check this criterion.

A failing pattern

// Visual heading, not programmatic.
<div className="text-2xl font-bold">Pricing</div>
 
// "List" made of paragraphs.
<p>• Unlimited projects</p>
<p>• 24/7 support</p>
 
// Grouped radios, with only visual proximity to connect them.
<p>Plan</p>
<label><input type="radio" name="plan" value="pro" /> Pro</label>
<label><input type="radio" name="plan" value="team" /> Team</label>

A passing pattern

<h2>Pricing</h2>
 
<ul>
  <li>Unlimited projects</li>
  <li>24/7 support</li>
</ul>
 
<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="pro" /> Pro</label>
  <label><input type="radio" name="plan" value="team" /> Team</label>
</fieldset>

Landmark regions carry the same weight as headings for screen-reader navigation:

<body>
  <header>{/* site-wide nav, role=banner */}</header>
  <main>{/* the one and only main content */}</main>
  <aside aria-label="Related articles">{/* role=complementary */}</aside>
  <footer>{/* role=contentinfo */}</footer>
</body>