Level AWCAG 2.2

1.3.1 Info and Relationships

Information, structure, and relationships conveyed visually can be programmatically determined or are available in text.

Why it matters

Screen readers
Headings and landmarks enable fast navigation within a page. Without structure, users have to read line by line.
Cognitive impairment
Clear structure aids comprehension. Priority and relationships between pieces of information become visible.
SEO
Search engines also rely on semantic structure. Proper headings help SEO.
Reader mode
Safari and Chrome's reader modes rely on semantic structure to extract the main content.

Live demo

Semantic HTML vs a wall of divs

Browser view (looks the same)
My Website
Article title
The visual appearance may match, but the structure is different.
Read more
© 2026
No structure
<div class="header">
  <div>My Website</div>
</div>
<div class="content">
  <div class="title">Article title</div>
  <div>Body text...</div>
  <div class="btn">Read more</div>
</div>
<div class="footer">© 2026</div>
Screen readers jump around a page using <header> <main> . <div> Using only div elements hides that structure.

Screen reader experience

Screen reader experience

Use the arrow buttons to move between elements and hear how they are announced.

<header>Banner landmark
<h1>Heading level 1
<nav>Navigation
<main>Main landmark
<img>Image: concept diagram
<button>Button: Learn more
<footer>Footer
"Entering header region"
1/7

Understand through a persona

Sato (35) — Totally blind

Relies heavily on heading navigation. With proper structure, he can jump straight to the section he wants. In div-soup pages he has to read from start to finish — 10 minutes versus 1 minute.

Checklist

References