SEOLZ

Landmark unique

Moderate effort

Found on 26% of audited stores.

Add a unique aria-label (or aria-labelledby) to every repeated landmark role so assistive technologies can distinguish between them.

What it is

Landmarks are special HTML elements — like `<nav>`, `<header>`, `<footer>`, `<main>`, `<aside>`, and `<section>` — that act as signposts letting screen-reader users jump quickly around a page. When the same type of landmark appears more than once on a page (for example, two `<nav>` elements: one for the main menu and one for breadcrumbs), each one must have a distinct label so users know which is which. Without that label, a screen reader just announces "navigation" twice, leaving users unable to tell them apart. The fix is to add an `aria-label` attribute (e.g. `aria-label="Main menu"` and `aria-label="Breadcrumbs"`) or an `aria-labelledby` pointing to a visible heading inside the landmark.

Why it matters

For the roughly 7.5 million Americans who use screen readers, duplicate unlabelled landmarks make navigation genuinely confusing or impossible — they cannot tell which "navigation" or "complementary" region is which. This is a WCAG 2.1 failure (Success Criterion 1.3.6 / best practice under 2.4.1), which creates legal accessibility risk under the ADA, the UK Equality Act, and equivalent laws worldwide. Beyond legal exposure, an inaccessible store loses sales from disabled shoppers — an estimated $490 billion in disposable income in the US alone. Google also uses landmark structure as a crawl signal for understanding page architecture, so clean, labelled landmarks can marginally improve how Googlebot interprets your content hierarchy.

How to fix it

  1. Audit your page to find every instance where the same landmark type appears more than once. Common culprits are multiple <nav> elements (main menu, footer nav, breadcrumbs), multiple <section> elements, and multiple <aside> elements.
  2. For each duplicate landmark, decide on a short, human-readable label that describes its unique purpose (e.g. 'Primary navigation', 'Footer navigation', 'Related products', 'Order summary sidebar').
  3. If the landmark already has a visible heading inside it (e.g. an <h2>), use aria-labelledby pointing to that heading's id: <nav aria-labelledby="footer-nav-heading">. This avoids repeating text for sighted users.
  4. If there is no visible heading inside the landmark, add an aria-label attribute directly on the landmark element: <nav aria-label="Breadcrumbs">.
  5. Ensure every same-type landmark on the page has a DIFFERENT label — two landmarks with identical aria-label values still fail the rule.
  6. Test with a screen reader (NVDA + Firefox, VoiceOver + Safari, or JAWS + Chrome) or re-run your accessibility scanner to confirm no landmark-unique violations remain.
<nav aria-label="Primary navigation">
  <!-- main site menu links -->
</nav>

<nav aria-label="Breadcrumbs">
  <!-- breadcrumb trail -->
</nav>

<!-- OR, using a visible heading already inside the landmark -->
<aside aria-labelledby="related-products-heading">
  <h2 id="related-products-heading">Related Products</h2>
  <!-- product cards -->
</aside>

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark unique on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click the '…' menu next to your active theme → Edit code.
  2. Open the layout file (layout/theme.liquid) to locate your <header>, <nav>, and <footer> landmark elements.
  3. Also check theme section files in the 'sections/' folder (e.g. sections/header.liquid, sections/footer.liquid, sections/breadcrumbs.liquid) where individual nav elements live.
  4. Add aria-label="Primary navigation" (or an appropriate unique label) to each <nav> or <aside> that appears more than once. Example: <nav aria-label="Footer navigation">.
  5. If your theme renders navigation via snippets, check the 'snippets/' folder for files like navigation.liquid.
  6. Save changes, preview the theme, and re-run your accessibility scanner to confirm the violation is resolved. Consider using a Shopify accessibility app (e.g. accessiBe or AudioEye) for ongoing monitoring.
Full Shopify guide →Official Shopify docs ↗
How to fix landmark unique on WooCommerce
  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SFTP to avoid overwriting on updates).
  2. Open header.php to find your primary <nav> element — typically output by wp_nav_menu() wrapped in a <nav> tag.
  3. Add aria-label="Primary navigation" to that <nav> tag. For breadcrumbs (often in breadcrumb.php or a plugin template), add aria-label="Breadcrumbs".
  4. For footer navigation, open footer.php and label its <nav> with aria-label="Footer navigation".
  5. If you use a page builder (Elementor, Divi, etc.), switch to its HTML/code block or Custom Attributes panel for each navigation widget and add the aria-label attribute there.
  6. Install the WP Accessibility plugin (by Joe Dolson) which can automate some landmark labelling, then re-run your scanner to verify.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix landmark unique on BigCommerce
  1. In your BigCommerce admin, go to Storefront → My Themes → click Customize on your active theme → click Advanced → Edit Theme Files (or download the theme via Theme Editor → Download).
  2. Open templates/layout/base.html and templates/components/common/header.hbs, navigation.hbs, and footer.hbs.
  3. Find each <nav> element and add unique aria-label attributes (e.g. aria-label="Primary navigation", aria-label="Footer navigation").
  4. For breadcrumb landmarks, check templates/components/common/breadcrumbs.hbs and add aria-label="Breadcrumbs" to its wrapping <nav>.
  5. Upload the modified files back via the Theme Editor, publish the theme, and re-run your accessibility audit to confirm.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix landmark unique on Wix
  1. Wix does not expose direct HTML editing for structural landmark elements like <nav> through the standard editor.
  2. Open the Wix Editor and select your navigation menu widget; in the Settings or Accessibility panel (the person icon), look for an 'ARIA label' or 'Accessible name' field and enter a unique label.
  3. For Wix Studio, select the component, open the Properties panel, and use the Accessibility section to add a custom aria-label.
  4. For elements where no built-in ARIA field exists, add a Wix Velo (code) solution: in the Page Code panel, use $w('#menuId').setAttribute('aria-label', 'Primary navigation'); for each navigation component.
  5. Contact Wix Support if landmarks are generated by Wix's own theme infrastructure and cannot be labelled through any of the above routes — this may require a platform-level fix.
