Linter Rule: Navigation landmarks must have accessible labels
Rule: html-navigation-has-label
Description
Ensure that navigation landmarks have a unique accessible name via aria-label or aria-labelledby attributes. This applies to both <nav> elements and elements with role="navigation".
Rationale
Navigation landmarks help users of assistive technology quickly understand and navigate to different sections of a website. When multiple navigation landmarks exist on a page, each needs a unique accessible name so users can distinguish between them (e.g., "Main navigation", "Footer links", "Breadcrumb navigation").
Examples
✅ Good
erb
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<nav aria-labelledby="breadcrumb-title">
<h2 id="breadcrumb-title">Breadcrumb</h2>
<ol>
<li><a href="/">Home</a></li>
<li>Current Page</li>
</ol>
</nav>
<div role="navigation" aria-label="Footer links">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</div>🚫 Bad
erb
<nav>The navigation landmark should have a unique accessible name via `aria-label` or `aria-labelledby`. Remember that the name does not need to include "navigation" or "nav" since it will already be announced. (html-navigation-has-label) <ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div role="navigation">The navigation landmark should have a unique accessible name via `aria-label` or `aria-labelledby`. Remember that the name does not need to include "navigation" or "nav" since it will already be announced. Additionally, you can safely drop the `role="navigation"` and replace it with the native HTML `<nav>` element. (html-navigation-has-label) <a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</div>