Status Widgetstatus

`aria-current`

Markeert het element dat het huidige item in een set vertegenwoordigt — de actieve pagina in een nav, de huidige stap in een wizard, de datum van vandaag in een datumkiezer. Specifieker dan aria-selected; gebruik het op koppelingen en items waarbij selectie niet de juiste metafoor is.

Wanneer gebruiken

Op het ene item dat “uw huidige positie” aangeeft binnen een set gerelateerde items. Het klassieke geval is de actieve koppeling in de primaire navigatie: een schermlezer kondigt aan “Prijzen, huidige pagina, koppeling”, en ziende gebruikers zien een gemarkeerd item dat overeenkomt.

Andere veelvoorkomende gevallen:

De huidige stap in een meerstapsformulier of wizard (aria-current="step").
De datum van vandaag in een kalenderraster (aria-current="date").
Het actieve broodkruimel (aria-current="page").
Het momenteel afspelende item in een medialijst (aria-current="true").

Verschil met verwante toestanden:

aria-current — “u bent hier” binnen een navigatie of itemset. Gebruikt op koppelingen en vergelijkbare widgets die niet op selectie gebaseerd zijn.
aria-selected — selectie binnen een select-achtige container (tablist, listbox, tree, grid). Selectie is iets wat de gebruiker wijzigt.
aria-pressed — schakelknop. De knop zelf is aan of uit.
aria-checked — aankruisvakje of keuzerondje. Onafhankelijke keuze.

Synchronisatie

Geldige waarden: "page", "step", "location", "date", "time", "true", "false". Kies het meest specifieke token — "page" voor navigatiekoppelingen, "step" voor wizards, "date" voor kalenders. "true" is de generieke terugval wanneer geen van de andere van toepassing is. "false" (de standaard) betekent “niet huidig”; gewoonlijk wordt het attribuut gewoon weggelaten op niet-huidige items.

In een navigatiemenu dient op elk moment precies één koppeling aria-current te dragen. Werk het bij aan de clientzijde wanneer de route wijzigt; server-gerenderde pagina’s kunnen het direct in de HTML weergeven.

Stijl het huidige item visueel zodat ziende gebruikers hetzelfde signaal zien. Een gangbaar patroon is [aria-current="page"] { font-weight: 600; }.

Veelvoorkomende fouten

aria-current="true" gebruiken op elke navigatiekoppeling, of op geen enkele.
aria-selected gebruiken op een navigatiekoppeling — verkeerde semantiek; de koppeling is geen selecteerbare optie.
Vergeten aria-current bij te werken na client-side routewijzigingen in een single-page-applicatie.
De actieve toestand stylen met CSS maar aria-current nooit instellen. Schermlezers kondigen niets onderscheidends aan.
aria-current="page" gebruiken op een knop die geen navigatiekoppeling is.
aria-current instellen op de <nav>-container in plaats van op de afzonderlijke koppeling.

Voorbeeld

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>