Full Wix guide →Official Wix docs ↗
How to fix landmark unique on Squarespace
  1. In your Squarespace admin, go to Website → Pages → click the gear icon on any page → Advanced → Page Header Code Injection, or go to Settings → Advanced → Code Injection for site-wide changes.
  2. Inject a small JavaScript snippet in the footer code injection that selects each duplicate landmark by a unique selector and adds the aria-label: document.querySelector('nav.primary-nav')?.setAttribute('aria-label','Primary navigation'); document.querySelector('nav.footer-nav')?.setAttribute('aria-label','Footer navigation');
  3. Alternatively, use Settings → Advanced → Code Injection → Footer to add the script so it runs on every page.
  4. For Squarespace 7.1 with access to Custom CSS and developer mode, you may be able to use Custom Code blocks; however, structural nav elements are rendered by Squarespace and cannot be edited directly in HTML.
  5. Test after saving by inspecting the live page with browser DevTools (F12) to confirm the aria-label attributes appear on the correct elements.
Full Squarespace guide →Official Squarespace docs ↗
How to fix landmark unique on Webflow
  1. Open your project in the Webflow Designer and select the Navbar or Nav Menu component that is duplicated.
  2. With the element selected, open the Element Settings panel (the gear icon on the right) and scroll to the Custom Attributes section.
  3. Click the '+' button, enter 'aria-label' as the Name and your unique label (e.g. 'Primary navigation') as the Value.
  4. Select each additional instance of the same landmark type (e.g. footer nav) and repeat, using a different label (e.g. 'Footer navigation').
  5. Publish the site and re-run your accessibility scanner or use Webflow's built-in Audit panel (the eye icon in the left toolbar) to confirm the landmark-unique issue is resolved.
Full Webflow guide →Official Webflow docs ↗
How to fix landmark unique on Adobe Commerce (Magento)
  1. Via SSH or SFTP, navigate to your active theme directory: app/design/frontend/<Vendor>/<theme>/.
  2. Open Magento_Theme/templates/html/header.phtml and locate the primary <nav> element (often wrapping the navigation block).
  3. Add aria-label="Primary navigation" to that element. For breadcrumbs, open Magento_Theme/templates/html/breadcrumbs.phtml and add aria-label="Breadcrumbs" to the wrapping <nav>.
  4. For the footer navigation, open Magento_Theme/templates/html/footer.phtml and label its <nav> with aria-label="Footer navigation".
  5. Run bin/magento cache:flush after saving changes, then verify on the storefront using browser DevTools and your accessibility scanner.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find landmark unique — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Landmark unique?

Landmarks are special HTML elements — like `<nav>`, `<header>`, `<footer>`, `<main>`, `<aside>`, and `<section>` — that act as signposts letting screen-reader users jump quickly around a page. When the same type of landmark appears more than once on a page (for example, two `<nav>` elements: one for the main menu and one for breadcrumbs), each one must have a distinct label so users know which is which. Without that label, a screen reader just announces "navigation" twice, leaving users unable to tell them apart. The fix is to add an `aria-label` attribute (e.g. `aria-label="Main menu"` and `aria-label="Breadcrumbs"`) or an `aria-labelledby` pointing to a visible heading inside the landmark.

Why does landmark unique matter?

For the roughly 7.5 million Americans who use screen readers, duplicate unlabelled landmarks make navigation genuinely confusing or impossible — they cannot tell which "navigation" or "complementary" region is which. This is a WCAG 2.1 failure (Success Criterion 1.3.6 / best practice under 2.4.1), which creates legal accessibility risk under the ADA, the UK Equality Act, and equivalent laws worldwide. Beyond legal exposure, an inaccessible store loses sales from disabled shoppers — an estimated $490 billion in disposable income in the US alone. Google also uses landmark structure as a crawl signal for understanding page architecture, so clean, labelled landmarks can marginally improve how Googlebot interprets your content hierarchy.

How do I fix landmark unique?

Add a unique aria-label (or aria-labelledby) to every repeated landmark role so assistive technologies can distinguish between them.

Authoritative references

Related Accessibility (WCAG) issues