aria-readonly

Quando usarlo

Su un controllo di modulo il cui valore l’utente può vedere e copiare ma non modificare — una riga di riepilogo ordine che non dovrebbe essere alterata, il commento di un revisore in un’approvazione a più fasi, un identificativo generato automaticamente. L’utente può ancora portarvi il focus tramite tabulazione, selezionare il testo e leggerlo; il form invierà comunque il valore.

Se si usano <input>, <textarea> o <select>, l’attributo HTML readonly gestisce tutto questo in modo nativo ed è preferibile. Si ricorre ad aria-readonly per i widget personalizzati: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" e role="textbox" (custom).

Confronto con gli stati correlati:

• aria-readonly — raggiungibile con il focus, valore visibile e copiabile, valore inviato, valore non modificabile.
• aria-disabled — raggiungibile con il focus (rimane nell’ordine di tabulazione) ma non risponde agli input e, per convenzione, il valore non viene inviato.
• HTML disabled — rimosso dall’ordine di tabulazione, ignorato, non inviato.
• aria-hidden — rimosso dall’albero di accessibilità; si tratta di uno scopo diverso.

La scelta tra sola lettura e disabilitato è semantica: sola lettura significa «valore valido che si può vedere», disabilitato significa «non occuparsi di questo campo per ora».

Come mantenerlo sincronizzato

I valori validi sono "true" e "false". Il valore predefinito è "false" (o si omette l’attributo) sui controlli modificabili; si passa a "true" quando il campo diventa in sola lettura.

Con aria-readonly="true":

• Il controllo deve restare raggiungibile con il focus. Non impostare anche tabindex="-1".
• I gestori di click e tastiera non devono mutare il valore. La selezione e la copia del testo devono continuare a funzionare.
• Applicare uno stile al campo che distingua visivamente l’aspetto in sola lettura da quello modificabile — di solito uno sfondo diverso, nessun cursore di testo, nessuna affordance al passaggio del mouse.

Errori comuni

• Impostare aria-readonly su un <input> nativo usando contemporaneamente l’attributo HTML readonly. L’attributo nativo è sufficiente; il duplicato può desincronizzarsi.
• Usare aria-readonly su un elemento non-form come <p> o <div> — lo stato non ha significato in quel contesto.
• Impostare contemporaneamente aria-readonly="true" e aria-disabled="true". Occorre scegliere in base al fatto che il campo sia «valido ma bloccato» o «da ignorare per ora».
• Rendere un campo in sola lettura non raggiungibile con il focus (tramite tabindex="-1") — gli utenti di screen reader non possono più raggiungerlo per leggerne il valore.
• Nascondere visivamente il campo in sola lettura lasciandolo nell’ordine di tabulazione.

Esempio

<label for="order-id">Order ID</label>
<input
  id="order-id"
  type="text"
  value="ORD-83472"
  readonly
>

<!-- Widget personalizzato in cui l'attributo nativo non è disponibile -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>