1.3.1 Info and Relationships

In Plain Language

Information, structure, and relationships conveyed through visual presentation must also be available programmatically. This means using semantic HTML elements so that assistive technologies can understand the structure of your content: headings should use <h1>-<h6> tags, form inputs need <label> elements, and data tables require proper headers.

When you use visual styling alone to convey structure (like making text bold instead of using a heading tag), screen readers cannot detect that structure.

Why It Matters

Screen reader users navigate by headings, landmarks, and form labels -- if these are not coded properly, users cannot find or understand content.
Heading level skips confuse users who rely on heading hierarchy to understand page organization.
Form inputs without programmatic labels are unusable for screen reader users who cannot see placeholder text or visual proximity cues.
This is the third most common failure, found on 51% of home pages tested.

Examples

Do: Proper heading hierarchy

<h1>Our Programs</h1>
  <h2>Adult Education</h2>
    <h3>Literacy Classes</h3>
    <p>Weekly reading and writing workshops.</p>

Don't: Heading level skips

Do: Form input with label

Don't: Input without label

How to Fix It

Use semantic HTML elements for headings (<h1>-<h6>), lists (<ul>, <ol>), and landmarks (<nav>, <main>, <aside>) instead of styled <div> or <span> elements.
Maintain heading hierarchy. Do not skip heading levels -- go from <h1> to <h2> to <h3>, not from <h1> directly to <h4>.
Associate form labels with their inputs using the for attribute matching the input's id. Every form control must have a programmatic label.
Use ARIA roles sparingly. Prefer native HTML elements over ARIA attributes. Only use ARIA when no native element provides the needed semantics.
Table headers: Use <th> elements with scope="col" or scope="row" for data tables so screen readers can associate cells with their headers.