How screen readers “see” your site

Many people listen to the web. Screen readers speak what they find in your HTML — headings, paragraphs, buttons, links, and section roles. If structure is missing, users hear: “button… button… unlabeled link…” and get lost.

Why it matters

Semantics is the difference between noise and a clear route:
“Heading level 1: About → Navigation → Main → Contact link…”

What a screen reader “sees”

Readers follow the document structure, not colors or font sizes:

• H1: “About us”
• Paragraph: “We build websites without pain”
• Link: “Contact”
• Button: “Send request”

So visual intent must be explicit in HTML.

Markup essentials

1) Ordered headings

• One H1 per page, then H2/H3 as needed.
• Don’t fake hierarchy with CSS alone — use proper tags.

<main>
  <h1>About us</h1>
  <h2>Team</h2>
  <h3>Design</h3>
</main>
2) Landmarks
Use standard regions so readers expose quick navigation:

html
Copy code
<header>…</header>
<nav aria-label="Primary navigation">…</nav>
<main id="content">…</main>
<aside aria-label="Sidebar">…</aside>
<footer>…</footer>
3) Alt text
Meaningful images: short, purpose-driven alt.

Decorative images: empty alt="" (so they’re skipped).

html
Copy code
<img src="/images/flow.png" alt="Booking flow: request → confirmation → payment">
<img src="/images/ornament.svg" alt="">
4) Link/button names
Text should state what happens:

html
Copy code
<a href="/contact">Contact us</a>
<button type="submit">Send request</button>
Quick ways to check
🧩 Headings: single H1; H2/H3 in order.

📦 Landmarks: have <main>, <nav>, <header>, <footer>.

🖼️ Alt: meaningful images have alt; decor uses alt="".

⌨️ Keyboard: Tab order is logical; focus visible.

🗣️ Reader test: NVDA (Windows), VoiceOver (macOS/iPhone). Walk the page by arrows/Tab.

👓 Accessibility Tree: Chrome DevTools → Accessibility tab.

60-second checklist
 Exactly one H1

 Headings reflect meaning, not CSS size

 Navigation in <nav>, content in <main>

 All important images have alt

 Keyboard focus is visible and logical

 Tried with NVDA or VoiceOver

Bottom line
Accessibility isn’t extra — it’s basic care. A site that’s readable by ear works better for people, search engines, and future you. 💙