Adresă de corespondență
Șase cifre, fără spații.
Componente · M2
Formulare care explică problema și calea de rezolvare.
Markup semantic, controale native și mesaje clare. Fluxul de bază funcționează fără JavaScript; helperul opțional mută focusul în rezumatul erorilor după validarea pe server.
Exemplu invalid
Răspunsul serverului păstrează datele și explică fiecare eroare.
Rezumatul apare înaintea formularului, conține linkuri către câmpuri și primește focus numai prin enhancement. Fără JavaScript, linkurile și toate controalele rămân utilizabile.
Sunt două probleme de rezolvat
Corectează informațiile de mai jos, apoi trimite formularul din nou.
Exemplu valid
Hint-ul explică scopul, iar browserul poate completa datele.
Alegeri multiple
Stări native
Readonly și disabled nu înseamnă același lucru.
Valoarea este transmisă, dar nu poate fi modificată.
Controlul nu este disponibil în această etapă.
Regulă: nu folosi disabled pentru informații pe care utilizatorul trebuie să le poată selecta, copia sau înțelege. În aceste cazuri, readonly ori textul simplu sunt opțiuni mai potrivite.
Control segmentat
Vizual e un grup de butoane; semantic rămâne un grup de radio-uri.
Input-urile native sunt ascunse vizual, nu eliminate din arborele de accesibilitate. Funcționează identic fără JavaScript și cu orice tehnologie asistivă.
Numărător de caractere
Fără JavaScript rămâne doar hint-ul static; cu JavaScript, se actualizează live.
Nu folosește atributul nativ maxlength: limita e informativă, nu blocantă — poți depăși numărul de caractere și vezi acest lucru semnalat, nu tăiat pe nesimțite la mijlocul unei propoziții. Regiunea de status este o zonă aria-live="polite" deja prezentă în markup, nu creată dinamic — cititoarele de ecran o anunță corect din primul enhancement.
Mai aveți 200 caractere
Markup de referință
Asocierea programatică este parte din componentă.
<div class="sd-form-group sd-form-group--error">
<label class="sd-label" for="email">Adresa de e-mail</label>
<p class="sd-hint" id="email-hint">Vom trimite confirmarea aici.</p>
<p class="sd-error-message" id="email-error">
Introdu o adresă în formatul nume@exemplu.ro
</p>
<input
class="sd-input"
id="email"
type="email"
autocomplete="email"
aria-invalid="true"
aria-describedby="email-hint email-error"
/>
</div>