How to fix landmark unique on Squarespace

Steps for 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.

<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>

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.

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.

See the complete Landmark unique guide for every platform and the full background.