O etichetă <label> oferă unui control de formulare un nume accesibil și o zonă de clic mai mare. Există două moduri de a le asocia, iar a face acest lucru este esențial pentru accesibilitate.
for + id (explicită)Email address
Atributul for al etihetei se potrivește cu id-ul intrării. Aceasta funcționează chiar dacă nu sunt adiacente în marcaj.
<label>
Email address
<input type="email" />
</label>
Intrarea este imbricată în interiorul etihetei — nu este necesar niciun id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Un placeholder dispare atunci când utilizatorul tastează și nu este anunțat în mod fiabil — nu-l folosi niciodată ca singura etichetă.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Foloseşte aria-label (sau aria-labelledby) doar atunci când o etichetă vizibilă nu este cu adevărat posibilă.
Eticheta asociate corespunzător sunt una dintre cele mai impactante practici de accesibilitate pentru formulare — dau fiecărui control un nume pentru tehnologia de asistență și măresc zonele de clic pentru toți.
Preferă o etichetă reală <label>; revino la aria-label doar atunci când este necesar și nu te baza niciodată pe placeholder ca etichetă.