Only one element should be the current page

Rule single-current-page · Component patterns (best practice) · impact minor · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

aria-current="page" marks the link to the page the user is on. Marking several links in the same set as the current page is contradictory and confuses orientation. (Repeating it once per separate navigation region — header, mobile drawer, footer, breadcrumb — is fine.)

How to fix#

Use aria-current="page" on a single link per navigation region; for other "current" relationships use the appropriate token (step, location, date, …).

Example#

<nav><a href="/" aria-current="page">Home</a><a href="/about" aria-current="page">About</a></nav>

<nav><a href="/" aria-current="page">Home</a><a href="/about">About</a></nav>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• WAI-ARIA — aria-current