Landmark unique

Moderate effort

Found on 55% of audited stores.

Add a unique aria-label (or aria-labelledby) to every repeated landmark role on the page so screen-reader users can tell them apart.

What it is

Landmarks are special HTML regions — like `<nav>`, `<main>`, `<header>`, `<footer>`, `<aside>`, and `<section>` — that act as signposts for people using screen readers or keyboard-only navigation. When the same type of landmark appears more than once on a page (for example, two `<nav>` menus or two `<section>` blocks), each one must carry a unique label so users can understand what each region contains and jump directly to the right one. Without these labels, a screen reader will just announce "navigation" twice, with no way to tell which is which.

Why it matters

Screen-reader users rely on landmark navigation to skip around a page quickly — it's the equivalent of sighted users scanning headings at a glance. Duplicate, unlabeled landmarks force these users to listen through entire sections just to find what they need, creating a frustrating, unusable experience. This violates WCAG 2.1 Success Criterion 1.3.6 (Identify Purpose) and is flagged by automated accessibility checkers like axe. Depending on your market, failing WCAG 2.1 AA exposes your business to legal risk under the ADA (US), the European Accessibility Act (EU), and similar laws. Beyond compliance, accessible stores convert better — a broader audience can browse and buy without barriers.

How to fix it

Audit your page to find every instance of a repeated landmark role — common culprits are multiple <nav> elements (e.g. main navigation + breadcrumbs + footer links), multiple <section> elements, multiple <aside> elements, or multiple <form> elements.
For each repeated landmark, write a short, descriptive label that clearly distinguishes its purpose (e.g. 'Main navigation', 'Breadcrumb', 'Footer navigation', 'Product filters', 'Newsletter signup').
Add an aria-label attribute directly on the HTML landmark element with that label, e.g. <nav aria-label='Main navigation'>. Use plain, meaningful text — not 'nav1' or 'section2'.
Alternatively, if a visible heading already labels the region, use aria-labelledby pointing to that heading's id, e.g. <section aria-labelledby='filters-heading'>. This is preferred when a visible label already exists.
Re-test with a browser accessibility checker (axe DevTools browser extension, WAVE, or Lighthouse) to confirm the landmark-unique violation is resolved and no two landmarks of the same type share identical labels.
Spot-check with a real screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) by triggering the Landmarks/Regions list to verify each landmark is named distinctly.

Fix it on your platform

Pick your platform for the exact steps.

How to fix landmark unique on Shopify

In your Shopify admin, go to Online Store → Themes → (your active theme) → Actions → Edit code.
Open the theme layout file: Layout → theme.liquid. This file wraps every page and typically contains the main <header>, <nav>, and <footer> landmarks.
Search for every <nav>, <header>, <aside>, <section>, and <footer> tag in theme.liquid, and in any section/snippet files (Sections folder and Snippets folder) included in the template.
For each duplicated landmark type, add a descriptive aria-label attribute. Example: change <nav> to <nav aria-label='Main navigation'> and a second one to <nav aria-label='Footer navigation'>.
For section files (e.g. header.liquid, footer.liquid, predictive-search.liquid, breadcrumbs.liquid), open each file individually in the code editor and apply the same aria-label additions.
Save each file, preview the live theme, and verify with the axe DevTools browser extension that landmark-unique violations are cleared.

Full Shopify guide →Official Shopify docs ↗

How to fix landmark unique on WooCommerce

Landmark HTML is output by your active WordPress theme (e.g. Storefront, Astra, GeneratePress), NOT by WooCommerce itself.
If you are using a block theme (Full Site Editing), go to Appearance → Editor → Templates, open the template that contains the duplicate landmark (e.g. 'Single Product', 'Page'), click the block you want to label, open the Block Settings sidebar → Advanced, and add the aria-label in the 'HTML anchor' / 'Additional CSS class' area — or use a Custom HTML block to wrap it.
For classic themes, go to Appearance → Theme File Editor (or use a file manager/FTP) and open the relevant template file (header.php, footer.php, sidebar.php, page.php). Locate the landmark tag and add aria-label='...' directly.
If you cannot edit theme files safely, install a plugin such as 'Add Attributes to Blocks' or use a child theme's functions.php to hook into the output and inject the aria-label.
After saving, run axe DevTools in your browser on the storefront to confirm each landmark is uniquely labelled.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix landmark unique on BigCommerce

