aria-current

När ska tillståndet användas

På det enda objektet som representerar “var du är” inom en uppsättning relaterade objekt. Det klassiska fallet är den aktiva länken i en primär navigering: en skärmläsare meddelar “Priser, aktuell sida, länk”, och seende användare ser ett markerat objekt som stämmer överens.

Andra vanliga fall:

• Det aktuella steget i ett flerstegsformulär eller en guide (aria-current="step").
• Dagens datum i ett kalendernät (aria-current="date").
• Den aktiva brödsmulanlänken (aria-current="page").
• Det spelbara objektet i en mediaspellista (aria-current="true").

Hur det skiljer sig från relaterade tillstånd:

• aria-current — “du är här” inuti en navigering eller en uppsättning objekt. Används på länkar och liknande widgetar som inte baseras på markering.
• aria-selected — markering inuti en select-liknande container (tablist, listbox, tree, grid). Markering är något användaren ändrar.
• aria-pressed — växlingsknapp. Knappen själv är på eller av.
• aria-checked — kryssruta eller radioknapp. Oberoende val.

Hålla det synkat

Giltiga värden: "page", "step", "location", "date", "time", "true", "false". Välj den mest specifika token — "page" för navigeringslänkar, "step" för guider, "date" för kalendrar. "true" är det generiska reservvärdet när inget av de andra passar. "false" (standardvärdet) innebär “inte aktuell”; vanligtvis utelämnar man bara attributet på icke-aktuella objekt.

I en navigeringsmeny bör exakt en länk bära aria-current åt gången. Uppdatera det klientsidigt när rutten ändras; serverrenderade sidor kan rendera det direkt i HTML.

Styla det aktuella objektet visuellt så att seende användare ser samma ledtråd. Ett vanligt mönster är [aria-current="page"] { font-weight: 600; }.

Vanliga fel

• Använda aria-current="true" på varje navigeringslänk, eller på ingen av dem.
• Använda aria-selected på en navigeringslänk — fel semantik; länken är inte ett valbart alternativ.
• Glömma att uppdatera aria-current efter klientsidiga ruttändringar i en ensidesapplikation.
• Styla det aktiva tillståndet med CSS men aldrig sätta aria-current. Skärmläsare meddelar ingenting utmärkande.
• Använda aria-current="page" på en knapp som inte är en navigeringslänk.
• Sätta aria-current på <nav>-containern istället för på den enskilda länken.

Exempel

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