angular/router-aria-current

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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