Landmarks that cannot be told apart on Squarespace
What this is
3 landmarks share the same type and name with another landmark on the page, for example two `<nav>` regions without a label. In the landmarks list a screen reader then announces "navigation, navigation", and people cannot tell which is which.
Who it affects
- Screen reader users
Standards
How to fix it
- Find the landmarks of the same type on the page: usually several `<nav>`, `<aside>` or `<section aria-label>` elements, or a second `<header>`/`<footer>` at the top level.
- Give each one a short, distinct name with `aria-label` (or `aria-labelledby` pointing at its visible heading), such as "Main" and "Footer".
- If two landmarks wrap the same content, remove the extra one instead of naming it.
Example
Before
<nav>…main menu…</nav>
…
<nav>…footer links…</nav>After
<nav aria-label="Main">…main menu…</nav>
…
<nav aria-label="Footer">…footer links…</nav>Use names that describe each region; the word "navigation" is announced by the screen reader already, so leave it out.
On Squarespace
Most templates include landmarks; use Code Injection only if one is missing.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.