Stato Stato globale

`aria-disabled`

Indica che un controllo è percepibile e ricevibile dal focus ma non risponde all'input dell'utente. Si preferisca l'attributo nativo HTML disabled quando disponibile; si ricorra ad aria-disabled quando è necessario che l'elemento rimanga focusable o possa ricevere un tooltip.

Quando utilizzarlo

Quando un pulsante, un link, un campo di input o un widget composito è attualmente inoperabile ma deve comunque comparire nell’ordine di tabulazione affinché gli utenti possano scoprirlo e capire perché è disabilitato. Si imposti aria-disabled="true" e si applichi uno stile visivo che renda inequivocabile lo stato disabilitato.

Confronto con gli attributi correlati:

HTML disabled (su <button>, <input>, <select>, <textarea>, <fieldset>) — rimuove il controllo dall’ordine di tabulazione, ignora i clic e impedisce che il valore venga inviato. Si utilizzi quando l’utente non ha nulla da fare con il controllo.
aria-disabled="true" — lo screen reader annuncia «attenuato» / «non disponibile», ma l’elemento rimane focusable. È necessario anche impedire l’esecuzione del gestore del clic. Si utilizzi su widget personalizzati, su tag <a> (che non accettano disabled) o quando lo stato disabilitato richiede un tooltip che ne spieghi il motivo.
aria-readonly — il valore non può essere modificato ma il controllo è ancora operabile e focusable. L’utente può copiarlo e il form continuerà a inviarlo.
aria-hidden — rimuove completamente l’elemento dall’albero di accessibilità. Obiettivo diverso: nascosto, non disabilitato.

Come mantenerlo sincronizzato

I valori validi sono "true" e "false". Si ometta o si imposti su "false" quando il controllo è abilitato — non è necessario rendere aria-disabled="false" su ogni controllo attivo.

Con aria-disabled="true":

Si blocchi l’esecuzione del gestore del clic. L’attributo non blocca gli eventi autonomamente.
Si impedisca l’attivazione da tastiera predefinita (Enter, Space).
Ci si assicuri che lo stile visivo renda evidente lo stato disabilitato; si verifichi che soddisfi ancora il criterio WCAG 1.4.11 sul contrasto non testuale (l’aspetto disabilitato è esplicitamente esente, ma un segnale visivo chiaro rimane comunque la pratica migliore).

Errori comuni

Utilizzare aria-disabled="true" senza bloccare il gestore del clic — l’elemento appare attenuato ma esegue comunque la sua azione.
Usare sia disabled che aria-disabled sullo stesso elemento. L’attributo nativo espone già lo stato; il duplicato è ridondante.
Usare aria-disabled su <a> senza rimuovere anche href o impedire il comportamento predefinito — il link naviga comunque.
Disabilitare i controlli senza spiegarne il motivo. WCAG 3.3.1 prevede un messaggio di errore o un’istruzione.
Confondere aria-disabled con aria-hidden. Gli elementi disabilitati rimangono nell’albero di accessibilità; quelli nascosti scompaiono.

Esempio

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Submit order
</button>
<p id="submit-help">Add at least one item to your cart to enable submit.</p>