Info and Relationships (1.3.1)

Content structure conveyed visually through layout, formatting, or styling must also be available programmatically so assistive technologies can interpret and present it correctly.

WCAG Reference

Applies to: WCAG 2.0, WCAG 2.1, WCAG 2.2 Introduced in: WCAG 2.0 | Level: A | Read the official specification →

What this rule checks

The scanner verifies that headings, lists, tables, form groups, and landmark regions use correct semantic HTML rather than relying on visual appearance alone.

Why it matters

Screen-reader users navigate by structure: headings, lists, and landmarks act as signposts. When structure is only visual (e.g., bold text instead of a heading element), assistive technology cannot expose it, and users lose the ability to skim, jump, and orient themselves.

Common failure patterns

text styled to look like a heading but using <div> or <span> instead of <h1>–<h6>
data presented in a grid layout but not using <table>, <th>, and <td>
form fields grouped visually but missing <fieldset> and <legend>
navigation and content areas without landmark roles (<nav>, <main>, <aside>)

Remediation guidance

use native semantic elements for headings, lists, tables, and form groups
add ARIA landmarks only when native elements are not available
verify heading levels follow a logical nesting order without skipping levels
test with a screen reader to confirm the announced structure matches the visual layout