L'anti-pattern dell'ancora senza href

Un anti-pattern comune consiste nell'usare un anchor senza href e collegarlo a un gestore del clic per farlo comportare come un pulsante. Sembra funzionare, ma crea problemi.

Un anchor è considerato un vero link solo quando ha un href. Senza, il browser non lo tratta affatto come un elemento interattivo.

Un anchor privo di href non può ricevere il focus, quindi gli utenti che navigano nella pagina con il tasto Tab lo saltano e non possono mai raggiungerlo.

Anche forzando il focus su di esso, un link falso ignora Invio e la barra spaziatrice per impostazione predefinita, quindi gli utenti da tastiera non possono comunque attivarlo.

Senza href, un lettore di schermo potrebbe non annunciare affatto l'anchor come link, quindi gli utenti non scopriranno mai che possono utilizzarlo.

Alcuni risolvono provvisoriamente il problema usando un href contenente solo un cancelletto. In questo modo l'elemento può ricevere il focus, ma la pagina salta in cima, creando un effetto brusco.

Se il controllo esegue un'azione, usi un vero pulsante. Otterrà automaticamente focus, supporto per la tastiera e il ruolo corretto.

Se il controllo esegue davvero una navigazione, mantenga l'anchor, ma gli assegni un href reale che punti alla destinazione.

Spesso gli sviluppatori scelgono un anchor per il suo stile sottolineato. Tuttavia, è possibile applicare lo stesso stile a un pulsante senza sacrificare l'accessibilità.

Per impostazione predefinita, un anchor privo di href perde persino il cursore a forma di puntatore, suggerendo agli utenti vedenti che qui non si può davvero fare clic.

Non simuli l'interattività. Scelga un vero pulsante per le azioni o un anchor con href per la navigazione, evitando soluzioni alternative.

Un anchor privo di href è un falso link: non può ricevere il focus e non funziona con la tastiera. Usi un pulsante per le azioni e un href reale per la navigazione. ✅