Landmarks

This lesson explains Landmarks in web accessibility with clear examples, practical use cases, and implementation best practices.

Web Accessibility Landmarks Overview

Accessibility landmarks are semantic HTML elements that define the major regions of a webpage. They help screen readers, keyboard users, and other assistive technologies quickly understand the page layout and navigate directly to important sections without reading every element.

HTML5 landmark elements provide built-in accessibility and improve page organization, usability, SEO, and maintainability. Whenever possible, developers should use native landmark elements instead of generic div containers or custom ARIA roles.

Feature	Benefit
Semantic Structure	Defines meaningful page regions.
Screen Readers	Allows quick navigation between landmarks.
Keyboard Navigation	Improves page navigation efficiency.
SEO	Helps search engines understand page structure.
Maintainability	Makes layouts easier to understand.
Best Practice	Use native landmark elements before ARIA roles.

Accessibility Landmark Example

<header>
  ...
</header>

<nav>
  ...
</nav>

<main>
  <article>
    ...
  </article>
</main>

<aside>
  ...
</aside>

<footer>
  ...
</footer>

This layout uses semantic landmark elements that allow browsers, search engines, and assistive technologies to identify each major region of the webpage automatically.

Common HTML Landmark Elements

HTML5 introduced several semantic elements that act as accessibility landmarks. Each landmark identifies a specific purpose within the page and helps users navigate content more efficiently.

Landmark	Purpose	Accessibility Benefit
header	Page or section introduction	Identifies introductory content.
nav	Navigation menus	Allows users to jump directly to navigation.
main	Primary page content	Helps users skip repetitive content.
aside	Related or secondary information	Separates supporting content.
section	Thematically grouped content	Creates meaningful page organization.
footer	Footer information	Identifies closing page content.

Accessibility Landmark Best Practices

Best Practice	Description
Use One Main Landmark	Each page should contain only one main element.
Use Semantic HTML	Prefer native landmark elements over generic div containers.
Organize Related Content	Use section and article to group related information.
Label Multiple Navigation Areas	Provide accessible labels when using more than one navigation region.
Use Headings Inside Landmarks	Improve navigation and document structure.
Avoid Unnecessary ARIA	Native landmarks already provide accessibility information.

Common Landmark Mistakes

Using only div elements for page layout.
Adding multiple main elements on one page.
Using navigation without meaningful links.
Creating sections without headings.
Adding unnecessary ARIA roles to native landmarks.
Using footer or header only for visual styling.
Ignoring landmark hierarchy.
Not providing labels for multiple navigation regions.

Key Takeaways

Landmarks divide webpages into meaningful regions.
Native HTML5 landmark elements improve accessibility automatically.
Screen readers allow users to navigate directly between landmarks.
Semantic landmarks improve SEO and page organization.
Use only one main landmark per page.
Use semantic HTML before considering ARIA landmark roles.

Pro Tip

A properly structured page using header, nav, main, aside, and footer provides excellent accessibility with little additional effort. Native landmarks are simpler, more reliable, and better supported than custom ARIA implementations.