Ligipääsetavad vormid: sildid, vihjed ja veateated

Kuus edukriteeriumi vormide jaoks

WCAG 2.2 on W3C kehtiv soovitus ligipääsetava veebisisu kohta. Vormi tekstide jaoks on kõige olulisemad kuus selle edukriteeriumi:

• 1.3.1 Teave ja seosed (tase A): see, mida paigutus näitab, näiteks milline silt millise välja juurde kuulub, on kättesaadav ka koodis või tekstis.
• 1.3.5 Sisestuse eesmärgi tuvastamine (tase AA): väljad, mis küsivad kasutaja kohta teavet, näiteks nime või e-posti aadressi, näitavad oma eesmärki koodis.
• 3.3.1 Vea tuvastamine (tase A): kui sisestusviga tuvastatakse automaatselt, nimetatakse välja ja viga kirjeldatakse tekstina.
• 3.3.2 Sildid või juhised (tase A): kui sisu nõuab kasutajalt sisestust, on olemas sildid või juhised.
• 3.3.3 Veaparandussoovitus (tase AA): kui viga tuvastatakse ja parandus on teada, pakutakse see välja, välja arvatud juhul, kui see seaks ohtu turvalisuse või sisu eesmärgi.
• 4.1.2 Nimi, roll, väärtus (tase A): igal juhtelemendil on nimi ja roll, mida tarkvara saab lugeda.

Iga väli vajab nähtavat silti

Silt ütleb, mis välja kuulub, ja jääb nähtavaks ka siis, kui kasutaja kirjutab. HTML-is ühenda label-element väljaga: sildi for-atribuudil on täpselt sama väärtus kui välja id-l. Ekraanilugejad loevad siis sildi koos väljaga ette ja klõps sildil viib kursori välja. Nupp saab oma sildi oma tekstist ning „Saada sõnum“ ütleb rohkem kui „Esita“. Raadionuppude ja märkeruutude puhul on sildid tavaliselt paremal, teiste väljade puhul vasakul või kohal; väljade kohal olevad sildid vajavad laiuses vähem ruumi.

Kohatäide ei ole silt

Hall tekst tühjas väljas näeb välja nagu silt, kuid ei ole seda. W3C nimetab probleemid:

• See kaob kohe, kui keegi kirjutama hakkab, nii et sisestusi on enne saatmist raskem kontrollida.
• Brauserid näitavad seda sageli heleda värviga ja liiga väikese kontrastiga.
• Ekraanilugejad ei käsitle seda sildina ja tugi on erinev.

Kasuta kohatäidet kõige rohkem näite jaoks ja pane kõik oluline sildile või vihjesse.

Vihjed ja kohustuslikud väljad

• Pane reeglid vihjesse: kuupäeva vorming, kliendinumbri pikkus, mida parool vajab. HTML-is saad vihje ühendada aria-describedby abil, nii et ekraanilugejad loevad selle pärast silti ette.
• Ütle, millised väljad on kohustuslikud ja millised valikulised. Kui kasutad tärni, selgita seda üks kord vormi alguses.
• Pane kogu vormi puudutavad juhised enne vormi, näiteks ajapiirangu kohta.
• Hoia vihjed lühikesed. Liiga palju juhiseid teeb vormi raskemaks, mitte lihtsamaks.

Rühmita kokku kuuluvad väljad

Kokku kuuluvad raadionupud ja märkeruudud rühmitatakse elemendiga fieldset ning element legend nimetab rühma, näiteks „Kuidas peaksime sinuga ühendust võtma?“. W3C ütleb, et raadionuppude rühmad tuleks alati nii rühmitada. Hoia legend lühike, sest mõned ekraanilugejad loevad selle iga välja juures ette. Rühmad aitavad ka sama sildiga väljade puhul, näiteks tänav tarne- ja arveldusaadressis.

autocomplete: lase brauseril aidata

Väljade puhul, mis küsivad kasutaja kohta teavet, nõuab 1.3.5, et nende eesmärk oleks koodis tuvastatav. WCAG 2.2-s on nende eesmärkide loend, mis põhineb HTML-i spetsifikatsiooni automaatse täitmise jaotisel, näiteks name, given-name, family-name, email, tel, street-address ja postal-code. HTML-is määrad need atribuudiga autocomplete, näiteks autocomplete="email". Brauserid saavad siis täita salvestatud väärtused, mis säästab kirjutamist. Väljad, mis ei puuduta kasutajat, eesmärki ei vaja.

Veateated, mis aitavad

Veateatel on kolm ülesannet: nimetada väli, öelda, mis on valesti, ja öelda, kuidas seda parandada. 3.3.1 nõuab kahte esimest tekstina, nii et ainult punane ääris või ikoon ei piisa. 3.3.3 nõuab parandust, kui see on teada.

• Näita teadet välja kõrval ja ühenda see aria-describedby abil, nii et ekraanilugejad loevad selle koos väljaga ette.
• Pärast saatmist näita üleval, enne vormi, selge pealkirja all kõigi vigade loendit. Iga kirje nimetab välja, probleemi ja paranduse ning lingib väljale.
• Uuenda ka lehe pealkirja, näiteks „2 viga – Kontaktivorm“, ja vii fookus esimesele vigasele väljale.
• Säilita see, mille kasutaja on juba sisestanud. See on meie soovitus, mitte WCAG reegel: kui pärast üht viga tuleb kõik uuesti kirjutada, annavad inimesed alla.

Kontrolli oma vormi Do4U-ga

Tööriist Vormitekstid kontrollib veebivormi tekste. Kleebi vormi HTML või sisesta lehe aadress ning soovi korral lisa veateated, mida sinu vorm näitab. Kood loeb iga välja: selle sildi ja kust silt tuleb, vihjed, kohatäited, kohustuslikud väljad, autocomplete väärtused ning raadionuppude või märkeruutude rühmad. See leiab probleeme, näiteks sildita välja, kohatäite ainsa sildina, kohustuslikud väljad, mida tekst ei maini, puuduvad autocomplete väärtused ja ebamäärased veateated, igaühe juures selle edukriteerium. TI pakub välja selge sildi, lühikese vihje ja veateate, mis nimetab välja ja ütleb, kuidas sisestust parandada. Kood kontrollib iga ettepanekut ja koostab sinu vormist parandatud HTML-mustandi.

Do4U leiab vihjeid ja koostab mustandi, sina kontrollid ja otsustad. Tööriist kontrollib märgistust, mitte sinu stiile, skripte ega klaviatuurikasutust, ning ei ütle, kas sinu vorm on ligipääsetav. Proovi parandatud vormi klaviatuuri ja ekraanilugejaga.