Status Widgetstatus

`aria-readonly`

Geeft aan dat de waarde van een formulierbesturingselement niet bewerkbaar is, maar het element nog steeds bedienbaar is — focusbaar, kopieerbaar en meegestuurd bij het indienen. Verschilt van aria-disabled, dat het element volledig inoperabel maakt.

Wanneer te gebruiken

Op een formulierbesturingselement waarvan de gebruiker de waarde kan zien en kopiëren maar niet wijzigen — een regelsamenvatting van een bestelling die niet bewerkt mag worden, de opmerking van een beoordelaar in een goedkeuringsproces met meerdere stappen, een gegenereerde identifier. De gebruiker kan er nog steeds naartoe tabben, de tekst selecteren en lezen; het formulier zal de waarde nog steeds meesturen bij het indienen.

Bij gebruik van <input>, <textarea> of <select> handelt het HTML-attribuut readonly dit alles native af en verdient dat de voorkeur. Gebruik aria-readonly bij aangepaste widgets: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" en role="textbox" (aangepast).

Vergelijking met gerelateerde toestanden:

aria-readonly — focusbaar, waarde zichtbaar en kopieerbaar, waarde meegestuurd, waarde kan niet wijzigen.
aria-disabled — focusbaar (blijft in de tabvolgorde) maar reageert niet op invoer, en wordt conventioneel niet meegestuurd.
HTML disabled — volledig uit de tabvolgorde verwijderd, genegeerd, niet meegestuurd.
aria-hidden — verwijderd uit de toegankelijkheidsstructuur; dit is een ander doel.

De keuze tussen alleen-lezen en uitgeschakeld is semantisch: alleen-lezen betekent “geldige waarde die u kunt zien”, uitgeschakeld betekent “maak u hier nu geen zorgen over”.

Synchronisatie bewaken

Geldige waarden zijn "true" en "false". Standaard op "false" (of weglaten) bij bewerkbare besturingselementen; schakel over naar "true" wanneer het veld alleen-lezen wordt.

Wanneer aria-readonly="true":

Het besturingselement moet focusbaar blijven. Stel ook geen tabindex="-1" in.
Klik- en toetsenbordhandlers mogen de waarde niet muteren. Tekst selecteren en kopiëren moet nog steeds werken.
Stijl het veld zodanig dat de alleen-lezen weergave visueel onderscheidbaar is van een bewerkbaar veld — gewoonlijk een andere achtergrond, geen cursor, geen zweefeffect.

Veelvoorkomende fouten

aria-readonly instellen op een native <input> terwijl ook het HTML-attribuut readonly wordt gebruikt. Het native attribuut is voldoende; het duplicaat kan gaan afwijken.
aria-readonly gebruiken op een niet-formulierelement zoals een <p> of <div> — de toestand heeft daar geen betekenis.
Gelijktijdig aria-readonly="true" én aria-disabled="true" instellen. Kies één op basis van of het veld “geldig maar vergrendeld” of “nu niet relevant” is.
Een alleen-lezen veld niet-focusbaar maken (met tabindex="-1") — schermlezergebruikers kunnen het dan niet meer bereiken om de waarde te lezen.
Het alleen-lezen veld visueel verbergen maar in de tabvolgorde houden.

Voorbeeld

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