Glossary · Beginner

Accessibility landmark

A landmark is a named page region that helps assistive-technology users navigate between major responsibilities such as navigation and main content.

Published
Last checked

Definition

A landmark identifies a major page region through semantic HTML or an appropriate role. Common landmarks include banner, navigation, main, complementary, content information, search, and form.

Native sources

Elements such as body-level header, nav, main, aside, and body-level footer can create landmarks in context. The mapping depends on where the element appears, so a header inside an article is not another site banner.

Labels

Repeated landmarks of the same type need concise labels that distinguish their purpose, such as “Primary” and “Related lessons.” Do not repeat the role word in the label because assistive technology already announces it.

Screen-reader users can list or jump between landmarks. A keyboard skip link provides a related route past repeated navigation. Excess landmarks create noise, so not every visual box should become a named region.

Common failures

  • More than one visible main landmark.
  • Several unlabeled navigation regions.
  • Using region roles for generic styling containers.
  • Visual and DOM order disagreeing after CSS reordering.

Review question

Does the landmark list provide a short, accurate map of the page's major responsibilities without duplicate or meaningless stops?

Practical testing

Use a screen reader's landmark list and the page's keyboard skip link. Compare their destinations with visible headings and source order. Repeat after responsive layout changes because a visually moved region may still remain in its original reading position.