Disabilitare un bottone è un'operazione comune quando abbiamo a che fare con delle form. Utilizzando i framework moderni risulta anche molto pratico disabilitare il bottone quando il form non è valido.
Tuttavia, questa non sempre è essere una buona idea. Questo perchè non tutte le persone navigano nel web utilizzando gli stessi metodi: c'è chi è più portato a utilizzare il mouse, chi naviga tra gli input tramite il tab, e chi utilizza lettori o strumenti che aiutano l'accessibilità.
Analizziamo ora i feedback che riceviamo se aggiungiamo l'attributo disabled, o anche disabled="disabled" data la natura binaria dell'attributo, e capiamone le differenze.
Nel caso dell'utilizzo con il mouse l'utente vedrà il bottone disabilitato e sovrapponendo il cursore possiamo mostrare anche un'icona tramite css.
button:disabled { cursor: not-allowed; }
Se per il mouse possiamo dire che l'attributo funziona egregiamente, non possiamo dire altrettanto del tab.
<input/> <button disabled/> <a></a>
Nella struttura precedente, partendo con un focus sull'input, a seguito di un tab il focus passerà sull'elemento a, creando quindi una differenza tra una situazione valida, nella cui verrà evidenziato il button, e una non valida.
Riscontreremo lo stesso errore nel caso di utilizzo su dipositivi mobile, nel quale il bottone sarà effettivamente visibile, ma tutti i sistemi di gestione delle form, come il passaggio da un input all'altro, non lo considereranno.
Questa casistica, seppur marginale per un utilizzatore classico, nel caso di utilizzo tramite strumenti che aiutano l'accessibilità, o utenti con problemi visivi, potrebbe essere molto problematica.
Per questo motivo, in molti casi, si predilige l'utilizzo dell'attributo aria-disabled. Questo attributo, a differenza di disabled, ha delle caratteristiche esclusivamente semantiche. Non impedirà quindi il click, il focus e non avrà neanche il css tipico del bottone disable.
Dovendo provvedere alla gestione del click, nel caso il form non sia compilato correttamente, avremo l'incarico di evitare ogni possibile submit e aggiungere gli stili tipici di un bottone disabilitato.
&[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; }
Facendo un recap della situazione corrente: l'utilizzo tramite mouse rimarrà inalterato, chi utilizzerà il tab otterrà una consistenza tra gli spostamenti, in quanto il bottone rimarrà sempre evidenziabile. Nel caso di utilizzo di assistenti vocali, il bottone verrà rilevato e l'utente verrà informato riguardo lo stato disabilitato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Evitare la script injection nelle GitHub Actions
Usare il colore CSS per migliorare lo stile della pagina
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Aggiungere interattività lato server in Blazor 8
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Testare l'invio dei messaggi con Event Hubs Data Explorer
Utilizzare i primary constructor di C# per inizializzare le proprietà
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare Model as a Service su Microsoft Azure