aria-readonly

Hvornår bruges det

På en formularkontrol, hvis værdi brugeren kan se og kopiere men ikke ændre — en ordreopsummeringslinje brugeren ikke bør redigere, en reviewers kommentar i et flertrins-godkendelsesforløb, et genereret id. Brugeren kan stadig tabbe til det, markere teksten og læse den; formularen sender stadig værdien med.

Bruger du <input>, <textarea> eller <select>, håndterer HTML-attributten readonly alt dette nativt og foretrækkes. Brug aria-readonly på brugerdefinerede widgets: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" og role="textbox" (brugerdefineret).

Sammenlignet med beslægtede tilstande:

• aria-readonly — fokuserbar, værdi synlig og kopierbar, værdi indsendt, værdi kan ikke ændres.
• aria-disabled — fokuserbar (forbliver i tab-rækkefølgen), men reagerer ikke på input, og indsendes typisk ikke.
• HTML disabled — fjernet fra tab-rækkefølgen, ignoreret og ikke indsendt.
• aria-hidden — fjernet fra tilgængelighedstræet; det er et andet formål.

Valget mellem skrivebeskyttet og deaktiveret er semantisk: skrivebeskyttet betyder “gyldig værdi du kan se”, deaktiveret betyder “brug ikke tid på dette nu”.

Sådan holdes det synkroniseret

Gyldige værdier er "true" og "false". Standard til "false" (eller udelad) på redigerbare kontroller; skift til "true" når feltet bliver skrivebeskyttet.

Når aria-readonly="true":

• Kontrollen skal forblive fokuserbar. Sæt ikke også tabindex="-1".
• Klik- og tastaturhåndterere bør ikke ændre værdien. At markere og kopiere tekst skal stadig virke.
• Stil feltet, så den skrivebeskyttede fremtoning er visuelt adskilt fra en redigerbar — normalt en anden baggrund, ingen markør, ingen hover-affordance.

Typiske fejl

• At sætte aria-readonly på et nativt <input> og samtidig bruge HTML-attributten readonly. Den native attribut er tilstrækkelig; dubletten kan drive ud af synk.
• At bruge aria-readonly på et ikke-formularelement som <p> eller <div> — tilstanden er meningsløs der.
• At sætte aria-readonly="true" og aria-disabled="true" samtidigt. Vælg én ud fra om feltet er “gyldigt men låst” eller “ignorer for nu”.
• At gøre et skrivebeskyttet felt ufokuserbart (med tabindex="-1") — skærmlæserbrugere kan ikke nå det for at læse værdien.
• At skjule det skrivebeskyttede felt visuelt men beholde det i tab-rækkefølgen.

Eksempel

<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>