0Pricing
Web Accessibility Academy · Lesson

Auditing a Page Outline by Ear

Spot broken structure the way a screen reader exposes it.

Auditing a Page Outline by Ear is a free Web Accessibility Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Listen to Your Structure

An outline audit means checking headings the way a screen reader exposes them, ignoring visual styling entirely. 👂

Strip Away the Styles

Forget colors and fonts. A clean outline should read as a sensible nested list of section titles, even with no CSS at all.

Read Only the Headings

Pull out just your headings in order. If that list alone summarizes the page, your structure is doing its job well.

Check the One h1

First, confirm there is exactly one h1 that names the page. A missing or duplicate h1 is the most common outline flaw.

Hunt for Skips

Walk the levels and watch for a skip, like h2 jumping to h4. Each downward jump should move by exactly one level.

Spot the Fakes

Look for bold text that should be a heading but is a styled div. These hidden gaps leave screen reader users with no signpost.

Use the Inspector

Browser dev tools and extensions can show an outline view. They list your real headings and flag skipped or missing levels.

Try a Real Screen Reader

Open the headings list in NVDA or VoiceOver. Hearing your own page read aloud reveals confusion no diagram will. 🔊

Watch for Empty Headings

An empty heading with only an icon reads as nothing and clutters the list. Give every heading real, meaningful text.

Judge the Wording

Vague headings like More fail the ear test. Out of context, each one should still tell a user what that section covers.

Make It a Habit

Run a quick outline check on every page before shipping. A two-minute pass catches structure bugs that frustrate users daily.

Quick Check

While auditing, which finding signals a broken heading outline?

Recap

You learned to audit by ear: confirm one h1, catch skipped levels, expose fake headings, and verify wording with a real screen reader. ✅

Frequently asked questions

Is the “Auditing a Page Outline by Ear” lesson free?

Yes — the full text of “Auditing a Page Outline by Ear” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.

What will I learn in “Auditing a Page Outline by Ear”?

Spot broken structure the way a screen reader exposes it. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Web Accessibility Academy?

No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Auditing a Page Outline by Ear” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Web Accessibility Academy lesson?

Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. One h1 Per Page: Naming the Main Topic
  2. Nesting Levels Without Skipping
  3. Headings Are Navigation, Not Just Big Text
  4. Auditing a Page Outline by Ear
← Back to Web Accessibility Academy