1.3.1 Info and Relationships (Level A) — WCAG 2.1
WCAG 2.1 Success Criterion 1.3.1 Info and Relationships (Level A): what it requires, a common e-commerce accessibility failure, and how to fix it.
This is educational technical reference content, not legal advice. It explains what WCAG 2.1 requires and how to meet it — not whether a specific site carries legal risk. Compliance with WCAG, the ADA, or any other accessibility law or standard is a legal determination; consult qualified counsel for legal risk assessment.
WCAG 2.1 guidelines hub → Perceivable → 1.3.1 Info and Relationships
1.3.1 Info and Relationships (Level A)
What it requires: Visual structure — headings, lists, tables, form labels, required-field indicators — has to be programmatically encoded, not just styled to look that way. A screen reader has to be able to tell that bold larger text is a heading, not just see that it looks like one.
Common failure: A checkout page’s “Shipping,” “Payment,” and “Review” sections are styled with bold, larger text via CSS <span> or <div> elements instead of real <h2> tags. A screen-reader user navigating by headings finds nothing, because there are no real headings on the page.
Fix it: Use real semantic HTML — <h1>–<h6> for headings in a logical order, <table> with <th> for tabular data, <ul>/<ol> for lists, <label> elements programmatically associated with form fields. Visual styling should follow from semantic markup, not substitute for it.
In 1.3 Adaptable: 1.3.2 Meaningful Sequence →
↑ Back to Perceivable overview
This is educational technical reference content, not legal advice. It explains what WCAG 2.1 requires and how to meet it — not whether a specific site carries legal risk. Compliance with WCAG, the ADA, or any other accessibility law or standard is a legal determination; consult qualified counsel for legal risk assessment.
This page was drafted with AI assistance and reviewed by a person for accuracy before publication.