Un câmp de formular fără etichetă corect asociată este cea mai frecventă eroare pe care o întâlnim pe formularele de contact, pașii de plată și ecranele de conectare. Eticheta este adesea prezentă, aranjată frumos deasupra sau lângă câmpul de introducere, dar în codul sursă nu este asociată din punct de vedere tehnic acelui câmp. Un cititor de ecran citește atunci câmpul ca "editare, gol" fără a spune pentru ce servește câmpul.
Problema apare de obicei pentru că o etichetă și un câmp de introducere par a fi vizual apropiate, dar programatorul (sau sistemul de construcție) nu a stabilit o relație tehnică între acestea. Pentru un utilizator nevăzător nu are nicio importanță: acesta vede pur și simplu eticheta. Pentru cineva care utilizează un cititor de ecran, această apropiere vizuală nu există. Ceea ce contează este asocierea din cod, și aceasta lipsește mai des decât ați crede, chiar și pe site-uri care arată profesional.
Trei variante ale aceleiași erori
Forma cea mai frecventă este eticheta care apare pe ecran, dar trăiește separat de câmp în cod, fără asociere tehnică. A doua formă este utilizarea unui text de placeholder în câmp însuși ca singură explicație: de îndată ce utilizatorul începe să tasteze, acel text dispare, iar un cititor de ecran nu tratează întotdeauna un placeholder ca o etichetă pe deplin validă. Forma a treia o veți vedea mai ales cu pictograme: un câmp de căutare cu doar o pictogramă de lupă, sau un buton cu doar o imagine, fără text pe care un cititor de ecran să-l citească.
Toate acestea variante au în comun faptul că eroarea de obicei nu este intenționată. Nimeni nu construiește un formular pentru a-l face inaccesibil. Se întâmplă pentru că o etichetă arată bine vizual și constructorul presupune că aceasta este suficient, în timp ce asocierea tehnică este un pas separat care este ușor omis, mai ales sub presiunea timpului sau cu un șablon care a fost construit inițial fără a lua în considerare accesibilitatea.
De ce aceasta cântărește mai mult decât pare
Un formular este adesea punctul în care un vizitator dorește să rezolve efectiv ceva: să completeze o comandă, să creeze un cont, să ia legătura. Dacă eticheta lipsește exact în acel moment, procesul se blochează pentru o parte din vizitatorii dumneavoastră, în timp ce restul site-ului funcționează impecabil. Autoritățile de supraveghere și evaluatorii examinează, prin urmare, adesea mai întâi formularele pentru a identifica aceste tipuri de probleme, deoarece au un impact direct asupra faptului dacă cineva poate beneficia de un serviciu.
La aceasta se adaugă faptul că această eroare se propagă ușor. O etichetă fără asociere într-un singur șablon pentru un câmp de adresă apare adesea pe zeci de pagini deodată, deoarece aceeași componentă este reutilizată peste tot. Dacă o asociere lipsește în baza, aceasta afectează întregul pas de plată sau întregul ecran de conectare.
Cum o testați și unde o scanare automatică se confruntă cu limitele ei
O scanare automatică recunoaște bine o parte din aceste erori: poate vedea dacă o etichetă este asociată din punct de vedere tehnic unui câmp și dacă un câmp de introducere nu are deloc un nume. Ceea ce o scanare evaluează mai greu este dacă o etichetă este din punct de vedere conținutului corectă, dacă un placeholder ca singură explicație este suficient de clar și dacă ordinea de citire pentru un cititor de ecran pare logică. Aceasta este exact motivul pentru care, în fiecare raport, menționăm ce testează o scanare automată și ce nu; în acest fel, veți ști ce mai trebuie verificat manual.
Dacă doriți să vă faceți o primă impresie, testul cel mai simplu este să navigați prin formular folosind doar tastatura și să verificați dacă fiecare câmp primește un nume clar când tabulați pe acesta. Pentru o imagine mai completă, inclusiv pasul de plată și fluxul de conectare, ajută scanarea completă care merge mai departe decât pagina de start pentru a vedea unde lipsesc etichetele sau sunt separate de câmpurile lor.
Ce nu poate rezolva un widget cu suprapunere aici
Un widget de accesibilitate care este lipit deasupra site-ului nu poate remedia o asociere lipsă între o etichetă și un câmp; acea asociere se află în codul sursă însuși și trebuie ajustată acolo. Aceasta este una dintre motivele pentru care nu vândem suprapuneri: ele ascund acest tip de erori ochiului, dar un cititor de ecran nu observă nimic.
Soluția în sine este de obicei limitată ca amploare: constructorul atașează eticheta la câmp, înlocuiește un placeholder-ca-etichetă cu o etichetă reală sau adaugă text invizibil unui buton de pictogramă. Nu este o renovare majoră, dar este o muncă care trebuie efectuată în mod direcționat, per formular și per șablon. În baza de cunoștințe cu explicații pe subiecte aflați cum aceste și erori similare se raportează la cerințele din EN 301 549.
După reparație: documentare și monitorizare
O etichetă pe care o remediați acum poate dispărea din nou la următoarea modificare a șablonului, de exemplu atunci când un designer restylistă formularul fără a reverifica asocierea. De aceea, o corecție nu trebuie doar rezolvată din punct de vedere tehnic, ci și inclusă în planul de îmbunătățire, pentru a fi clar cine este responsabil și când va fi verificată din nou. Modul în care organizez acea verificare și repetare este explicat pe pagina despre cum se întocmește evaluarea.
Dacă vă întrebați dacă propriile dvs. formulare conțin această eroare, asta se poate vedea adesea cu puțin timp de navigare cu tastatura. Dacă doriți o abordare structurată cu o listă prioritizată, asta începe cu scanarea rapidă gratuită, sau consultați mai întâi întrebările frecvente despre ceea ce analizează o scanare și ceea ce nu.