Formoli aċċessibbli: tikketti, noti u messaġġi ta' żball

Sitt kriterji ta' suċċess għall-formoli

Il-WCAG 2.2 hija r-Rakkomandazzjoni attwali tal-W3C għal kontenut web aċċessibbli. Għat-testi ta' formola, sitta mill-kriterji ta' suċċess tagħha huma l-aktar importanti:

• 1.3.1 Info and Relationships (livell A): dak li juri t-tqassim, bħal liema tikketta tappartjeni għal liema qasam, huwa disponibbli wkoll fil-kodiċi jew fit-test.
• 1.3.5 Identify Input Purpose (livell AA): l-oqsma li jitolbu informazzjoni dwar l-utent, bħall-isem jew l-email, juru l-iskop tagħhom fil-kodiċi.
• 3.3.1 Error Identification (livell A): jekk żball fl-input jinstab awtomatikament, il-qasam jissemma u l-iżball jiġi deskritt fit-test.
• 3.3.2 Labels or Instructions (livell A): jingħataw tikketti jew istruzzjonijiet meta l-kontenut jeħtieġ input mill-utent.
• 3.3.3 Error Suggestion (livell AA): jekk jinstab żball u korrezzjoni tkun magħrufa, din tiġi ssuġġerita, sakemm dan ma jpoġġix f'riskju s-sigurtà jew l-iskop tal-kontenut.
• 4.1.2 Name, Role, Value (livell A): kull kontroll għandu isem u rwol li s-software jista' jaqra.

Kull qasam jeħtieġ tikketta viżibbli

Tikketta tgħid x'imur fil-qasam, u tibqa' viżibbli waqt li l-utent jikteb. Fl-HTML, qabbad l-element label mal-qasam: l-attribut for tat-tikketta għandu eżattament l-istess valur bħall-id tal-qasam. Imbagħad l-iscreen readers jaqraw it-tikketta mal-qasam, u klikk fuq it-tikketta jpoġġi l-cursor fil-qasam. Buttuna tieħu t-tikketta tagħha mit-test tagħha, u “Ibgħat il-messaġġ” jgħid aktar minn “Issottometti”. It-tikketti normalment ikunu fuq il-lemin tar-radio buttons u tal-checkboxes u fuq ix-xellug jew fuq nett ta' oqsma oħra; tikketti fuq nett tal-oqsma jieħdu inqas spazju fil-wisa'.

Placeholder mhuwiex tikketta

It-test griż ġewwa qasam vojt jidher qisu tikketta, iżda mhuwiex. Il-W3C isemmi l-problemi:

• Jisparixxi hekk kif xi ħadd jibda jikteb, għalhekk huwa iktar diffiċli li tiċċekkja dak li ktibt qabel tibgħat.
• Il-browsers spiss juruh b'kulur ċar b'kuntrast baxx wisq.
• L-iscreen readers ma jittrattawhx bħala tikketta, u s-sapport ivarja.

Uża placeholder l-aktar għal eżempju, u poġġi kull ħaġa importanti fit-tikketta jew f'nota.

Noti u oqsma obbligatorji

• Poġġi r-regoli f'nota: il-format tad-data, it-tul ta' numru tal-klijent, x'jeħtieġ password. Fl-HTML tista' tqabbad in-nota ma' aria-describedby, biex l-iscreen readers jaqrawha wara t-tikketta.
• Għid liema oqsma huma obbligatorji u liema mhumiex obbligatorji. Jekk tuża asterisk, spjegah darba fil-bidu tal-formola.
• Poġġi l-istruzzjonijiet għall-formola kollha qabel il-formola, pereżempju dwar limitu ta' żmien.
• Żomm in-noti qosra. Wisq istruzzjonijiet jagħmlu formola iktar diffiċli, mhux iktar faċli.

Iġbor flimkien l-oqsma relatati

