Powered by
Structure & headings
Two Page Areas Have the Same Type and Name
When two areas of a page share a type and a name, screen reader users can't tell them apart in the list of page areas, so they guess.
landmark-uniqueBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- ModerateModerate — An annoyance, with a workaround.CurrentScanners run this rule today.
- Owner
- DesignDevContentTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Landmarks are the main areas of a page: header, menu, main content, footer. Screen readers can list them, so people can jump straight to one.
If two menus are both just "navigation", the list shows the same word twice. People must open each one to learn which is the main menu and which is the footer menu.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "navigation" twice in the list and must try each one to find the right menu. | Partial impact |
| Low-vision users (magnification) | Affected only if they also use a screen reader, as many do. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This is a best practice, not a WCAG 2.2 Level AA failure. Still, it makes the page easier to use for people protected by the Disability Discrimination Act. | Low impact |
| Conversion | Slower navigation adds friction, but people can still reach every part of the page. | Low impact |
| SEO | No real search benefit — don't sell it as one. | Low impact |
| Brand trust | Clear page areas show screen reader users the site was built with them in mind. | Moderate impact |
| Cost to fix | Usually a one-line label per area. Set it once in the shared header and footer. | High impact |
Fixing it in code
Two menus on one page
Don't
<nav>…main links…</nav>
<footer>
<nav>…footer links…</nav>
</footer>A screen reader says: “navigation … navigation”
Do
<nav aria-label="Main">…main links…</nav>
<footer>
<nav aria-label="Footer">…footer links…</nav>
</footer>A screen reader says: “Main, navigation … Footer, navigation”
A short aria-label gives each menu its own name in the list.
Two side panels with the same label
Don't
<aside aria-label="More">…related articles…</aside>
<aside aria-label="More">…upcoming events…</aside>A screen reader says: “More, complementary … More, complementary”
Do
<aside aria-labelledby="rel"><h2 id="rel">Related articles</h2>…</aside>
<aside aria-labelledby="evt"><h2 id="evt">Upcoming events</h2>…</aside>A screen reader says: “Related articles, complementary … Upcoming events, complementary”
aria-labelledby reuses each panel's own visible heading as its name.
Designer's handoff note
When a page has more than one menu or side panel, give each a short name in your notes — for example, "Main menu" and "Footer menu".
Visible headings make the best names, because everyone sees the same words.
Quick test
Tool
VoiceOver (opens in a new tab) (on every Mac)
Checklist
- Pass
- Every entry is different, like "Main navigation" and "Footer navigation".
- Fail
- Two entries read the same, like "navigation" and "navigation".
What a green scan still misses
A scanner sees that two names differ. It can't tell whether the names make sense, or match what the area really holds.
Reference
- Rule ID
landmark-unique- Raised by
- axe-core: “Landmarks should have a unique role or role/label/title (i.e. accessible name) combination”
- WCAG
- Best practice — not a WCAG requirement
- Last reviewed
- 14 October 2026