How to fix landmark unique on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Landmark HTML is rendered by Magento's frontend theme. Locate your active theme under app/design/frontend/<Vendor>/<theme>/.
2. 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).
3. 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.
4. 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.
5. Clear the Magento cache (bin/magento cache:flush) and deploy static content (bin/magento setup:static-content:deploy) to see changes on the storefront.
6. Run the axe DevTools browser extension on the storefront to confirm all landmark-unique violations are resolved.

What is landmark unique?

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.

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.

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