Landmarks, Headings, and Skip Paths

Working case

A case-review app has global navigation, a case-specific menu, and the report body. Both navigation regions need distinct labels. A keyboard user arriving at the page can activate Skip to report and land at the main region without crossing the same controls every time. Opening case 47 from a search result changes the route and displays an Inspection report heading. The app sets the document title and moves focus or announces the new main heading according to its route contract, while preserving expected browser back behavior.

Implementation boundary

function routeArrivalTarget(routeState) {
  if (routeState === "ready") return "report-heading";
  if (routeState === "error") return "route-error-heading";
  return "loading-status";
}
console.log(routeArrivalTarget("error"));
// Output: route-error-heading

Use semantic page regions for header, navigation, main content, and footer. Give repeated landmarks distinct accessible names and keep one clear primary main region for the route. Make the skip control visible when focused and ensure its target can receive focus when needed. Write headings for information structure, then style them separately from rank. During a client route change, avoid leaving focus on a removed element; move it to a meaningful route heading or status target after content is ready. An in-page filter change should use a different announcement pattern from a full route transition.

Cost and boundaries

Semantic structure adds negligible runtime work, but route focus effects can trigger extra rendering or scrolling if fired repeatedly. Limit the focus move to completed navigations, not each data refresh. Too many landmarks create another long list to scan, so group regions by real purpose. A skip link requires ongoing maintenance when layouts change; its target must still exist in loading and error states. Test with a keyboard and a screen-reader landmark or heading list, not only with a DOM inspector. Measure whether a user can reach the report efficiently from every route state.

Failure trace

A design system renders every visually large label as an h2, including sidebar counts and button labels. Heading navigation becomes a list of noise while the actual report sections are missing. Separate visual typography from semantic headings. Another SPA changes the case title but leaves focus on the search result that has just unmounted; the reader has no clear arrival cue. Test direct load, internal navigation, back, error, and delayed data. Ensure Skip to report is still usable before and after the route transition.

Verification

• Repeated landmarks have distinct names and the main region is clear.
• The skip path reaches meaningful content from the top of the page.
• Route changes leave focus on a present, informative target.

Practice drill

Map landmarks and heading levels for a search page, case detail, and note editor. Verify the two navigation regions have distinct names, the skip control lands in main content, and heading order conveys the report outline. Start at a search result with keyboard only, open case 47, go back, and open case 62 while observing focus and title. Simulate a delayed report and a route error, then check that focus is not sent to a missing heading.

Decision note

Keep the page map meaningful in every route state and move focus intentionally when the route changes.

Common Mistakes

• Choosing heading levels for visual size alone.
• Leaving focus on a removed route link.
• Hiding a skip control even when it receives keyboard focus.

Connected lessons

Accessible Content and Media; Image Alternatives by Purpose; Chart and Diagram Text Equivalents; Captions, Transcripts, and Media Controls; Route Scroll and Focus Restoration; Accessible Names and Native Controls; Inclusive Interface Engineering.

Apply and check

Build Project: accessible inspection report and review Web Development: accessible content and privacy decisions quiz.