Ένα <label> δίνει σε ένα στοιχείο ελέγχου φόρμας ένα προσιτό όνομα και ένα μεγαλύτερο στόχο κλικ. Υπάρχουν δύο τρόποι να τα συνδέσεις και αυτό είναι απαραίτητο για την προσιτότητα.
for + id (ρητή)Email address
Το for της ετικέτας ταιριάζει με το id της εισόδου. Λειτουργεί ακόμα κι αν δεν είναι δίπλα στη σήμανση.
<label>
Email address
<input type="email" />
</label>
Η εισαγωγή είναι ένια μέσα στην ετικέτα — δεν χρειάζεται 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 -->
Ενα placeholder εξαφανίζεται όταν ο χρήστης πληκτρολογεί και δεν ανακοινώνεται αξιόπιστα — μην το χρησιμοποιήσεις ποτέ ως μόνη ετικέτα.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Χρησιμοποίησε aria-label (ή aria-labelledby) μόνο όταν μια ορατή ετικέτα δεν είναι πραγματικά δυνατή.
Οι σωστά συνδεδεμένες ετικέτες είναι μία από τις πιο επιδραστικές πρακτικές προσιτότητας για φόρμες — δίνουν σε κάθε στοιχείο ελέγχου ένα όνομα για τεχνολογία υποστήριξης και μεγεθύνουν στόχους κλικ για όλους.
Προτίμησε μια πραγματική <label>· υπαναχώρησε σε aria-label μόνο όταν είναι απαραίτητο και μην ποτέ βασίζεσαι στο placeholder ως ετικέτα.