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.