Ruolo Widget

`link`

Contrassegna un elemento come collegamento ipertestuale — un controllo che, se attivato, porta a una nuova risorsa. Si consiglia di usare prima l'elemento HTML nativo <a href>; si ricorre a role="link" su uno <span> o un <div> solo quando non è possibile usare l'elemento nativo.

Quando si usa

Quasi mai — si usi <a href="...">. L’ancora nativa fornisce il focus, l’attivazione da tastiera con Invio, lo stato «visitato», il menu contestuale «Apri in una nuova scheda», il trascinamento per aggiungere ai segnalibri e un URL reale che l’utente può condividere. role="link" su un <div> elimina tutti questi vantaggi.

I soli casi legittimi sono:

Un sistema di design di terze parti include un componente «link» non basato su ancora che non è possibile sostituire.
Si sta correggendo un <div onclick> inaccessibile in attesa di un refactoring.

Se si utilizza role="link", è necessario anche:

Rendere l’elemento ricevibile dal focus con tabindex="0".
Gestire keydown per Enter (i link NON si attivano con la barra spaziatrice — quello è il comportamento di un pulsante).
Fornire all’utente un modo per visualizzare l’URL di destinazione al passaggio del puntatore o al focus, poiché non è presente alcun attributo href.

Errori comuni

<a> senza href. Senza href l’elemento non è nell’ordine di focus e gli screen reader non lo annunciano come link.
<a href="#" onclick="..."> usato come pulsante. Si usi invece <button> — i link navigano, i pulsanti agiscono.
role="link" attivato con la barra spaziatrice. La barra spaziatrice scorre la pagina; i link si attivano solo con Invio.
Testo del link generico come «clicca qui» o «leggi di più». Gli utenti di screen reader che visualizzano l’elenco dei link vedono solo il testo del link — occorre che sia descrittivo.
aria-current="page" assente sul link che rappresenta la pagina corrente in una navigazione.

Esempio

<!-- Soluzione preferita -->
<a href="/toolkit/standards/wcag/">Riferimento WCAG 2.2</a>

<!-- Solo quando <a href> è impossibile -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>