WCAG 3.3.2 Etichete sau instrucțiuni

Criteriul de succes 3.3.2 asigură că toată lumea știe ce trebuie introdus într-un formular. Persoanele cu dizabilități cognitive, utilizatorii în vârstă, utilizatorii de cititoare de ecran și oricine completează comanda pe un telefon mic au de câștigat din etichete clare, marcaje vizibile pentru câmpurile obligatorii și indicații scurte de format. Este de nivelul A și apare în EN 301 549 drept clauza 9.3.3.2; Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Trebuie furnizate etichete sau instrucțiuni atunci când conținutul necesită date introduse de utilizator. W3C precizează că „necesită” înseamnă „acceptă sau așteaptă date”, așa că intră și câmpurile opționale.

• O etichetă este un text (sau o componentă cu text alternativ) prezentat tuturor utilizatorilor pentru a identifica un control. Nu trebuie să fie neapărat un element HTML <label>, dar trebuie să fie vizibilă pentru toți — spre deosebire de numele accesibil, care poate fi ascuns.
• Instrucțiunile explică datele sau formatul așteptat, de exemplu „Data nașterii (ZZ.LL.AAAA)”, care câmpuri sunt obligatorii sau la ce se referă un grup de butoane radio.

Scopul îl reprezintă indicii utile, fără aglomerare: nu fiecare câmp are nevoie de un paragraf, dar nimeni nu ar trebui să ghicească.

Greșeli tipice într-un magazin online

• câmpuri din pagina de finalizare a comenzii care folosesc doar text placeholder, care dispare imediat ce utilizatorul începe să scrie;
• un câmp de telefon sau de card împărțit în mai multe casete, fără etichetă pentru fiecare parte;
• câmpuri obligatorii marcate doar cu un asterisc roșu, fără explicația semnificației asteriscului;
• butoane radio pentru opțiunile de livrare sau casete de bifat pentru consimțământ fără etichetă de grup;
• un câmp de cantitate, o casetă de căutare sau un câmp de newsletter cu o pictogramă, dar fără text vizibil;
• un format neobișnuit (cod de TVA, reguli pentru parolă) fără nicio indicație înainte ca utilizatorul să greșească.

Cum se verifică

Automat: verificatorul nostru rulează form-field-multiple-labels, care semnalează câmpurile cu mai multe etichete. Regulile conexe pentru numele accesibile lipsă (precum label, select-name) sunt enumerate la 4.1.2. Dacă o etichetă este vizibilă și ușor de înțeles poate aprecia doar un om.

Manual: parcurgeți fiecare formular. Pentru fiecare câmp, verificați că există un text vizibil care rămâne pe ecran în timpul scrierii, că câmpurile obligatorii sunt indicate în text, că grupurile de opțiuni au un titlu sau o legendă și că formatele speciale sunt explicate înainte de introducere.

Cum se remediază

• Dați fiecărui câmp o etichetă vizibilă <label for="…">; folosiți placeholderele doar pentru exemple.
• Grupați butoanele radio și casetele de bifat într-un <fieldset> cu <legend>.
• Marcați câmpurile obligatorii în etichetă („E-mail (obligatoriu)”) sau explicați asteriscul la începutul formularului.
• Adăugați o indicație scurtă de format și legați-o cu aria-describedby.

Criterii conexe

• 3.3.1 Identificarea erorilor — ce se întâmplă când datele introduse sunt greșite.
• 4.1.2 Nume, rol, valoare — numele programatic al fiecărui câmp.
• 1.3.5 Identificarea scopului datelor introduse — autocomplete pentru câmpurile cu date personale.

Întrebări frecvente

Este suficient textul placeholder ca etichetă?

Este riscant. Placeholderul dispare imediat ce utilizatorul începe să scrie, are adesea contrast scăzut și nu este întotdeauna citit de tehnologiile asistive. O etichetă vizibilă care rămâne pe ecran este soluția fiabilă.

Se aplică 3.3.2 doar câmpurilor obligatorii?

Nu. W3C explică faptul că „necesită” înseamnă aici „acceptă sau așteaptă date”, așa că și câmpurile opționale au nevoie de etichete sau instrucțiuni.

Trebuie să marchez câmpurile obligatorii?

Este modul așteptat de a îndeplini 3.3.2 atunci când unele câmpuri sunt obligatorii: W3C enumeră indicarea câmpurilor obligatorii în etichetă sau în legendă drept tehnică suficientă. Folosiți text sau un simbol explicat, nu doar culoarea.

Care este diferența dintre 3.3.2 și 4.1.2?

3.3.2 se referă la etichetele și instrucțiunile pe care le pot vedea toți utilizatorii. 4.1.2 se referă la numele accesibil pe care îl citesc programele. Un câmp poate avea un nume ascuns și totuși să nu aibă o etichetă vizibilă.