1.3 Adaptable · SC 1.3.1

A2 min read

Info and Relationships

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

In plain language

Headings, lists, tables, and form labels must be marked up properly in code — not just made to look right visually — so assistive technology can understand the page's structure.

Why it matters

Screen reader users don't see visual structure like bold text or indentation; they rely on the underlying code to know what's a heading, what's a list, or which label belongs to which field. If structure only exists visually, that information disappears for them.

In practice

Fails this criterion

A form marks required fields only with red text, with no indication in the code. A screen reader user has no way to know which fields are required.

Meets this criterion

The required fields have red text and an asterisk, and the label is properly linked to its input in code, so the screen reader announces "required."

Test it yourself

Read through the page's content from top to bottom, ignoring how it looks visually. Do the headings, lists, and paragraphs still make sense in the order they appear? Is it still clear which label belongs to which field, or that a field is required, without relying on color or layout?

Read SC 1.3.1 on the official WCAG 2.2 specification ↗