Quando un pulsante non è un pulsante?

Diciamo che hai una parte di un'interfaccia su cui l'utente fa clic e succede qualcosa. Suona come un pulsante per me, ma chiamiamola una "cosa cliccabile" per ora. Lo so, sei sicuro che sia anche un pulsante: è arrotondato e si distingue per un bel colore pomodoro, chiedendo di essere interagito. Ma pensiamoci un attimo. Farà risparmiare tempo a lungo termine, lo prometto.

E se il testo in questa cosa cliccabile fosse "Leggi di più" e facendo clic su di esso porta l'utente a un articolo su un'altra pagina? Hmm. E se ci fosse una parola sottolineata in blu, "Chiudi", che chiude la finestra di dialogo popup? È un collegamento solo perché è blu e sottolineato? Ovviamente no.

Whoa! Sembra che non ci sia modo di dire se si tratta di un collegamento o di un pulsante semplicemente guardandolo. Questo è pazzesco! Dobbiamo capire cosa fa questa cosa prima di scegliere l'elemento giusto. Ma cosa succede se non sappiamo ancora cosa fa o siamo semplicemente confusi? Bene, c'è un pratico diagramma di flusso per noi:

1. È un pulsante.
2. In caso contrario, allora è un collegamento.
3. Questo è tutto.

Quindi, è tutto un pulsante? No, ma puoi sempre iniziare con un pulsante per quasi tutti gli elementi su cui è possibile fare clic o interagire in modo simile. E se manca qualcosa, come la navigazione in un'altra pagina, usa invece un link. E no, un puntatore non è un motivo per farlo <a href> . Abbiamo cursor: pointer per quello.

Va bene, è un <button> — siamo d'accordo su questo. Mettiamolo nel nostro modello e stiliamolo in base al design: alcuni stili di riempimento, arrotondamento, riempimento di pomodoro, testo bianco e persino alcuni stili di messa a fuoco. Oh, è così carino da parte tua.

 <button type="button" class="button"> Something </button> <style> .button { display: inline-block; padding: 10px 20px; border-radius: 20px; background-color: tomato; color: white; } .button:focus { outline: none; box-shadow: 0 0 0 5px #006AE3; } </style>

Non ci volle molto. Volevi costruirlo velocemente e pranzare perché hai fame. Ok, vediamo come appare e iniziamo.

Dio mio! Qualcosa non va nel browser. Perché questo pulsante è così brutto? Il testo è minuscolo, anche se abbiamo impostato esplicitamente il body su 16px e anche la font-family è sbagliata. Il bordo arrotondato con una sciocca pseudo-ombra è così retrò che non è ancora nemmeno una tendenza.

Ahh, è lo stile predefinito del browser. Devi annullarlo con attenzione o persino aggiungere Normalize.css o Reset.css... oppure potresti semplicemente usare un <div> e dimenticartene. Risolvere rapidamente i problemi non è ciò per cui ti pagano? Hai fame e questo non aiuta affatto. Ma sei un professionista: tirati su e pensa.

Qual è la differenza tra un <button> e un <div> comunque? Un <button> integrato è un elemento interattivo, il che significa che può essere interagito. È profondo. Puoi fare clic su di esso, concentrarti su di esso utilizzando una tastiera e trasmette anche un ruolo di button accessibile agli screen reader, consentendo agli utenti di capire che si tratta di un pulsante.

Degno di nota! Non solo sei a conoscenza dell'elemento <button> di HTML, ma sai anche una o due cose su ARIA e sul supporto per lo screen reader. Potresti anche aver provato VoiceOver o NVDA per testare quanto siano accessibili le tue interfacce.

Quindi, hai deciso di fare un trucco. Non rovinerai lo stile del browser e farai sembrare l'elemento un vero pulsante interattivo per gli utenti che potrebbero averne bisogno. È intelligente!

 <div class="button" tabindex="0" role="button"> Something </div>

Ora non solo sembra corretto, ma è attivabile tramite la tastiera grazie all'attributo tabindex="0" e le utilità per la lettura dello schermo lo tratteranno come un pulsante appropriato perché gli hai saggiamente aggiunto role="button" . Git commit && push allora! Ci sono alcune attività aggiuntive per questa cosa, ma abbiamo finito con lo stile. Che cosa potrebbe andare storto? Ora di pranzo. Grande andiamo!

Un'ora dopo…

È stato un bel pranzo! Torniamo alla nostra cosa cliccabile. Dobbiamo completare alcune attività prima di andare avanti. Vediamo... Abbiamo bisogno di chiamare una funzione doSomething dopo aver fatto clic sul pulsante e dovrebbe esserci un modo per disabilitare il pulsante in modo che non sia cliccabile. Sembra facile. Aggiungiamo un listener di eventi a questo pulsante:

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); }); function doSomething() { console.log('Something!'); } </script>

Fatto. L'utente può ora fare clic con il mouse sul desktop e toccarlo con un dito su un touchscreen. Un evento clic si attiverà in modo affidabile e vedrai un sacco di Qualcosa! nella tua console Qual è il prossimo compito?

Aspettare! Dobbiamo assicurarci che funzioni allo stesso modo per gli utenti della tastiera. Poiché abbiamo questo tabindex="0" sul pulsante, può essere focalizzato e, una volta focalizzato, gli utenti dovrebbero essere in grado di premere la barra spaziatrice o il tasto "Invio" per attivare ciò che abbiamo allegato.

Quindi, dobbiamo collegare un altro listener di eventi per catturare tutti i keyup e attiveremo la nostra funzione solo per determinati tasti. Grazie a Dio i dispositivi touch sono abbastanza intelligenti da convertire tutti i tocchi in clic; in caso contrario, dovremmo allegare anche un sacco di eventi touch.

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); button.addEventListener('keyup', (event) => { if (event.key == 'Enter' || event.key == ' ') { doSomething(); } }); }); function doSomething() { console.log('Something!'); } </script>

