Tilstand Widgettilstand

`aria-current`

Markerer det element, der repræsenterer det aktuelle element i et sæt — den aktive side i en navigation, det aktuelle trin i en guide, dags dato i en datovælger. Mere specifik end aria-selected; brug det på links og elementer, hvor udvælgelse ikke er den rette metafor.

Hvornår skal det bruges

På det ene element, der repræsenterer “her er du” inden for et sæt relaterede elementer. Det klassiske tilfælde er det aktive link i en primær navigation: en skærmlæser annoncerer “Priser, aktuel side, link”, og seende brugere ser et fremhævet element, der stemmer overens.

Andre hyppige tilfælde:

Det aktuelle trin i en flertrins-formular eller guide (aria-current="step").
Dags dato i et kalendergitter (aria-current="date").
Den aktive brødkrumme (aria-current="page").
Det aktuelt afspillede element i en medieafspilningsliste (aria-current="true").

Sådan adskiller det sig fra beslægtede tilstande:

aria-current — “du er her” inde i en navigation eller et sæt elementer. Bruges på links og lignende widgets, der ikke er udvælgelsesbaserede.
aria-selected — udvælgelse inde i en udvælgelses-container (tablist, listbox, tree, grid). Udvælgelse er noget, brugeren ændrer.
aria-pressed — skifteknap. Knappen selv er til eller fra.
aria-checked — afkrydsningsfelt eller radioknap. Uafhængigt valg.

Sådan holdes det synkroniseret

Gyldige værdier: "page", "step", "location", "date", "time", "true", "false". Vælg det mest specifikke token — "page" for nav-links, "step" for guider, "date" for kalendere. "true" er det generiske reservevalg, når ingen af de andre passer. "false" (standarden) betyder “ikke aktuel”; normalt udelades attributten bare på ikke-aktuelle elementer.

I en navigationsmenu bør nøjagtig ét link have aria-current på et givet tidspunkt. Opdatér det på klientsiden, når ruten ændres; server-renderede sider kan gengive det direkte i HTML.

Stil det aktuelle element visuelt, så seende brugere ser samme signal. Et almindeligt mønster er [aria-current="page"] { font-weight: 600; }.

Hyppige fejl

Brug af aria-current="true" på hvert navigationslink eller på ingen af dem.
Brug af aria-selected på et navigationslink — forkert semantik; linket er ikke en valgbar mulighed.
Glemsel af at opdatere aria-current efter klientsideroute-ændringer i en single-page app.
Styling af den aktive tilstand med CSS, men aldrig sætning af aria-current. Skærmlæsere annoncerer ingenting adskillende.
Brug af aria-current="page" på en knap, der ikke er et navigationslink.
Sætning af aria-current på <nav>-containeren i stedet for det individuelle link.

Eksempel

<nav aria-label="Primær">
  <ul>
    <li><a href="/">Forside</a></li>
    <li><a href="/pricing" aria-current="page">Priser</a></li>
    <li><a href="/docs">Dokumentation</a></li>
  </ul>
</nav>