Several navigation areas share no labels
Why it matters
When a page has more than one <nav>, screen reader users hear "navigation" repeatedly with no way to tell them apart.
How to fix it
Give each extra <nav> an aria-label that says what it is, such as "Primary", "Footer" or "Breadcrumb".
<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>Read the W3C guidance: Understanding 1.3.1 Info and Relationships.
Related rules
- Heading levels are skipped (WCAG 1.3.1)
- Heading is empty (WCAG 1.3.1)
- List item is outside a list (WCAG 1.3.1)
- Data table has no header cells (WCAG 1.3.1)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.