• Success Criterion 1.3.1
  • Conformance level A

1.3.1 · Info and Relationships

Lesson overview · Info and Relationships

In plain language

Structure you can SEE (headings, lists, tables, labels, groups, required marks) must also exist in the code so screen readers perceive the same structure.

Who it affects

Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.

How to check

Use a screen reader or an inspector (headings map, landmarks, table/list markup): everything that looks like a heading/list/table/label must be announced as one — and nothing that isn't should be. Worked example — A customer-support live-chat widget: click an accordion/disclosure trigger and check aria-expanded in DevTools before and after: if the attribute doesn't exist or doesn't flip true/false, it fails.

Common misconception

Making text look like a heading (bold, bigger font) is not the same as coding it as one. Screen readers read the underlying tags, not the visual styling. Real example: on a ride-hailing app's trip booking screen, text is made to LOOK like a heading or emphasized (big, bold, indented) using styling only, so screen readers treat it as ordinary text and users miss the structure.

Learn more

Scenarios in this lesson