Tillstånd Widgettillstånd

`aria-readonly`

Anger att ett formulärkontrolls värde inte kan redigeras men att kontrollen fortfarande är operativ — fokuserbar, kopieringsbar och skickas med formuläret. Skiljer sig från aria-disabled, som gör kontrollen inoperativ.

När du ska använda det

På ett formulärfält vars värde användaren kan se och kopiera men inte ändra — en ordersammanfattningsrad som inte ska redigeras, en recensents kommentar i ett godkännandeflöde med flera steg, en genererad identifierare. Användaren kan fortfarande tabba till det, markera texten och läsa den; formuläret skickar ändå fältets värde.

Om du använder <input>, <textarea> eller <select> hanterar HTML-attributet readonly allt detta nativt och bör föredras. Använd aria-readonly på anpassade widgetar: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" och role="textbox" (anpassade).

Jämfört med relaterade tillstånd:

aria-readonly — fokuserbar, värdet synligt och kopieringsbart, värdet skickas, värdet kan inte ändras.
aria-disabled — fokuserbar (finns kvar i tabbordningen) men svarar inte på inmatning, och skickas konventionellt inte.
HTML disabled — tas bort från tabbordningen helt, ignoreras, skickas inte.
aria-hidden — tas bort från tillgänglighetsträdet; det är ett annat syfte.

Valet mellan skrivskyddad och inaktiverad är semantiskt: skrivskyddad betyder “giltigt värde du kan se”, inaktiverad betyder “bry dig inte om det här just nu”.

Hur du håller det synkroniserat

Giltiga värden är "true" och "false". Ange "false" (eller utelämna) på redigerbara fält; växla till "true" när fältet blir skrivskyddat.

När aria-readonly="true":

Kontrollen måste förbli fokuserbar. Ange inte tabindex="-1" samtidigt.
Klick- och tangentbordshanterare ska inte ändra värdet. Att markera och kopiera text måste fortfarande fungera.
Utforma fältet så att det skrivskyddade utseendet visuellt skiljer sig från ett redigerbart — vanligtvis annan bakgrund, ingen markör, ingen hover-indikator.

Vanliga fel

Att sätta aria-readonly på ett nativt <input> och samtidigt använda HTML-attributet readonly. Det nativa attributet räcker; dubbleringar kan glida isär.
Att använda aria-readonly på ett icke-formulärelement som <p> eller <div> — tillståndet har ingen betydelse där.
Att sätta aria-readonly="true" och aria-disabled="true" samtidigt. Välj ett baserat på om fältet är “giltigt men låst” eller “ignorera för tillfället”.
Att göra ett skrivskyddat fält ofokuserbart (med tabindex="-1") — skärmläsaranvändare kan inte längre nå det för att läsa värdet.
Att dölja det skrivskyddade fältet visuellt men behålla det i tabbordningen.

Exempel

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

<!-- Custom widget where the native attribute isn't available -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>