Success Criteria

WCAG 1.3.1 Info and Relationships

Success Criterion 1.3.1 requires that information, structure, and relationships conveyed through visual presentation can also be programmatically determined, or are available as text. It's a Level A criterion under Guideline 1.3 (Adaptable) — and in practice, it's the single broadest criterion in all of WCAG, covering a huge share of common HTML structural mistakes.

What "programmatically determined" means

A sighted user perceives structure visually: bold text implies emphasis, indentation implies a list, proximity implies a form label belongs to a field, a bordered grid of cells implies a data table. 1.3.1 requires that this same structure be encoded in the markup itself — not just implied by styling — so assistive technology can perceive it too.

The failure patterns this criterion covers

1.3.1 is unusually broad because "structure and relationships" spans several distinct patterns:

• Headings that don't reflect actual document structure, or skip levels — see Improper Heading Order
• Data tables without real header cells associating each data cell with what it means — see Missing Table Headers
• Landmark regions missing or duplicated, leaving no structural map of the page — see Landmark and Region Issues
• Presentational HTML (<center>, <font>, the align attribute) that encodes visual styling directly into structural markup instead of separating the two — see Obsolete Presentational Markup
• Lists that look like lists visually (dashes, numbers typed as plain text) but aren't marked up as <ul>/<ol>/<li>
• Form labels associated only by visual proximity, with no programmatic <label for> connection

Why one criterion covers so much ground

WCAG could have split "headings," "tables," "landmarks," and "lists" into separate criteria — instead, they're unified under one principle: don't let styling alone carry meaning that markup should carry. If you remember one mental model for 1.3.1, it's this: whenever you're tempted to communicate structure through CSS alone (bigger text for emphasis, indentation for hierarchy, borders for grouping), ask whether there's a semantic HTML element that should be doing that job instead.

Official references

• Deque University: list
• Deque University: listitem
• W3C Technique H62
• W3C Technique H91

Common questions

What is WCAG 1.3.1?

A Level A criterion requiring visual structure (headings, lists, table headers, labeled fields) to be encoded semantically in HTML or ARIA, not just styled to look that way.

What are common 1.3.1 violations?

Using bold text instead of a real heading, layout tables without proper headers, or a visual label not programmatically tied to its input.

How is 1.3.1 tested?

Partly automatable — tools catch missing table headers or unassociated labels — but confirming visual structure is fully represented in markup often needs human review.