Prieinamos formos: etiketės, užuominos ir klaidos

Šeši sėkmės kriterijai formoms

WCAG 2.2 yra dabartinė W3C rekomendacija dėl prieinamo interneto turinio. Formos tekstams svarbiausi šeši jos sėkmės kriterijai:

• 1.3.1 Info and Relationships (A lygis): tai, ką rodo išdėstymas, pavyzdžiui, kuri etiketė priklauso kuriam laukui, taip pat pasiekiama kode arba tekste.
• 1.3.5 Identify Input Purpose (AA lygis): laukai, kuriuose prašoma informacijos apie naudotoją, pavyzdžiui, vardo ar el. pašto, kode atskleidžia savo paskirtį.
• 3.3.1 Error Identification (A lygis): jei įvesties klaida aptinkama automatiškai, laukas įvardijamas, o klaida aprašoma tekstu.
• 3.3.2 Labels or Instructions (A lygis): kai turinys reikalauja naudotojo įvesties, pateikiamos etiketės arba instrukcijos.
• 3.3.3 Error Suggestion (AA lygis): jei klaida aptinkama ir žinomas pataisymas, jis pasiūlomas, nebent tai keltų pavojų saugumui ar turinio paskirčiai.
• 4.1.2 Name, Role, Value (A lygis): kiekvienas valdiklis turi pavadinimą ir vaidmenį, kuriuos gali perskaityti programinė įranga.

Kiekvienam laukui reikia matomos etiketės

Etiketė pasako, kas turi būti lauke, ir lieka matoma, kol naudotojas rašo. HTML kode susiek label elementą su lauku: etiketės atributas for turi lygiai tokią pačią reikšmę kaip lauko id. Tada ekrano skaitytuvai perskaito etiketę kartu su lauku, o spustelėjus etiketę žymeklis atsiduria lauke. Mygtukas etiketę gauna iš savo teksto, ir „Siųsti žinutę“ pasako daugiau nei „Pateikti“. Etiketės paprastai būna į dešinę nuo akučių ir žymimųjų langelių, o kitų laukų – kairėje arba virš jų; etiketės virš laukų užima mažiau vietos pločiu.

Vietos rezervavimo tekstas nėra etiketė

Pilkas tekstas tuščiame lauke atrodo kaip etiketė, bet ja nėra. W3C įvardija problemas:

• Jis išnyksta, vos tik kas nors pradeda rašyti, todėl sunkiau patikrinti įvestis prieš siunčiant.
• Naršyklės jį dažnai rodo šviesia spalva su per mažu kontrastu.
• Ekrano skaitytuvai jo nelaiko etikete, o palaikymas skiriasi.

Vietos rezervavimo tekstą naudok daugiausia pavyzdžiui, o viską, kas svarbu, perkelk į etiketę ar užuominą.

Užuominos ir privalomi laukai

• Taisykles perkelk į užuominą: datos formatą, kliento numerio ilgį, ko reikia slaptažodžiui. HTML kode užuominą gali susieti su aria-describedby, kad ekrano skaitytuvai ją perskaitytų po etiketės.
• Nurodyk, kurie laukai privalomi, o kurie ne. Jei naudoji žvaigždutę, vieną kartą paaiškink ją formos pradžioje.
• Instrukcijas visai formai pateik prieš formą, pavyzdžiui, apie laiko ribą.
• Užuominos turi būti trumpos. Per daug instrukcijų formą daro sunkesnę, o ne lengvesnę.

Grupuok susijusius laukus

Kartu priklausančios akutės ir žymimieji langeliai grupuojami elementu fieldset, o elementas legend įvardija grupę, pavyzdžiui, „Kaip su tavimi susisiekti?“. W3C nurodo, kad akučių grupės visada turėtų būti grupuojamos šitaip. Legend turi būti trumpas, nes kai kurie ekrano skaitytuvai jį perskaito su kiekvienu lauku. Grupės padeda ir tada, kai laukai turi tą pačią etiketę, pavyzdžiui, gatvė pristatymo ir atsiskaitymo adrese.

autocomplete: leisk naršyklei padėti

Laukams, kuriuose prašoma informacijos apie naudotoją, 1.3.5 reikalauja, kad jų paskirtį būtų galima nustatyti kode. WCAG 2.2 turi šių paskirčių sąrašą, pagrįstą HTML specifikacijos automatinio pildymo skyriumi, pavyzdžiui, name, given-name, family-name, email, tel, street-address ir postal-code. HTML kode jas nustatai atributu autocomplete, pavyzdžiui, autocomplete="email". Tada naršyklės gali užpildyti išsaugotas reikšmes, ir nereikia tiek rašyti. Laukams, kurie nėra apie naudotoją, paskirties nereikia.

Klaidų pranešimai, kurie padeda

Klaidos pranešimas turi tris užduotis: įvardyti lauką, pasakyti, kas negerai, ir pasakyti, kaip tai ištaisyti. 3.3.1 reikalauja pirmųjų dviejų, tekstu, todėl vien raudono rėmelio ar piktogramos nepakanka. 3.3.3 reikalauja pataisymo, kai jis žinomas.

• Rodyk pranešimą šalia lauko ir susiek jį su aria-describedby, kad ekrano skaitytuvai jį perskaitytų kartu su lauku.
• Po siuntimo viršuje, prieš formą, po aiškia antrašte parodyk visų klaidų sąrašą. Kiekvienas įrašas įvardija lauką, problemą ir pataisymą bei nukreipia į lauką.
• Atnaujink ir puslapio pavadinimą, pavyzdžiui, „2 klaidos – Kontaktų forma“, ir perkelk fokusą į pirmąjį lauką su klaida.
• Išsaugok tai, ką naudotojas jau įvedė. Tai mūsų patarimas, o ne WCAG taisyklė: jei po vienos klaidos tenka viską įvesti iš naujo, žmonės pasiduoda.

Patikrink savo formą su Do4U

Įrankis „Formų tekstai“ patikrina interneto formos tekstus. Įklijuoji formos HTML arba nurodai puslapio adresą ir gali pridėti klaidų pranešimus, kuriuos rodo tavo forma. Kodas perskaito kiekvieną lauką: jo etiketę ir iš kur ji gaunama, užuominas, vietos rezervavimo tekstus, privalomus laukus, autocomplete reikšmes ir akučių ar žymimųjų langelių grupes. Jis randa tokias problemas kaip laukas be etiketės, vietos rezervavimo tekstas kaip vienintelė etiketė, privalomi laukai, kurių tekstas nemini, trūkstamos autocomplete reikšmės ir neaiškūs klaidų pranešimai, kiekvieną su sėkmės kriterijumi. DI pasiūlo aiškią etiketę, trumpą užuominą ir klaidos pranešimą, kuris įvardija lauką ir pasako, kaip ištaisyti įvestį. Kodas patikrina kiekvieną pasiūlymą ir iš tavo formos sukuria patobulintą HTML juodraštį.

Do4U randa užuominas ir sukuria juodraštį, o tu tikrini ir sprendi. Įrankis tikrina žymėjimą, o ne tavo stilius, scenarijus ar naudojimą klaviatūra, ir nepasako, ar tavo forma prieinama. Išbandyk patobulintą formą su klaviatūra ir ekrano skaitytuvu.