Υποενότητα 9.1: Το HTML των φορμών
Προσβασιμότητα - Accessibility: Το στοιχείο Label
Οι Labels είναι σημαντικές για προσβάσιμες και εύχρηστες φόρμες.
Όταν προσθέτετε μια ετικέτα- label δεν βλέπετε καμία αλλαγή στη σελίδα HTML. Δεν είναι εύκολο να κατανοήσουμε τη λειτουργία της παρατηρώντας την έξοδο HTML.
Η σημασία της ετικέτας label έγκειται στο γεγονός ότι μας επιτρέπει να χρησιμοποιούμε σήμανση- markup για τη δημιουργία πιο προσβάσιμων / φιλικών προς το χρήστη πεδίων φόρμας.
Στην πράξη, αυτό σημαίνει ότι συνδυάζουμε κείμενο με πεδία εισαγωγής και, συνεπώς, αν ο χρήστης κάνει κλικ στον τίτλο ενός πεδίου εισαγωγής, η σελίδα θα μεταβεί αυτόματα σε αυτό το πεδίο.
Labels - Γιατί;
- Συνδέει το κείμενο με στοιχεία εισόδου
input - Βοηθάει τους αναγνώστες οθόνης- screen readers!
- Βοηθά με τα "clicks" και "touch" στις οθόνες!
Labels - Πώς;
idvalue attribute στην input- Στοιχείο label για την input label
- for attribute στην label για να συνδεθεί η label με την input μέσω του id
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" placeholder="Your name goes here" minlength="10" required/>