Skill Wiki
Aria Current Page
The active navigation link must carry aria-current='page' so screen readers announce 'current page' and give keyboard users orientation within the site structure (WCAG SC 2.4.8, ARIA 1.2 aria-current attribute).
$ prime install @community/rule-aria-current-pageProjection
Always in _index.xml · the agent never has to ask for this.
AriaCurrentPage [rule] v1.0.0
The active navigation link must carry aria-current='page' so screen readers announce 'current page' and give keyboard users orientation within the site structure (WCAG SC 2.4.8, ARIA 1.2 aria-current attribute).
Loaded when retrieval picks the atom as adjacent / supporting.
AriaCurrentPage [rule] v1.0.0
The active navigation link must carry aria-current='page' so screen readers announce 'current page' and give keyboard users orientation within the site structure (WCAG SC 2.4.8, ARIA 1.2 aria-current attribute).
Applies When
Rendering a navigation list (
Rule
// The link matching the current page URL must have aria-current="page".
// Only one link per navigation landmark should carry aria-current="page" at any time.
// Sub-navigation: use aria-current="page" on the deepest matching link only.
// Tabs / steps: use aria-current="step" instead.
<nav aria-label="Main">
<a href="/dashboard" aria-current="page">Dashboard</a> // ✅ active route
<a href="/settings">Settings</a> // no aria-current on inactive links
</nav>
Bad Patterns
// ❌ Active link has no aria-current — screen readers cannot distinguish it
// <a href="/dashboard" class="active">Dashboard</a>
// ❌ aria-current="true" — invalid value; spec allows "page"|"step"|"location"|"date"|"time"|true|false
// <a href="/dashboard" aria-current="true">Dashboard</a>
// ❌ Setting aria-current on wrapper <li> instead of the <a>
// <li aria-current="page"><a href="/dashboard">Dashboard</a></li>
Severity
warning
Verification
Navigate to any page; inspect the nav with DevTools; confirm the matching has aria-current='page' and no other nav link carries the attribute.
Loaded when retrieval picks the atom as a focal / direct hit.
AriaCurrentPage [rule] v1.0.0
The active navigation link must carry aria-current='page' so screen readers announce 'current page' and give keyboard users orientation within the site structure (WCAG SC 2.4.8, ARIA 1.2 aria-current attribute).
Applies When
Rendering a navigation list (
Rule
// The link matching the current page URL must have aria-current="page".
// Only one link per navigation landmark should carry aria-current="page" at any time.
// Sub-navigation: use aria-current="page" on the deepest matching link only.
// Tabs / steps: use aria-current="step" instead.
<nav aria-label="Main">
<a href="/dashboard" aria-current="page">Dashboard</a> // ✅ active route
<a href="/settings">Settings</a> // no aria-current on inactive links
</nav>
Bad Patterns
// ❌ Active link has no aria-current — screen readers cannot distinguish it
// <a href="/dashboard" class="active">Dashboard</a>
// ❌ aria-current="true" — invalid value; spec allows "page"|"step"|"location"|"date"|"time"|true|false
// <a href="/dashboard" aria-current="true">Dashboard</a>
// ❌ Setting aria-current on wrapper <li> instead of the <a>
// <li aria-current="page"><a href="/dashboard">Dashboard</a></li>
Severity
warning
Verification
Navigate to any page; inspect the nav with DevTools; confirm the matching has aria-current='page' and no other nav link carries the attribute.
Rationale
Without aria-current='page', screen-reader users have no programmatic signal distinguishing the active nav item from inactive ones. Voice-control users (Dragon, macOS Voice Control) and sighted keyboard users also benefit: CSS attribute selectors on [aria-current='page'] allow active-state styling without a separate .active class.
Applies When
Rendering a navigation list (
Rule
// The link matching the current page URL must have aria-current="page".
// Only one link per navigation landmark should carry aria-current="page" at any time.
// Sub-navigation: use aria-current="page" on the deepest matching link only.
// Tabs / steps: use aria-current="step" instead.
<nav aria-label="Main">
<a href="/dashboard" aria-current="page">Dashboard</a> // ✅ active route
<a href="/settings">Settings</a> // no aria-current on inactive links
</nav>
Bad Patterns
// ❌ Active link has no aria-current — screen readers cannot distinguish it
// <a href="/dashboard" class="active">Dashboard</a>
// ❌ aria-current="true" — invalid value; spec allows "page"|"step"|"location"|"date"|"time"|true|false
// <a href="/dashboard" aria-current="true">Dashboard</a>
// ❌ Setting aria-current on wrapper <li> instead of the <a>
// <li aria-current="page"><a href="/dashboard">Dashboard</a></li>
Severity
warning
Verification
Navigate to any page; inspect the nav with DevTools; confirm the matching has aria-current='page' and no other nav link carries the attribute.
Source
prime-system/examples/frontend-design/primes/compiled/@community/rule-aria-current-page/atom.yaml