Tila Widgetin tila

`aria-invalid`

Ilmaisee, että lomakeohjauselementti on epäonnistunut validoinnissa. Yhdistä aria-describedby-attribuuttiin, joka osoittaa ihmisluettavaan virheilmoitukseen, jotta ruudunlukuohjelma ilmoittaa sekä virheellisen tilan että syyn.

Milloin käyttää

Syöttökentässä, tekstialueessa, yhdistelmäruudussa, listboxissa tai muussa lomakewidgetissä, jonka nykyinen arvo on epäonnistunut validoinnissa. Aseta aria-invalid="true" sen jälkeen, kun käyttäjällä on ollut mahdollisuus syöttää arvo — yleensä kentästä poistuttaessa tai lomakkeen lähetyksessä. Sen asettaminen heti renderöinnin yhteydessä ennen käyttäjän kirjoitusta on häiritsevää ja ilmoittaa tyhjät pakolliset kentät virheellisiksi ennen kuin käyttäjä on tehnyt mitään.

Yhdistä se varsinaiseen virheilmoitukseen. Kaava on:

Renderöi näkyvä virheilmoitus omalla id-attribuutillaan.
Aseta aria-invalid="true" syöttökentässä.
Osoita aria-describedby-attribuutilla virheilmoituksen id:hen.

Ruudunlukuohjelmat ilmoittavat tällöin sekä virheellisen tilan että selityksen: “Sähköposti, muokkaus, virheellinen syöte, syötä kelvollinen sähköpostiosoite”.

Synkronoinnissa pysyminen

Kelvolliset arvot ovat "true", "false", "grammar" ja "spelling". Käytännössä yleiset ovat "true" ja "false". "grammar" ja "spelling" käytetään rikkaan tekstieditorin tietyn alueen merkitsemiseen; useimmat lomakeprosessit eivät niitä tarvitse.

Oletuksena käytä "false" (tai jätä pois). Kun validointi epäonnistuu, aseta "true" ja näytä virheilmoitus. Kun käyttäjä korjaa kentän, tyhjennä molemmat — vaihda aria-invalid takaisin "false":ksi ja poista tai piilota virheilmoitus — samaan aikaan.

HTML-attribuutti required ja CSS:n :invalid-pseudoluokka toimivat itsenäisesti. aria-invalid on bitti, jonka ruudunlukuohjelmat kuluttavat; muut ovat selaimille ja tyylittelylle. Pidä ne synkronoituna.

Yleisiä virheitä

aria-invalid="true" asettaminen ennen kuin käyttäjällä on ollut mahdollisuus olla vuorovaikutuksessa kentän kanssa.
Kentän merkitseminen virheelliseksi ilman aria-describedby-attribuuttia ja näkyvää virheilmoitusta — ruudunlukuohjelma ilmoittaa “virheellinen” ilman selitystä.
aria-invalid="true" jättäminen paikoilleen, kun käyttäjä on korjannut arvon.
aria-describedby-attribuutin osoittaminen tyhjään säiliöön, jolloin virheilmoitus on hiljainen.
aria-invalid-attribuutin käyttäminen <fieldset>-elementissä tai muissa ei-syöttökentän säiliöissä — se ei ole siellä merkityksellinen.
Pelkästään värin käyttäminen virhetilan ilmaisemiseen — aria-invalid auttaa ruudunlukuohjelmia; tarvitset silti näkyvän selitteen tai kuvakkeen näkeville käyttäjille (WCAG 1.4.1).

Esimerkki

<label for="email">Email address</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Please enter a valid email address.</p>