aria-required

Milloin käyttää

Vain silloin, kun HTML:n required-attribuutti ei ole käytettävissä. Natiiveissa lomakekentissä — <input>, <select>, <textarea> — tulisi käyttää required-attribuuttia. HTML-attribuutti luetaan jokaisessa ruudunlukuohjelmassa, osallistuu selaimen lomakevalidointiin ja aktivoi :required-CSS-pseudoluokan. aria-required ei tee mitään näistä itsestään; se on puhtaasti ilmoitus.

Perusteltuja tapauksia aria-required:lle:

• Mukautettu role="combobox", joka on rakennettu <div>-elementistä tai tyylitellystä <input>-kentästä, jossa validointi on itse toteutettu.
• role="radiogroup", jossa koko ryhmä on pakollinen (et voi laittaa required-attribuuttia <div>-elementtiin).
• Mukautettu päivämäärävalitsin, tiedostovalitsin tai arvosanawidget, joka ei ole natiivi kenttä.

Jos voit käyttää HTML:n required-attribuuttia, käytä sitä.

Toimintatapa

Totuusarvo. aria-required="true" saa avustavan teknologian ilmoittamaan “pakollinen” (tai “täytettävä”, ruudunlukuohjelmasta riippuen) kentän nimen ja roolin yhteydessä. aria-required="false" vastaa attribuutin poisjättämistä eikä juuri koskaan ole tarpeen.

aria-required ei estä lomakkeen lähettämistä. Se ei lisää punaista tähteä. Se ei aktivoi CSS-pseudoluokkaa. Se on puhtaasti signaali avustavalle teknologialle. Validointilogiikka, virheilmoitukset ja visuaalinen pakollinen-kenttämerkintä ovat edelleen kehittäjän vastuulla.

Visuaalisen pakollinen-merkinnän (*, sana “pakollinen” tms.) tulisi näkyä myös saavutettavassa nimessä — joko näkyvässä nimiketekstissä tai kuvauksessa — jotta näkevä käyttäjä ja avustavaa teknologiaa käyttävä saavat saman tiedon.

Yleisimmät virheet

• aria-required="true":n käyttäminen natiivissa <input>-kentässä HTML:n required-attribuutin sijaan. Toimii, mutta selaimen validointi ja :required-tyyli menetetään turhaan.
• aria-required="true":n asettaminen ei-lomakesäätimeen — painikkeeseen, otsikkoon tai roolittomaan div-elementtiin. Attribuutti ohitetaan.
• Visuaalisen pakollinen-merkinnän unohtaminen. Näkevä käyttäjä näkee merkitsemättömän kentän; avustavaa teknologiaa käyttävä kuulee “pakollinen”. WCAG:n onnistumiskriteeri 1.3.3 rikkoontuu.
• Kentän merkitseminen pakolliseksi ARIAssa mutta sen ohittaminen todellisessa lomakkeen lähetyksen validointilogiikassa. Ilmoitus sanoo “pakollinen”; palvelin hyväksyy tyhjät kentät.
• aria-required:n kytkeminen aria-invalid="true":en liian aikaisin. Kenttä on virheellinen vasta, kun käyttäjä on yrittänyt lähettää ja jättänyt kentän tyhjäksi, ei sivun latautuessa.
• Näkyvän *-merkinnän lokalisointi mutta ruudunlukuohjelman tekstin unohtaminen nimessä, jolloin ne eivät vastaa toisiaan.

Esimerkki

<!-- Natiivi kenttä: suosi HTML-attribuuttia -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Mukautettu combobox, jossa HTML:n required ei ole käytettävissä -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>