SC 1.3.1 Level A WCAG 2.0

Info and Relationships

Information and relationships conveyed visually — headings, lists, tables, form labels, groupings — must also be expressed in the markup, so assistive technology can render them. Visual styling alone is not enough.

What it asks

Anything you can see at a glance — that this big bold text is a heading, that these rows form a data table, that this group of fields is “billing address,” that this asterisk means required — must also be present in the underlying code. Screen readers, voice-control software, and reflow engines only see the markup. If a relationship is purely visual (a bigger font, a thicker border, an indent), assistive tech sees nothing.

How to meet it

Use real heading elements (<h1> through <h6>) in a logical nested order — never a styled <div> to fake a heading.
Mark up lists with <ul>, <ol>, and <li> — not paragraphs separated by line breaks or bullet characters.
Use <table> with <th scope="col"> / <th scope="row"> for data tables, with <caption> describing the table’s purpose.
Every form control needs a programmatic label: <label for="...">, aria-labelledby, or aria-label. Placeholder text is not a label.
Group related form fields in <fieldset> with <legend>, or use role="group" with aria-labelledby for custom widgets.
For figures and captions, use <figure> and <figcaption>. For definition pairs, use <dl> / <dt> / <dd>.
Indicate required fields both visually (asterisk) and programmatically (aria-required="true" or the required attribute).

Common failures

<div class="heading-1"> instead of <h1> — looks right, announces as nothing.
Layout tables used for visual columns, or data tables built from <div> grids with no <th> cells.
Form fields with placeholder-only labels — the label disappears on focus and screen readers may not announce it.
Bullet points faked with <p>• Item</p> instead of real list markup.
Required-field asterisks shown in red CSS with no aria-required or required attribute.
Visually grouped radio buttons with no <fieldset> / <legend>, leaving screen-reader users with floating options that lack the question.
Tables of data where the header row is styled bold but uses <td>, not <th>.

Why it matters

1.3.1 is the most-cited SC in WCAG audits after 1.1.1 and 1.4.3. Every CMS-generated page, every marketing landing, every custom form widget tends to fail at least one part of it. The fix is almost always semantic HTML, not ARIA — when you reach for role="heading" to repair a <div> that should have been <h2>, you’ve already lost.