HTML aria-current: mark the current page within a link set

Why this choice matters

A case record offers Summary, Evidence, and Decision links. On the Summary page, the Summary link is marked current, while the others remain ordinary destinations. That state should be derived from the active route, not hard-coded into a shared navigation template. Keep the visible treatment consistent with the programmatic state and leave the link text meaningful without an icon or color cue.

<nav aria-label="Case C-47 sections">
  <ul>
    <li><a href="/cases/C-47" aria-current="page">Summary</a></li>
    <li><a href="/cases/C-47/evidence">Evidence</a></li>
    <li><a href="/cases/C-47/decision">Decision</a></li>
  </ul>
</nav>
<main><h1>Case C-47 summary</h1><p>Evidence review is pending.</p></main>

What it does not do

Only the current link gets aria-current=page in this set. The markup does not route requests or authorize access to evidence and decisions; those pages need real handlers and server checks.

Cost and operational limits

One attribute costs almost nothing. The maintenance risk is stale current state after route changes, especially in templates reused for several record types or nested paths.

Common Mistakes

• Do not mark two pages current in one navigation set.
• Do not depend on color alone to show current location.
• Do not let a shared template freeze the current state on the wrong route.

Connected lessons

• HTML landmarks: give navigation, main content, and page edges clear owners
• HTML anchors: use href for navigation and stable fragment targets
• HTML skip link: reach main content before repeated navigation

Related CSS decisions

• CSS @view-transition: opt in only the pages that can tolerate a cross-page animation