Landmarks that cannot be told apart on Elementor

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

• WCAG 1.3.1 Info and Relationships (A)

How to fix it

1. 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.
2. Give each one a short, distinct name with `aria-label` (or `aria-labelledby` pointing at its visible heading), such as "Main" and "Footer".
3. 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 Elementor

Container → Layout → HTML Tag: choose `main`, `header`, `footer`, `nav` or `section`.

Other platforms

• General advice
• WordPress
• Shopify
• Webflow
• Framer
• Wix
• Squarespace
• Next.js
• Lovable

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.

More fixes

• Images missing alternative text
• Image buttons missing alternative text
• SVG images missing a text alternative
• Elements with role="img" missing a text alternative
• Links distinguished only by color
• Form fields without a label