Practică recomandată Prioritate: Grav
Câmpurile formularului nu au o etichetă vizibilă
Unele câmpuri de formular sunt denumite doar printr-un tooltip (atributul title), o descriere ascunsă sau o etichetă ascunsă, așa că pe ecran nu apare nicio etichetă. Este o bună practică recomandată, care depășește nivelul WCAG 2.2 AA pe care se bazează legislația privind accesibilitatea.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Clienții văd un câmp gol și trebuie să ghicească dacă se cere un număr de telefon, un cod poștal sau un cod promoțional. Tooltipul apare doar la trecerea cu mouse-ul, niciodată pe telefon, iar placeholderul dispare imediat ce cineva începe să scrie. Persoanele care folosesc comanda vocală nu pot rosti numele unui câmp pe care nu îl văd.
Pe cine afectează
- persoane cu dificultăți cognitive sau de memorie
- clienți în vârstă
- utilizatori ai comenzii vocale
- clienți de pe smartphone
Cum se remediază
Dați fiecărui input, select și textarea un <label> vizibil, legat prin for și id, sau includeți câmpul în etichetă. Nu folosiți atributul title, aria-describedby sau o etichetă ascunsă vizual ca singur nume și nu considerați placeholderul o etichetă. Pentru câmpuri compacte, precum căutarea sau newsletterul, păstrați o etichetă scurtă vizibilă lângă câmp.
În Shopify
De obicei apare în formularele de newsletter, căutare sau contact personalizat din secțiunile ori snippeturile temei, unde eticheta este ascunsă și se vede doar placeholderul. Faceți eticheta vizibilă în Liquid și CSS-ul secțiunii; pentru formularele adăugate de aplicații, contactați dezvoltatorul aplicației.
În Shoptet (CZ)
Depinde de șablon. Verificați setările șablonului sau o versiune mai nouă; dacă eticheta există, dar e ascunsă, o puteți afișa cu CSS propriu prin opțiunile de cod personalizat oferite de Shoptet. Altfel, contactați Shoptet sau un partener.
În PrestaShop
De obicei este vorba de șabloanele modulelor de newsletter, căutare sau contact. Suprascrieți fișierul .tpl al modulului în tema dvs. și afișați o etichetă reală în loc de placeholder sau title.
În WooCommerce
De obicei vine din temă, dintr-un plugin de formulare sau dintr-un page builder care ascunde etichetele pentru un aspect minimalist. Activați etichetele în setările pluginului de formulare sau afișați-le prin șabloanele ori CSS-ul temei copil.
Standarde
Nu este un criteriu WCAG, ci o practică recomandată care face site-ul mai ușor de folosit.
Verificare automată: regula axe-core label-title-only.
dequeuniversity.com, github.com, www.w3.org