aria-readonly

Milloin käyttää

Lomakekentässä, jonka arvon käyttäjä voi nähdä ja kopioida mutta ei muuttaa — esimerkiksi tilausvahvistuksen rivi, tarkastajan kommentti monivaiheisessa hyväksymisprosessissa tai automaattisesti generoitu tunniste. Kenttään voi silti siirtyä välilehdellä, valita sen tekstin ja lukea sen; lomake lähettää myös sen arvon.

Jos käytössä on <input>, <textarea> tai <select>, HTML:n readonly-attribuutti hoitaa kaiken tämän natiivisti ja on ensisijainen vaihtoehto. aria-readonly otetaan käyttöön vain mukautetuissa widgeteissä: role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" ja role="textbox" (mukautettu).

Vertailu lähisukuisiin tiloihin:

• aria-readonly — kohdistettavissa, arvo näkyvissä ja kopioitavissa, arvo lähetetään, arvoa ei voi muuttaa.
• aria-disabled — kohdistettavissa (pysyy välilehtijärjestyksessä), mutta ei reagoi syötteisiin, eikä tavanomaisesti lähetä arvoaan.
• HTML disabled — poistettu kokonaan välilehtijärjestyksestä, ohitetaan, ei lähetetä.
• aria-hidden — poistettu saavutettavuuspuusta; tämä palvelee eri tarkoitusta.

Valinta read-only- ja disabled-tilan välillä on semanttinen: read-only tarkoittaa “kelvollinen arvo, jonka voit nähdä”, disabled tarkoittaa “älä välitä tästä juuri nyt”.

Pitäminen synkronissa

Kelvolliset arvot ovat "true" ja "false". Oletusarvona on "false" (tai attribuutti jätetään pois) muokattavissa kentissä; vaihdetaan "true":ksi, kun kentästä tulee vain luku.

Kun aria-readonly="true":

• Kentän on pysyttävä kohdistettavissa. Älä aseta myös tabindex="-1".
• Klikkaus- ja näppäimistökäsittelijöiden ei tule muuttaa arvoa. Tekstin valitsemisen ja kopioimisen on silti toimittava.
• Muotoile kenttä niin, että vain luku -ulkoasu on visuaalisesti selkeästi erilainen kuin muokattavan kentän ulkoasu — yleensä erilainen taustaväri, ei kursoria, ei viemistä reagoivaa efektiä.

Yleisimmät virheet

• aria-readonly:n asettaminen natiiviin <input>-elementtiin samalla, kun käytetään HTML:n readonly-attribuuttia. Natiivi attribuutti riittää; kaksoiskappaleet voivat ajautua eri tilaan.
• aria-readonly:n käyttäminen ei-lomakeelementissä, kuten <p> tai <div> — tilalla ei ole siellä merkitystä.
• aria-readonly="true" ja aria-disabled="true" asettaminen samanaikaisesti. Valitse toinen sen perusteella, onko kenttä “kelvollinen mutta lukittu” vai “jätä huomiotta toistaiseksi”.
• Read-only-kentän tekeminen ei-kohdistettavaksi (tabindex="-1") — ruudunlukuohjelman käyttäjät eivät enää pääse kentälle lukemaan sen arvoa.
• Read-only-kentän piilottaminen visuaalisesti mutta pitäminen välilehtijärjestyksessä.

Esimerkki

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

<!-- Mukautettu widget, jossa natiivi attribuutti ei ole käytettävissä -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>