Che differenza c’è tra bottoni e link?
Dopotutto si potrebbe pensare che i link sono come i bottoni, quindi in questo articolo parlerò soprattutto del problema dal punto di vista dell’interfaccia grafica. Basta usare il buon senso e un po’ di astuzia. Qual è la differenza tra button e link? Per approfondire consiglio la lettura dell’articolo Buttons & Links: The Basics di User Experience Office. Andiamo subito alle spiegazioni essenziali.
Caratteristiche principali dei bottoni
- Hanno la proprietà :focus by default;
- Si possono cliccare con barra spaziatrice;
- Si possono disabilitare;
- Sono annunciati dallo screen reader con “buttonrole”;
- Sanno proprietà :focus, :hover, :active, :disabled;
I bottoni sono ideali per:
- Aprire una finestra modale;
- Aprire un submenu con tastiera;
- Avviare contenuti come video player;
- Accendere e spegnere eventi;
- Aggiungere e togliere classi per creare eventi con CSS;
- Form di contatto.
Caratteristiche principali dei link:
- Creare ipertesti tra pagine;
- Aprire una nuova pagina;
- Cambiare URL;
- Aprire una nuova finestra con target=”_blank”;
- Hanno la proprietà :focus by default;
- Si possono cliccare con tasto invio;
- Non si possono disabilitare naturalmente;
- Si può usare tabindex=”-1″ e aria-hidden=”true” per toglierli dallo screen reader;
- Sono annunciati dallo screen reader con “linkrole”;
- Hanno proprietà :link, :visited, :focus, :hover, :active
I link sono ideali per:
- Navigare verso altre pagine;
- Creare anchor link nel sito.
Quindi come usare link e bottoni?
- I bottoni servono per azionare eventi particolari;
- I link servono per navigare tra pagine e tra sezioni della pagina.
Bottoni VS Link
HTML ci mette già a disposizione molti indizi utili, quindi non serve scambiare bottoni e link. A volte vediamo usare anche i DIV come se fossero bottoni. Questo è ancora più sconsigliato, perché vuol dire che bisogna riassegnare le proprietà, come il :focus.
A volte però è utile mostrare i link come se fossero bottoni
Forse stai pensando ai link “Leggi di più” nelle card del blog. Ma è giusto? Sono dell’idea che non sia utile avere link ripetitivi e per nulla esplicativi, ricordando che c’è chi usa lo screen reader.
Design ovvio
Sono invece dell’idea che le card dovrebbero essere progettate in modo da rendere ovvia la proprietà cliccabile, ad esempio sottolineando il link, come fa NHS. In aggiunta, si può usare la tecnica con :after in position absolute per allargare la superficie cliccabile alla card, senza avere molteplici link (per foto, titolo e link). Non penso che ci sia una sola soluzione ma più soluzioni. Mi piacerebbe sapere cosa ne pensate.