What Are HTML Landmarks — and How I Fixed Mine

I built my personal website ten years ago, before I knew anything about accessibility — now I'm rebuilding it one accessible piece at a time. First up: landmarks. And this one had a plot twist — my automated audit tool and an actual screen reader completely disagreed about what was on the page. First I explain what HTML landmarks are and why they matter, then I fix them on my real (Next.js) site: adding a main landmark, sorting out the header/banner situation, and testing the whole thing with VoiceOver. Turns out the "multiple banner landmarks" my tool flagged weren't banners at all. What we cover: What HTML landmarks are — and the analogy that finally makes them click How screen reader users actually navigate a page with them The native elements: header, nav, main, aside, footer, section, form, search Native HTML vs ARIA roles — and why native wins The gotchas that quietly break landmarks (nesting, naming duplicates, and more) The WCAG behind it: 1.3.1 Info and Relationships + 2.4.1 Bypass Blocks Fixing it live: adding the main element in a Next.js layout, and why the flagged "banners" were never banners Automated tool vs. screen reader — why you have to test with both Chapters: 0:00 Intro — rebuilding my old site [0:42] What is a landmark? [0:48] Why they matter (screen reader navigation) [2:55] Landmark gotchas + the WCAG behind it [4:40] My audit findings [5:01] Before: what VoiceOver actually hears [5:56] Fixing it: main landmark + the banner twist [7:46] After, and the big takeaway