Landmark Region Viewer - Online See ARIA Landmarks of Any Page

ARIA landmarks are special regions in a webpage that help assistive technologies (like screen readers) understand the page structure. They allow users to quickly jump between major sections—such as navigation, main content, search, and footer—without tabbing through every element. Proper landmark usage is a WCAG 2.1 Level A requirement and dramatically improves accessibility for keyboard-only and screen-reader users.

banner – Page-level header (usually one per page)
navigation – Groups of navigation links
main – The primary content area (must be unique)
complementary – Supporting content (sidebars)
contentinfo – Page-level footer with meta info
form – A form region (requires accessible name)
search – Search functionality area
region – Generic landmark (requires accessible name)

Yes! Many HTML5 elements have implicit ARIA roles: <header> → banner (when top-level), <nav> → navigation, <main> → main, <aside> → complementary, <footer> → contentinfo (when top-level), <form> → form (if it has an accessible name), and <section> → region (if it has an accessible name). Using semantic HTML is the easiest way to create landmarks.

Use aria-label, aria-labelledby, or the title attribute. For example: <nav aria-label="Main menu"> or <section aria-labelledby="heading-id">. Accessible names help distinguish multiple landmarks of the same role (e.g., two <nav> elements for "Main" and "Footer" navigation).

There's no strict limit, but best practices suggest: at minimum one main, one banner, one contentinfo, and at least one navigation. Avoid excessive landmarks—too many region or navigation landmarks can overwhelm users. Aim for a clear, logical structure that reflects the page's information architecture.

Screen reader users lose the ability to quickly navigate the page by region. They must tab through or scan all content linearly, which is time-consuming and frustrating. Pages without landmarks fail WCAG Success Criterion 1.3.1 (Info and Relationships) and 2.4.1 (Bypass Blocks). Adding at least a <main> and <nav> element is the fastest fix.

Yes! Landmarks can contain other landmarks. For example, a banner may contain a navigation, and main may contain multiple region or form landmarks. Nesting helps create a logical hierarchy. This tool visualizes that nesting so you can verify that your structure makes sense.

The Landmark Viewer Bookmarklet is a small JavaScript snippet you can save as a browser bookmark. When clicked on any webpage, it visually highlights all ARIA landmarks with colored outlines and labels—no installation required. To use it: drag the yellow bookmarklet button to your bookmarks bar, or right-click it and select "Copy link address" to create a bookmark manually. Then click it on any page you want to inspect.

Browsers enforce CORS (Cross-Origin Resource Sharing) policies that prevent JavaScript from reading content from other domains. The "Fetch URL" feature works for same-origin pages. For external sites, use Paste HTML (copy the page source first) or the Bookmarklet (which runs directly on the target page).