Se un link sembra un pulsante, dovrebbe comunque essere formattato come un pulsante?

I collegamenti (tag <a>) vengono utilizzati per passare a un'altra pagina o risorsa. I pulsanti (tag <button>) eseguono azioni sulla pagina corrente, come inviare un modulo o chiamare una funzione JavaScript.

Se un elemento esegue un'azione ma sembra un collegamento, dovrebbe essere formattato come <button>. Viceversa, se un elemento porta a un'altra pagina ma sembra un pulsante, è meglio usare <a>.

Motivazione dal punto di vista dell'accessibilità:

• Semantica: Gli screen reader e altre tecnologie assistive usano la semantica dei tag per capire la funzione dell'elemento. Un pulsante viene percepito come un elemento interattivo attivabile, un collegamento come un elemento di navigazione.
• Interazione da tastiera: Per impostazione predefinita, i pulsanti si attivano con Enter o Space, i collegamenti solo con Enter. Gli utenti che navigano con la tastiera si aspettano questo comportamento.
• Stilizzazione e JavaScript: Usare i tag corretti semplifica l'applicazione di stili e gestori di eventi.

Esempio di collegamento come pulsante:

<a href="/page" class="button">Vai alla pagina</a>

Esempio di pulsante che imita un collegamento (raro, ma possibile per soluzioni UX specifiche):

<button type="button" onclick="doSomething()" class="link">Esegui azione</button>

In generale, seguite la semantica: collegamenti per la navigazione, pulsanti per le azioni.