jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

HTML Landmark Checker

Scan pasted HTML for common landmark elements: header, main, nav, footer, aside, section, form, and search. Flags missing essential landmarks and explains why each one matters for accessibility.

Loading tool...

What is HTML Landmark Checker?

ARIA landmarks are HTML elements that define page regions. Screen readers use landmarks to let users jump between page sections. Common landmarks include header, main, nav, footer, aside, and form. Missing landmarks make pages harder to navigate for assistive technology users.

Quick answer

Paste your HTML to check which ARIA landmark elements are present and which are missing. Screen readers use landmarks to help keyboard and assistive technology users navigate between page regions.

Limitations

  • The tool scans for element names only. It does not check whether landmarks have accessible names provided through aria-label, aria-labelledby, or visible headings.
  • The checker does not validate ARIA role assignments. An element with a role attribute may override or remove the implicit landmark role.
  • Pasting partial HTML may miss landmark elements outside the pasted content. Paste the full page HTML for a complete audit.

How to use this tool

  1. Paste your HTML markup into the input area.
  2. The tool scans for landmark elements and displays which ones are present.
  3. Review the results showing which landmarks are missing from your page.
  4. Add the missing landmark elements to improve page accessibility.

What you can use it for

  • Audit a static page template for missing landmark elements before publishing.
  • Check that every page on a site has a main element for screen reader navigation.
  • Verify that navigation blocks use the nav element instead of generic div elements.

Use cases

Practical examples

Example

Missing main landmark

A page template audit reveals a missing main element. The checker flags it as a required landmark and explains that screen readers depend on main to jump to page content.

Example

Div navigation detected

A blog layout has header and footer elements but uses a div for navigation. The checker suggests replacing the div with a nav element for better landmark structure.

Common mistakes

  • Using multiple main elements on one page, which is not standard and confuses screen reader navigation.
  • Wrapping everything in a nav element instead of using it only for actual site navigation.
  • Using section elements without accessible names, which makes them less useful as ARIA landmarks.

Verification

  1. Load the audited page in a browser and use a screen reader or browser extension to navigate by landmarks and confirm the expected regions are present.
  2. Run the page through a formal accessibility testing tool such as axe DevTools or WAVE to cross-check the landmark audit results.

FAQ

Questions about HTML Landmark Checker

How many main elements should a page have?

One visible main element per page. Multiple main elements are not standard and confuse screen reader navigation.

Are HTML5 semantic elements the same as ARIA landmarks?

Yes. Elements like header, main, nav, footer, aside, and form have implicit ARIA landmark roles. Using these semantic elements automatically creates landmarks.

Do I need labels on section elements?

A section element without an accessible name does not register as a landmark in the accessibility tree. Add an aria-label or aria-labelledby attribute to section elements that represent distinct page regions.

Related tools

More html tools

Also try

Also try