Piekļūstamas veidlapas: etiķetes, norādes, kļūdu ziņojumi

Seši veiksmes kritēriji veidlapām

WCAG 2.2 ir pašreizējā W3C rekomendācija piekļūstamam tīmekļa saturam. Veidlapas tekstiem vissvarīgākie ir seši tās veiksmes kritēriji:

• 1.3.1 Informācija un attiecības (A līmenis): tas, ko parāda izkārtojums, piemēram, kura etiķete pieder kuram laukam, ir pieejams arī kodā vai tekstā.
• 1.3.5 Ievades mērķa noteikšana (AA līmenis): lauki, kuros prasa informāciju par lietotāju, piemēram, vārdu vai e-pastu, kodā norāda savu mērķi.
• 3.3.1 Kļūdu identifikācija (A līmenis): ja ievades kļūda tiek atklāta automātiski, lauks tiek nosaukts un kļūda aprakstīta tekstā.
• 3.3.2 Etiķetes vai norādījumi (A līmenis): ja saturā jāievada dati, ir dotas etiķetes vai norādījumi.
• 3.3.3 Kļūdu labošanas ieteikums (AA līmenis): ja kļūda ir atklāta un labojums ir zināms, to iesaka, ja vien tas neapdraud drošību vai satura mērķi.
• 4.1.2 Nosaukums, loma, vērtība (A līmenis): katram vadīklas elementam ir nosaukums un loma, ko programmatūra var nolasīt.

Katram laukam vajadzīga redzama etiķete

Etiķete pasaka, kas jāieraksta laukā, un tā paliek redzama, kamēr lietotājs raksta. HTML kodā savieno label elementu ar lauku: etiķetes for atribūtam ir tieši tāda pati vērtība kā lauka id. Tad ekrāna lasītāji nolasa etiķeti kopā ar lauku, un klikšķis uz etiķetes ieliek kursoru laukā. Poga savu etiķeti iegūst no sava teksta, un “Nosūtīt ziņu” pasaka vairāk nekā “Iesniegt”. Etiķetes parasti atrodas pa labi no radiopogām un izvēles rūtiņām un pa kreisi no citiem laukiem vai virs tiem; etiķetes virs laukiem aizņem mazāk vietas platumā.

Vietturis nav etiķete

Pelēkais teksts tukšā laukā izskatās pēc etiķetes, bet tā nav. W3C nosauc problēmas:

• Tas pazūd, tiklīdz kāds sāk rakstīt, tāpēc pirms nosūtīšanas ir grūtāk pārbaudīt ievadīto.
• Pārlūki to bieži rāda gaišā krāsā ar pārāk mazu kontrastu.
• Ekrāna lasītāji to neuzskata par etiķeti, un atbalsts atšķiras.

Izmanto vietturi labākajā gadījumā piemēram, un visu svarīgo ieliec etiķetē vai norādē.

Norādes un obligātie lauki

• Noteikumus ieliec norādē: datuma formātu, klienta numura garumu, kas vajadzīgs parolei. HTML kodā norādi var savienot ar aria-describedby, lai ekrāna lasītāji to nolasītu pēc etiķetes.
• Pasaki, kuri lauki ir obligāti un kuri nav obligāti. Ja izmanto zvaigznīti, paskaidro to vienreiz veidlapas sākumā.
• Norādījumus visai veidlapai ieliec pirms veidlapas, piemēram, par laika ierobežojumu.
• Norādes raksti īsas. Pārāk daudz norādījumu padara veidlapu grūtāku, nevis vieglāku.

Sagrupē saistītos laukus

Radiopogas un izvēles rūtiņas, kas pieder kopā, grupē ar fieldset elementu, un legend elements nosauc grupu, piemēram, “Kā ar tevi sazināties?”. W3C norāda, ka radiopogu grupas vienmēr jāgrupē šādi. Raksti legend īsu, jo daži ekrāna lasītāji to nolasa pie katra lauka. Grupas palīdz arī laukiem ar vienādu etiķeti, piemēram, ielai piegādes un rēķina adresē.

autocomplete: ļauj pārlūkam palīdzēt

Laukiem, kuros prasa informāciju par lietotāju, 1.3.5 prasa, lai to mērķi varētu noteikt kodā. WCAG 2.2 ir šo mērķu saraksts, kas balstīts uz HTML specifikācijas automātiskās aizpildes sadaļu, piemēram, name, given-name, family-name, email, tel, street-address un postal-code. HTML kodā tos iestata ar autocomplete atribūtu, piemēram, autocomplete="email". Tad pārlūki var aizpildīt saglabātās vērtības, un tas ietaupa rakstīšanu. Laukiem, kas nav par lietotāju, mērķis nav vajadzīgs.

Kļūdu ziņojumi, kas palīdz

Kļūdas ziņojumam ir trīs uzdevumi: nosaukt lauku, pateikt, kas ir nepareizi, un pateikt, kā to izlabot. 3.3.1 prasa pirmos divus tekstā, tāpēc ar sarkanu apmali vai ikonu vien nepietiek. 3.3.3 prasa labojumu, ja tas ir zināms.

• Rādi ziņojumu blakus laukam un savieno to ar aria-describedby, lai ekrāna lasītāji to nolasītu kopā ar lauku.
• Pēc nosūtīšanas augšpusē, pirms veidlapas, zem skaidra virsraksta parādi visu kļūdu sarakstu. Katrs ieraksts nosauc lauku, problēmu un labojumu un ved uz lauku.
• Atjaunini arī lapas nosaukumu, piemēram, “2 kļūdas – Saziņas veidlapa”, un pārvieto fokusu uz pirmo lauku ar kļūdu.
• Saglabā to, ko lietotājs jau ievadījis. Tas ir mūsu padoms, nevis WCAG noteikums: ja pēc vienas kļūdas viss jāraksta no jauna, cilvēki padodas.

Pārbaudi savu veidlapu ar Do4U

Rīks “Veidlapu teksti” pārbauda tīmekļa veidlapas tekstus. Tu ielīmē veidlapas HTML vai ievadi lapas adresi un vari pievienot kļūdu ziņojumus, ko tava veidlapa rāda. Kods nolasa katru lauku: tā etiķeti un to, no kurienes etiķete nāk, norādes, vietturus, obligātos laukus, autocomplete vērtības un radiopogu vai izvēles rūtiņu grupas. Tas atrod tādas problēmas kā lauks bez etiķetes, vietturis kā vienīgā etiķete, obligāti lauki, ko teksts nemin, trūkstošas autocomplete vērtības un neskaidri kļūdu ziņojumi, katru ar tā veiksmes kritēriju. AI iesaka skaidru etiķeti, īsu norādi un kļūdas ziņojumu, kas nosauc lauku un pasaka, kā izlabot ievadi. Kods pārbauda katru ieteikumu un no tavas veidlapas izveido uzlabotu HTML melnrakstu.

Do4U atrod norādes un izveido melnrakstu, tu pārbaudi un izlem. Rīks pārbauda marķējumu, nevis tavus stilus, skriptus vai lietošanu ar tastatūru, un tas nepasaka, vai tava veidlapa ir piekļūstama. Pārbaudi uzlaboto veidlapu ar tastatūru un ekrāna lasītāju.