angular/router-aria-current

Why

routerLinkActive only adds a class: sighted users see which navigation item is the current page, but a screen reader announces every link the same way. The relationship shown visually is missing from the markup.

Fix

Add ariaCurrentWhenActive="page" next to routerLinkActive (use "step", "location" or "true" where those fit better). Angular then sets aria-current while the link is active and removes it afterwards.

Examples

<!-- bad -->
<a routerLink="/orders" routerLinkActive="active">Orders</a>
<!-- good -->
<a routerLink="/orders" routerLinkActive="active" ariaCurrentWhenActive="page">Orders</a>

Sources

• Angular, Accessibility best practices (active links identification)
• Angular API, RouterLinkActive (ariaCurrentWhenActive)

Read it in the terminal

npx github:dawidolko/frontend-skills explain angular/router-aria-current