Uff! Ora la nostra cosa cliccabile è completamente accessibile dalla tastiera. Sono così orgoglioso di te! E JavaScript è davvero magico: cosa faremmo senza di esso?

Va bene, qual è l'ultima attività: "Il pulsante dovrebbe avere uno stato disabilitato che ne cambia l'aspetto e il comportamento in qualcosa di insensibile". Intorpidire? Immagino che significhi qualcosa di grigio e non reattivo all'interazione. OK, aggiungiamo uno stato nel foglio di stile usando la denominazione BEM.

 <div class="button button--disabled" tabindex="0" role="button"> Something </div> <style> .button--disabled { background-color: #9B9B9B; } </style> 

Mi sembra comodamente insensibile . Ogni volta che il pulsante deve essere disabilitato, aggiungeremo il modificatore button--disabled per renderlo grigio. Ma non è ancora abbastanza insensibile: può ancora essere focalizzato e attivato sia da un puntatore che dalla tastiera.

Dannazione, sta diventando complicato.

Non solo, ma il pulsante non dovrebbe essere accessibile nell'ordine di tabulazione, il che significa che l'attributo tabindex non dovrebbe essere presente. E dobbiamo verificare se il pulsante ha lo stato disabilitato e quindi interrompere l'attivazione della nostra funzione. Inoltre, questo modificatore potrebbe essere applicato dinamicamente. Anche se non è un problema per i CSS abbinare al volo gli elementi con i selettori e applicare gli stili, potremmo aver bisogno di una sorta di osservatore delle mutazioni per attivare altre modifiche per questo pulsante.

Infatti, NO? Abbiamo pensato che fosse un semplice piccolo pulsante che attiva una funzione e ha uno stato disabilitato. Abbiamo cercato di sistemare le cose con l'accessibilità e tutta quella roba, e ora siamo in fondo a questa tana del coniglio.

Prendiamo del cibo da asporto. Non saremo a casa per cena quando avremo finito e lo testeremo adeguatamente. Maledetto W3C! Perché non cercano di semplificarci la vita? Come se si preoccupassero per noi!

In effetti, lo fanno...

Facciamo qualche passo indietro prima di buttarci in questo pasticcio. Perché non proviamo a fare queste cose usando l'elemento <button> ? Ha alcuni trucchi utili nella manica, non solo gli stili brutti del browser. Oh, e non dimenticare type="button" — non vuoi che il pulsante "Chiudi" del popup invii accidentalmente il modulo, perché type="submit" è il valore predefinito.

Apparentemente, quando il <button> è focalizzato e la barra spaziatrice o il tasto "Invio" viene premuto, attiverà l'evento click , proprio come fanno i dispositivi mobili quando ricevono tocchi, carezze, leccate o qualsiasi altra cosa sono in grado di ricevere oggi. Un listener di eventi in meno nel nostro codice! Carino.

 // A click is enough! button.addEventListener('click', doSomething);

Per quanto riguarda lo stato disabilitato, l'attributo disabled è disponibile per l'elemento <button> , così come per tutti gli elementi del form, incluso <fieldset> . Non scherzo. Sapevi che puoi disabilitare un intero gruppo di input raggruppati semplicemente applicando un singolo attributo al genitore <fieldset> ?

 <fieldset disabled> <legend>A bunch of numb inputs</legend> <p> <label> <input type="radio" name="option"> Of course it's a link </label> </p> <p> <label> <input type="radio" name="option"> Obviously, it's a button </label> </p> <p> <label> <input type="radio" name="option"> I just wanna go home </label> </p> <button type="button">Button</button> </fieldset>

Ora sapete! Questo attributo non solo disabilita tutti gli eventi sugli elementi del modulo, ma li rimuove anche dall'ordine di tabulazione. Problema risolto!

 <button disabled type="button" class="button"> Something </button>

Ma aspetta, c'è di più! Attiva anche la pseudo-classe :disabled nei CSS, il che significa che possiamo sbarazzarci del modificatore BEM per dichiarare gli stili e utilizzare invece il modificatore dinamico integrato.

 .button:disabled { background-color: #9B9B9B; }

Per quanto riguarda gli stili brutti del browser, non è necessario utilizzare tutto Normalize.css per correggere un singolo pulsante. Usalo come fonte di saggezza: le tre righe extra sottostanti risolveranno la maggior parte delle fastidiose differenze rispetto a <div> . Se hai bisogno di altro, puoi copiarne le parti rilevanti.

 .button { font-size: 100%; font-family: inherit; border: none; }

Fatto. L'HTML non è poi così male!

Ma se di tanto in tanto ti sorprende, assicurati di controllare le specifiche HTML per le risposte. È diventato molto più amichevole nel corso degli anni ed è pieno di buoni esempi di utilizzo e accessibilità. E, naturalmente, il buon vecchio HTML5 Doctor è ancora un posto affidabile per capire la differenza tra gli elementi <section> e <article> e per verificare se lo schema del documento è ancora valido (non proprio). Ci sono buone probabilità che finirai anche per leggere la documentazione HTML di Mozilla e non te ne pentirai nemmeno.

Questo compito ora è fatto! Qual è il prossimo? Un calendario a carosello a discesa con un campo di ricerca? Oh mio! Buona fortuna. Ma ricorda: il <button> è tuo amico!

Ulteriori letture su SmashingMag:

• Come progettare pulsanti migliori
• Costruire pulsanti di commutazione inclusi
• Ghost Button Design: è davvero ancora una cosa (e perché)?
• Modelli di progettazione: quando infrangere le regole va bene