- 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.
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.
Learn more
Scenarios in this lesson
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells
- Tabular Data Placed Inside a Preformatted Text Block
- Table Cells Linked to the Wrong Header Cells
- Table Header Cells Never Marked Up as Real Headers
- Presentation Role Wrongly Applied to a Real Table or List
- Visible Label Text With No Matching Accessible Name
- Duplicate Element IDs Breaking Form Label Connections
- Bulleted List Built From Divs Instead of Real List Markup
- Heading Levels Skipped or Chosen Only for Font Size
- Form Fields With No Programmatic Label of Any Kind
- Form Label Not Correctly Linked to Its Input Field
- Radio or Checkbox Group With No Grouping Question Announced
- Required Field Marked Only Visually, Not in the Code
- Form Error Message Not Linked to the Field It Describes
- Responsive Table Layout That Strips Out Header Relationships
- Multi-Level Data Table With No Header Associations
- Page Content Missing Landmark Regions Entirely
- Mismatched Parent and Child Roles in a Custom ARIA Widget
- Price Strikethrough Shown Only Visually, Not in the Markup
- Expandable Section With No Expanded/Collapsed State in Code
- Current Page or Step Marked Only by Visual Styling
- CSS Display Property Accidentally Stripping an Element’s Role
- Custom Toggle Control Built With No Role or State at All
- ARIA Reference Attribute Pointing to a Nonexistent Element
- Form Label That Disappears the Moment You Start Typing
- Meaningful Content Added Only Through CSS Generated Text
- Card Layout Grouping With No Programmatic Structure Behind It
- PDF Document Published With No Accessibility Tags at All
- Quotation Shown Only Through Styling, Not Real Markup
- Term-Definition Pairs With No Real Definition List Markup
- Star Rating or Progress Step Shown Only as a Visual Cue
- Empty Heading Tags Cluttering the Page’s Structure
- Table Header Cells Left Completely Blank
- Data Grid Built From Divs Instead of Real Table Markup
- Table Semantics Wrongly Applied to Non-Tabular Layout Content
- Plain Text or Buttons Wrongly Wrapped in Heading Tags
- Single Item Wrongly Wrapped in List Markup
- List Items Placed Outside Their Parent List Element
- Multiple Data Tables With No Captions to Tell Them Apart
- Field Instructions Never Linked to the Field They Explain
- List Item Count That Doesn’t Match What’s Actually Announced
- Out-of-Stock Status Shown Only Visually, Never Announced
- Tooltip Help Text Never Linked to Its Trigger Control
- Same Page Content Accidentally Announced More Than Once