SC 1.3.1: Info and Relationships
Normative Text
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Understanding 1.3.1
Visual structure (headings, lists, tables, form groupings) must be conveyed in the code, not just through styling.
How to Comply
Use semantic HTML: <h1>–<h6> for headings, <ul>/<ol> for lists, <table> with <th> and scope for data tables, <fieldset>/<legend> for grouped form controls. If CSS makes a <div> look like a heading, a screen reader won't know it's a heading. If a table has no <th> elements, a screen reader can't tell users which column a cell belongs to. ARIA can supplement but not replace semantic HTML.
Common Failures
- ✕Styled <div> or <p> elements used as headings with no heading role
- ✕Data tables with no header cells
- ✕Form fields grouped visually but not in a <fieldset>
- ✕Required fields indicated only with a red asterisk color, not text
- ✕Lists styled with CSS but using <div> elements instead of <ul>/<li>
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.1.3.1.
- ★Backward compatible with WCAG 2.1: Yes.
Legal Enforcement
Testing with Browser DevTools / axe-core
- 1.
Open the browser DevTools and inspect the HTML structure of the page.
- 2.
Verify all data tables have <th> elements with appropriate scope attributes (scope='col' or scope='row').
- 3.
Verify all form inputs have associated <label> elements (using for/id, aria-label, or aria-labelledby).
- 4.
Verify lists use <ul>/<ol>/<dl> rather than styled <div> elements.
- 5.
Verify headings use native <h1>-<h6> elements, not styled <p> or <div> elements.
- 6.
Run axe-core in DevTools: no 'info-and-relationships' or 'label' violations.
- 7.
With a screen reader, navigate by forms, tables, and lists — verify correct structural announcements.
- 8.
Pass: All information conveyed visually through structure is also conveyed programmatically.
Found a bug?
Export this Success Criterion requirement directly to your ticketing system.