aria-current

Quando usarlo

Sull’unico elemento che rappresenta «dove ci si trova» all’interno di un insieme di elementi correlati. Il caso classico è il link attivo in una navigazione primaria: uno screen reader annuncia «Prezzi, pagina corrente, link», e gli utenti vedenti individuano un elemento evidenziato che corrisponde a quello selezionato.

Altri casi comuni:

• Il passo corrente in un modulo a più fasi o in una procedura guidata (aria-current="step").
• La data di oggi in una griglia di calendario (aria-current="date").
• Il breadcrumb attivo (aria-current="page").
• L’elemento in riproduzione in una playlist multimediale (aria-current="true").

Differenze rispetto agli stati correlati:

• aria-current — «ci si trova qui» all’interno di una navigazione o di un insieme di elementi. Va usato sui link e su widget analoghi che non sono basati sulla selezione.
• aria-selected — selezione all’interno di un contenitore di tipo select (tablist, listbox, tree, grid). La selezione è qualcosa che l’utente modifica.
• aria-pressed — pulsante di attivazione/disattivazione. Il pulsante stesso è attivo o inattivo.
• aria-checked — casella di controllo o radio button. Scelta indipendente.

Come mantenerlo sincronizzato

Valori validi: "page", "step", "location", "date", "time", "true", "false". Occorre scegliere il token più specifico — "page" per i link di navigazione, "step" per le procedure guidate, "date" per i calendari. "true" è il valore generico di riserva quando nessuno degli altri si adatta. "false" (il valore predefinito) significa «non corrente»; di norma si omette semplicemente l’attributo sugli elementi non correnti.

In un menu di navigazione, un solo link alla volta deve avere aria-current. È necessario aggiornarlo lato client quando il percorso cambia; le pagine con rendering lato server possono inserirlo direttamente nell’HTML.

Lo stile dell’elemento corrente deve essere visibile, in modo che gli utenti vedenti ricevano lo stesso segnale visivo. Un pattern comune è [aria-current="page"] { font-weight: 600; }.

Errori comuni

• Impostare aria-current="true" su ogni link di navigazione, oppure su nessuno.
• Usare aria-selected su un link di navigazione — semantica errata; il link non è un’opzione selezionabile.
• Dimenticare di aggiornare aria-current dopo i cambi di percorso lato client in un’applicazione a pagina singola.
• Applicare lo stile dello stato attivo tramite CSS senza mai impostare aria-current. Gli screen reader non annunciano nulla di distintivo.
• Usare aria-current="page" su un pulsante che non è un link di navigazione.
• Impostare aria-current sul contenitore <nav> invece che sul singolo link.

Esempio

<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>