Skip to content

Landmark & Region Checker

Paste your HTML to visualize landmark structure and check for missing or duplicate ARIA regions. Ensure your page is navigable for screen reader users.

FreeNo SignupNo Server UploadsZero Tracking

We fetch the page client-side. Some sites may block external access — use "Paste HTML" as a fallback.

Enter a URL or paste HTML above to analyze ARIA landmark structure.
Embed code
<iframe src="https://wcagkit.com/embed/landmark-checker" width="100%" height="600" frameborder="0" title="Landmark & Region Checker - wcagkit"></iframe>
<p style="font-size:12px;text-align:center;margin-top:4px;">
  <a href="https://wcagkit.com/tools/landmark-checker" target="_blank" rel="noopener">Powered by wcagkit</a>
</p>
Attribution preview

Powered by wcagkit

How to Use Landmark & Region Checker

  1. 1

    Paste your HTML

    Copy the HTML source code of your page and paste it into the input area.

  2. 2

    Click Check Landmarks

    Press the Check Landmarks button to parse the HTML and identify all landmark regions and their structure.

  3. 3

    Review the structure

    See a visual map of all landmarks found, along with errors and warnings. Compare against the ideal landmark structure diagram and fix any issues.

Frequently Asked Questions

ARIA landmarks are regions of a page that serve a specific navigational purpose. They include banner (header), navigation, main content, complementary (aside), contentinfo (footer), search, and form regions. Screen reader users can jump directly between landmarks, making them essential for efficient keyboard navigation.

The main landmark identifies the primary content area of the page. Having exactly one main element tells assistive technology users where the core content begins, allowing them to skip repetitive navigation. Multiple main landmarks create confusion about which area contains the primary content.

A skip navigation link is typically the first focusable element on a page. It allows keyboard users to bypass the navigation menu and jump directly to the main content. This saves keyboard-only users from having to tab through every navigation link on every page visit. It is usually visually hidden until it receives focus.

No. All landmark analysis happens entirely in your browser using the DOMParser API. Your HTML never leaves your device.

Related Tools

Heading Analyzer

Validate heading hierarchy

Try it

Focus Order Visualizer

Visualize keyboard tab order

Try it

ARIA Validator

Validate ARIA attributes

Try it

Table Checker

Validate HTML table accessibility

Try it

The Importance of ARIA Landmarks in Web Accessibility

ARIA landmarks provide a way to programmatically identify sections of a page. Screen reader users can pull up a list of landmarks and jump directly to any region, much like sighted users can visually scan a page layout. According to the WebAIM Screen Reader User Survey, navigating by landmarks is one of the most commonly used strategies for finding content on a page. Without proper landmarks, screen reader users must navigate linearly through the entire page content.

HTML5 Semantic Elements and ARIA Roles

HTML5 introduced semantic elements that map directly to ARIA landmark roles. The <header> element maps to role="banner", <nav> to role="navigation", <main> to role="main", <aside> to role="complementary", and <footer> to role="contentinfo". Using the HTML5 elements is preferred over adding explicit ARIA roles, as it provides the semantic meaning automatically. However, the role should be added as well for maximum compatibility with older assistive technology.

Required vs Optional Landmarks

Every page should have exactly one <main> landmark containing the primary content. Pages should also have a <header> (banner) and <footer> (contentinfo), with one of each at the top level. Navigation landmarks (<nav>) should be present whenever the page has navigation links. The <aside> (complementary) landmark is optional and used for content that is tangentially related to the main content. When multiple navigation landmarks exist, each must have a unique accessible name via aria-label.

Skip Navigation Links

A skip navigation link should be the first focusable element on the page. It typically reads "Skip to main content" and links to the main landmark via an anchor. When a keyboard user presses Tab on page load, the skip link appears (or can be visually hidden until focused). Pressing Enter jumps the focus to the main content area, bypassing the header and navigation. This is a WCAG 2.2 Level A requirement under Success Criterion 2.4.1 (Bypass Blocks).

Labeling Landmarks

When a page has multiple landmarks of the same type, each must have a unique accessible name. For example, if a page has a primary navigation and a footer navigation, each <nav> should have a distinct aria-label such as "Main navigation" and "Footer navigation." Similarly, <section> elements only become landmarks when they have an accessible name via aria-label or aria-labelledby. Without a name, sections are not exposed as landmarks to assistive technology.