In your BigCommerce control panel, go to Storefront → Themes → (your active theme) → Advanced → Edit Theme Files (or use the Stencil CLI locally).
Navigate to templates/layout/base.html for the global wrapper, and templates/components/ for reusable partials such as header.html, footer.html, and navigation.html.
Find every <nav>, <aside>, <section>, and <header> tag that appears more than once across the rendered page.
Add a unique aria-label to each, e.g. <nav aria-label='Main navigation'>, <nav aria-label='Breadcrumb'>, <nav aria-label='Footer links'>.
Save (or push via Stencil CLI: stencil push), then publish the updated theme and verify with the axe browser extension.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix landmark unique on Wix

Open your site in the Wix Editor (or Wix Studio).
Click on the navigation menu, footer navigation, or repeated section element that is causing the duplicate landmark.
In the left panel or right-click context menu, open 'Accessibility Settings' (the wheelchair icon or Settings → Accessibility).
Enter a unique, descriptive ARIA label in the 'ARIA Label' field for each element. For example, label your top navigation 'Main navigation' and your footer nav 'Footer navigation'.
Repeat for every repeated landmark type on the page.
Publish the site and verify with the axe DevTools browser extension.

Full Wix guide →Official Wix docs ↗

How to fix landmark unique on Wix Studio

Open your site in Wix Studio.
Select the repeated navigation or section element on the canvas.
In the right-side Properties panel, locate the 'Accessibility' section and expand it.
Type a unique descriptive label in the 'ARIA Label' field (e.g. 'Primary navigation', 'Category navigation', 'Footer navigation').
Repeat for each duplicate landmark element across the page.
Publish and validate using the axe DevTools browser extension on the live URL.

Full Wix Studio guide →Official Wix Studio docs ↗

How to fix landmark unique on Squarespace

Squarespace does not expose direct HTML landmark editing through its standard editor. You will need to use the Code Injection feature.
Go to Settings → Advanced → Code Injection → Footer. Paste a small JavaScript snippet that selects the duplicate landmark elements by class or position and adds aria-label attributes to each.
Alternatively, if you have a Business or Commerce plan, go to Pages → (your page) → Edit → add a Code Block, then use JavaScript to target and label the landmarks on that specific page.
The most reliable approach is to inject JS in the site-wide footer: document.querySelectorAll('nav')[0].setAttribute('aria-label','Main navigation'); document.querySelectorAll('nav')[1].setAttribute('aria-label','Footer navigation'); — adjusted for your actual landmark count and structure.
Save and preview, then confirm with the axe DevTools extension that landmark-unique violations are resolved.

Full Squarespace guide →Official Squarespace docs ↗

How to fix landmark unique on Webflow

Open your project in the Webflow Designer.
Click on the Navbar, Section, or other repeated landmark element on the canvas.
In the right-side Element Settings panel (the gear icon), scroll down to the 'Custom Attributes' section.
Click the '+' icon to add a new attribute. Set the Name to aria-label and the Value to a unique, descriptive label (e.g. 'Main navigation').
Repeat for every other instance of the same landmark type on the page, giving each a distinct label (e.g. 'Footer navigation' for the second <nav>).
Publish the site, then verify with the axe DevTools browser extension on the live URL.

Full Webflow guide →Official Webflow docs ↗

How to fix landmark unique on Adobe Commerce (Magento)

Landmark HTML is rendered by Magento's frontend theme. Locate your active theme under app/design/frontend/<Vendor>/<theme>/.
Identify the template files that output the duplicate landmarks: typically Magento_Theme/templates/html/header.phtml (header/nav), Magento_Theme/templates/html/footer.phtml (footer nav), and Magento_LayeredNavigation/templates/layer/view.phtml (sidebar/aside filters).
Open each file and add aria-label attributes to the relevant landmark tags. For example, change <nav> to <nav aria-label='Main navigation'> in header.phtml and <nav aria-label='Footer navigation'> in footer.phtml.
If you are using a third-party theme (e.g. Hyvä, Luma-based), create a template override in your custom theme folder rather than editing the vendor file directly.
Clear the Magento cache (bin/magento cache:flush) and deploy static content (bin/magento setup:static-content:deploy) to see changes on the storefront.
Run the axe DevTools browser extension on the storefront to confirm all landmark-unique violations are resolved.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

How to fix landmark unique on Magento Open Source