Link o Pulsante
Indice dei contenuti
Anatomia di un link e di un pulsante
La stessa forma sulla pagina, due elementi diversi sotto. A separarli è l'attributo che dà a ciascuno il proprio ruolo, e ciò che succede nel momento in cui viene attivato.
Cos'è un link?
- Definizione
Un è un elemento interattivo che reindirizza l'utente verso una nuova posizione, che può essere una pagina diversa, una posizione differente all'interno della stessa pagina (in tal caso l'URL viene modificato con un parametro #) oppure può essere usato per scaricare un file, tra le altre cose. Una volta attivato, porta l'utente all'URL definito nel suo href. Il browser registra quella navigazione nella sua cronologia, così l'utente può tornare alla pagina precedente con il pulsante "indietro".
- Semantica
Affinché l'elemento abbia il valore semantico di elemento interattivo, deve necessariamente avere un attributo con un valido o un che punti a un elemento nella stessa pagina, altrimenti verrà trattato come un elemento
generico.<a href="/URL"> Vai alla pagina principale </a>- Interazione con la tastiera
Può essere attivato solo con il tasto Enter. Se si preme il tasto Space mentre il foco è sul link, la pagina scorrerà verso il basso.
- Interazione con gli screen reader
Gli screen reader, in genere, annunciano l'elemento nel seguente modo: "Link, [Nome accessibile del link]", per questo è importante che il link abbia un nome accessibile pertinente e descrittivo.
- Cattive pratiche
È del tutto inaccettabile, una cattiva pratica e va contro il funzionamento nativo dell'elemento, forzare un link a comportarsi come un pulsante nel modo seguente:
<a href="javascript:void(0)" onclick="openModal()"> Apri menu </a><a href="#" role="button" onclick="pulsante()"> Link con ruolo pulsante </a>Se hai bisogno di farlo, significa che ti serve un pulsante.
Cos'è un pulsante?
- Definizione
Un pulsante è un elemento interattivo che, quando viene cliccato, esegue un'azione all'interno della pagina in cui si trova. reindirizza l'utente verso un altro luogo, né modifica l'URL. Le azioni eseguite possono essere aprire un modale, riprodurre un video, pubblicare un commento, ecc.
- Semantica
Il pulsante ha bisogno dell'attributo type in base all'azione che deve svolgere.
- type="button": si usa se il pulsante non ha un comportamento determinato.
- type="submit": si usa se il pulsante invia informazioni a un server.
- type="reset": si usa per riportare tutti gli input di un form al loro valore iniziale.
<button type=”button” onclick="openModal()"> Apri modale </button>- Interazione con la tastiera
Può essere attivato solo con i tasti Enter o Space.
- Interazione con gli screen reader
Gli screen reader, in genere, annunciano l'elemento nel seguente modo: "Pulsante, [Nome accessibile del pulsante]", per questo è importante che il pulsante abbia un nome accessibile pertinente e descrittivo.
- Cattiva pratica
È del tutto inaccettabile, una cattiva pratica e va contro il funzionamento nativo dell'elemento, forzare un pulsante a comportarsi come un link nel modo seguente:
<button onclick="window.location.href='/'"> Vai alla pagina iniziale </button>Se hai bisogno di farlo, significa che ti serve un link.
Link o pulsante? Quale devo usare in base alla mia necessità?
- Hai bisogno di espandere una sezione? Usa un
<button>con lo statoaria-expandede il foco deve rimanere sul pulsante. - Hai bisogno di saltare a una sezione all'interno della stessa pagina? Usa un
<a href="#section">. Non ci deve essere un aggiornamento della pagina, l'URL viene modificato con il nuovo riferimento ID e l'utente viene reindirizzato alla nuova posizione. - Hai bisogno di caricare più elementi in una lista? Usa un
<button>e, quando i nuovi elementi vengono caricati, il foco deve essere posizionato sul primo nuovo elemento. - Hai bisogno di reindirizzare l'utente verso una nuova posizione per leggere di più su qualcosa? Usa un
<a href="/destination">. - Hai bisogno di aprire un menu? Usa un
<button>con gli statiaria-haspopupearia-expanded. - Hai bisogno di riprodurre o mettere in pausa un video? Usa un
<button>. - Hai bisogno di scaricare un file? Usa un
<a>con l'attributo . - Hai bisogno che una sezione porti l'utente alla pagina di dettaglio? Usa un
<a>esteso con un::after.
Stile del foco per gli elementi interattivi
Per gli utenti di tastiera e screen reader è fondamentale che gli elementi interattivi abbiano un foco visivo e logico. Non fare mai outline: none senza prima aver dato uno stile al foco:
a:focus-visible,
button:focus-visible {
outline: 4px solid #0066ff;
outline-offset: 4px;
}