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
Effettuare update massivi con Entity Framework Core 7
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Usare lo spread operator con i collection initializer in C#
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Sfruttare al massimo i topic space di Event Grid MQTT
Sostituire la GitHub Action di login su private registry
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Creare gruppi di client per Event Grid MQTT
Routing statico e PreRendering in una Blazor Web App
Eseguire query verso tipi non mappati in Entity Framework Core