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
Filtering sulle colonne in una QuickGrid di Blazor
Ottimizzazione dei block template in Angular 17
Creare un webhook in Azure DevOps
Creare una libreria CSS universale: Immagini
Proteggere le risorse Azure con private link e private endpoints
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Utilizzare gRPC su App Service di Azure
Ordinare randomicamente una lista in C#
Change tracking e composition in Entity Framework
Implementare l'infinite scroll con QuickGrid in Blazor Server
Eseguire operazioni sui blob con Azure Storage Actions
Gestire il colore CSS con HWB