Skip to content

.tip

· one of the small things

aria-current tells a screen reader which link you are on

A nav that marks the active link with a class says where you are to people who can see the colour and to nobody else. aria-current="page" puts it in the accessibility tree, and the link gets announced as the current page.

<Link href={href} aria-current={pathname === href ? "page" : undefined}>
  {label}
</Link>

Pass undefined rather than "false" so the attribute disappears when the link is not current. Then style off it with [aria-current="page"] instead of a class, and the two can never drift apart.

accessibilityfrontend