A screen reader user reports that a page is hard to navigate: its only <h1> is the site logo and every section title is a styled <div>. How do such users normally move through a page by heading, and what specifically breaks here?

## How heading navigation actually works A screen reader in browse mode (NVDA and JAWS on Windows) or with the rotor (VoiceOver on macOS and iOS) treats the page as a document you can index into. For headings that means three interaction patterns: - **Next/previous heading.** Pressing `H` moves to the next heading, `Shift+H` to the previous one. This is the workhorse: users tab-tab-tab through a page's structure the way a sighted reader's eye jumps down the subheads. - **Next heading of a specific rank.** The number keys `1`–`6` move to the next `h1`…`h6`. "Give me the next top-level section" is `2` on a well-structured page. - **A list of all headings.** NVDA's Elements List (`Insert+F7`), JAWS's headings list (`Insert+F6`), and the VoiceOver rotor (`VO+U`, then the Headings menu) all render the page's headings as a flat list with their levels. This is the closest thing to seeing the page at a glance, and surveys of screen reader users consistently report it as one of the first things they reach for on an unfamiliar page. Everything in those three mechanisms is fed by one thing: elements exposed to the accessibility tree with a heading role and a level. Native `h1`–`h6` do that automatically. ## Failure one: the logo as h1 When the `h1` is the site name, every page in the site starts its heading list with the same words. The user's first question on landing — "what is this page?" — goes unanswered by the mechanism designed to answer it. Worse, the page's actual subject, if it is marked up at all, appears as an `h2` sitting under a site-wide banner, so the outline claims the page's topic is a subsection of the brand. The correction is small. The site name belongs in the banner as a link containing the logo image; it does not need to be a heading at all. The `h1` becomes the page's own subject — usually close in wording to the document `<title>`, since both answer "what page am I on". ```html <!-- before: brand claims the top of every page's outline --> <h1><img src="/logo.svg" alt="Northwind"></h1> <h2>Order history</h2> <!-- after: the page names itself --> <a href="/"><img src="/logo.svg" alt="Northwind"></a> <h1>Order history</h1> ``` ## Failure two: section titles that are not headings A `<div class="section-title">` styled at 24px and bold looks exactly like a heading and is exactly not one. It has no heading role, so: - `H` skips it — the user presses `H` and lands three screens further down, or hears "no more headings". - It is absent from the headings list, so the page's index is far shorter than its visible structure. - The rank information a user relies on to understand nesting simply does not exist for that content. The practical effect is that the page degrades from skimmable to linear. A sighted user reads five subheads in two seconds and jumps to the relevant one; the screen reader user reads, or arrows through, the entire body. On a long page that is the difference between a ten-second task and a two-minute one. ## How to diagnose this on a real page The fastest check that requires no assistive technology: extract the heading elements in order and read them as a list. In a browser console you can dump them, or use any outline-viewing extension — the point is to look at *only* the headings and ask whether that list is a usable table of contents for the page. Two questions decide it: 1. **Does the first entry name this page?** If it names the site, or names a navigation region, the `h1` is wrong. 2. **Is every visually-obvious section title in the list, at a level that matches its nesting?** Anything you can see on screen but cannot find in the list is a `div` pretending. Automated tooling helps with part of this — axe-core's `heading-order` rule catches skipped levels — but no automated rule can tell you that a heading's *text* is unhelpful or that a styled `div` should have been a heading. That judgment is the part interviewers are testing. ## The senior framing The deeper point is that heading markup is not decoration or an SEO chore: it is the page's navigation API for a whole class of users. When you delete a heading element because the design "doesn't have a title there", or wrap a title in a `div` because a heading tag brought unwanted default styles, you are removing a navigation affordance, not a style. Both of those are solvable in CSS without touching the element; neither is a reason to change the markup.