Ir-radio buttons u l-checkboxes li jmorru flimkien jinġabru bl-element fieldset, u l-element legend isemmi l-grupp, pereżempju “Kif għandna nikkuntattjawk?”. Il-W3C jgħid li l-gruppi ta' radio buttons għandhom dejjem jinġabru b'dan il-mod. Żomm il-legend qasir, għax xi screen readers jaqrawh ma' kull qasam. Il-gruppi jgħinu wkoll ma' oqsma li għandhom l-istess tikketta, bħat-triq f'indirizz tal-kunsinna u f'indirizz tal-fatturazzjoni.

autocomplete: ħalli l-browser jgħin

Għall-oqsma li jitolbu informazzjoni dwar l-utent, il-1.3.5 jitlob li l-iskop tagħhom ikun jista' jiġi determinat fil-kodiċi. Il-WCAG 2.2 għandha lista ta' dawn l-iskopijiet, ibbażata fuq it-taqsima tal-autofill tal-ispeċifikazzjoni HTML, bħal name, given-name, family-name, email, tel, street-address u postal-code. Fl-HTML tissettjahom bl-attribut autocomplete, pereżempju autocomplete="email". Imbagħad il-browsers jistgħu jimlew valuri ssejvjati, u dan jiffranka l-ittajpjar. Oqsma li mhumiex dwar l-utent ma jeħtieġu l-ebda skop.

Messaġġi ta' żball li jgħinu

Messaġġ ta' żball għandu tliet xogħlijiet: isemmi l-qasam, jgħid x'inhu ħażin u jgħid kif tirranġah. Il-3.3.1 jitlob l-ewwel tnejn, fit-test, għalhekk bordura ħamra jew ikona waħedhom mhumiex biżżejjed. Il-3.3.3 jitlob il-korrezzjoni fejn tkun magħrufa.

• Uri l-messaġġ ħdejn il-qasam u qabbdu ma' aria-describedby, biex l-iscreen readers jaqrawh mal-qasam.
• Wara li tibgħat, uri lista tal-iżbalji kollha fin-naħa ta' fuq, qabel il-formola, taħt intestatura ċara. Kull entrata ssemmi l-qasam, il-problema u s-soluzzjoni, u torbot mal-qasam.
• Aġġorna wkoll it-titlu tal-paġna, pereżempju “2 żbalji – Formola ta' kuntatt”, u mexxi l-focus għall-ewwel qasam bi żball.
• Żomm dak li l-utent diġà daħħal. Dan huwa l-parir tagħna, mhux regola tal-WCAG: li terġa' tikteb kollox wara żball wieħed iġiegħel lin-nies jaqtgħu qalbhom.

Iċċekkja l-formola tiegħek b'Do4U

L-għodda Testi tal-formoli tiċċekkja t-testi ta' formola web. Twaħħal l-HTML tal-formola jew tagħti l-indirizz tal-paġna, u tista' żżid il-messaġġi ta' żball li turi l-formola tiegħek. Il-kodiċi jaqra kull qasam: it-tikketta tiegħu u minn fejn ġejja, noti, placeholders, oqsma obbligatorji, valuri tal-autocomplete u gruppi ta' radio buttons jew checkboxes. Isib problemi bħal qasam mingħajr tikketta, placeholder bħala l-unika tikketta, oqsma obbligatorji li t-test ma jsemmix, valuri tal-autocomplete neqsin u messaġġi ta' żball vagi, kull waħda bil-kriterju ta' suċċess tagħha. L-AI jissuġġerixxi tikketta ċara, nota qasira u messaġġ ta' żball li jsemmi l-qasam u jgħid kif tirranġa l-input. Il-kodiċi jiċċekkja kull suġġeriment u jibni abbozz HTML imtejjeb mill-formola tiegħek.

Do4U isib noti u jibni abbozz, int tiċċekkja u tiddeċiedi. L-għodda tiċċekkja l-markup, mhux l-istili, l-iscripts jew l-użu tat-tastiera tiegħek, u ma tgħidlekx jekk il-formola tiegħek hijiex aċċessibbli. Ittestja l-formola mtejba b'tastiera u b'screen reader.