#Σημείο ελέγχου 3.3.2 Ετικέτες ή οδηγίες για πεδία φόρμας

Τι ελέγχεται;
Ελέγχεται εάν υπάρχουν ετικέτες στοιχείων φόρμας.

Κάθε στοιχείο της φόρμας έχει το δικό του όνομα και τη δική του ετικέτα. Για αυτό το λόγο έχουν οι χρήστες πλήρη επίγνωση για το πεδίο που χρειάζεται να εισαγάγουν τα δεδομένα.

Οι ετικέτες των στοιχείων της φόρμας θα πρέπει να είναι διατεταγμένες μπροστά του σχετικού πεδίου εισαγωγής (δηλαδή στα αριστερά ή πάνω). Μόνο οι ετικέτες των πλαισίων ελέγχου και των κουμπιών επιλογής μπορούν να τοποθετηθούν στα δεξιά του σχετικού πεδίου εισαγωγής.

Εάν απαιτείται συγκεκριμένη μορφή για εισαγωγή, οι οδηγίες είναι αναγνώσιμες από όλους τους χρήστες. Είναι αντικείμενο από το Σημείο ελέγχου 3.3.2 Ετικέτες ή οδηγίες για πεδία φόρμας (Επίπεδο Α).

Γιατί ελέγχεται;

Όταν παρέχονται ετικέτες, οι χρήστες γνωρίζουν ποια στοιχεία αναμένονται και τα σφάλματα μπορούν να αποφευχθούν.

Η διάταξη των ετικετών ακριβώς μπροστά ή πάνω από το πεδίο εισαγωγής αντιστοιχεί στις συνήθεις συμβάσεις σχεδιασμού. Ακόμη και σε μερικές προβολές (π.χ. σε λογισμικό μεγέθυνσης), γίνεται γρήγορα σαφές ποια ετικέτα ανήκει σε ποιο πεδίο.

Πώς ελέγχεται;

1. Εφαρμογή του σημείου ελέγχου

Το σημείο ελέγχου ισχύει εάν η σελίδα περιέχει στοιχεία φόρμας.

2. Έλεγχος

Ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης Firefox. 2.1. Υπάρχουν ετικέτες;
  • Έχουν επισημανθεί όλα τα στοιχεία της φόρμας;
  • Τα υποχρεωτικά πεδία εμφανίζονται ξεκάθαρα σε στοιχεία ετικέτας ή υπόμνημα; Εάν χρησιμοποιούνται σύμβολα όπως ο αστερίσκος (*), η σημασία τους πρέπει να εξηγείται στην αρχή της φόρμας.
  • Εάν τα πεδία εισαγωγής καθορίζουν μια συγκεκριμένη μορφή εισαγωγής, αυτό περιγράφεται σαφώς πριν από το πεδίο εισαγωγής; Για παράδειγμα, η "Μορφή καταχώρισης ημερομηνίας: ΗΗ.ΜΜ.ΧΧΧΧ" ή "Αριθμός τηλεφώνου: Εισαγάγετε μόνο αριθμούς χωρίς κενά ή παύλες".
2.2. Είναι σωστά τοποθετημένες οι ετικέτες;
  1. Χρησιμοποιώντας τη γραμμή εργαλείων προγραμματιστή Ιστού (Web Developer Toolbar) , χρησιμοποιήστε τη συνάρτηση Miscellaneous > Linearize page για να γραμμικοποιήσετε τη δομή της σελίδας.
  2. Ελέγξτε εάν οι ετικέτες των πεδίων εισαγωγής μπορούν να αντιστοιχιστούν με σαφήνεια στα πεδία στη γραμμική προβολή. Δηλαδή, οι ετικέτες πρέπει πάντα να βρίσκονται ακριβώς πάνω ή μπροστά από το πεδίο. Οι ετικέτες των πλαισίων ελέγχου και των κουμπιών επιλογής μπορούν να εμφανίζονται μετά το στοιχείο φόρμας.

3. Σημειώσεις

  • Τα συνδυασμένα στοιχεία εισόδου, δεν έχουν πάντα κάθε στοιχείο μια σχετική ετικέτα. Σε αυτήν την περίπτωση, τα στοιχεία θα πρέπει να παρέχονται με ένα επεξηγηματικό χαρακτηριστικό title. Παράδειγμα: Σε μια φόρμα, προσφέρονται τρεις λίστες επιλογής για την εισαγωγή μιας ημερομηνίας (ημέρα, μήνας και έτος). Οι τρεις λίστες επιλογής έχουν μια κοινή ετικέτα: Ημερομηνία. Οι λίστες επιλογής ημέρας, μήνας και έτους παρέχονται με ένα επεξηγηματικό χαρακτηριστικό title.

  • Εάν μια απλή φόρμα αναζήτησης αποτελείται μόνο από ένα πεδίο εισαγωγής και ένα κουμπί, συχνά δεν απαιτείται ορατή επισήμανση. Εδώ αρκεί εάν το πεδίο εισαγωγής και το κουμπί είναι τοποθετημένα το ένα δίπλα στο άλλο. Το πεδίο εισαγωγής έχει μια προεπιλογή με νόημα ή η ετικέτα στο κουμπί προσδιορίζει σαφώς τη λειτουργία. Για παράδειγμα, "Αναζήτηση". Σε τέτοιες περιπτώσεις, το πεδίο εισαγωγής χωρίς ετικέτα με προεπιλογές κειμένου πρέπει να έχει είτε ένα χαρακτηριστικό title με νόημα είτε μια κρυφή ετικέτα. Καθώς το παρακάτω κουμπί δεν είναι εξίσου κατάλληλο ως ετικέτα για τους χρήστες του προγράμματος ανάγνωσης οθόνης. Εναλλακτικά, σε αυτή την περίπτωση η επισήμανση μπορεί επίσης να παρέχεται χρησιμοποιώντας aria-label ή aria-labelledby.

  • Μπορεί να έχει νόημα οι φόρμες να παρέχουν πληροφορίες σχετικά με τη μορφή εισαγωγής. Ή τις ενεργοποιημένες ενέργειες στην αρχή της φόρμας αντί πριν από κάθε μεμονωμένο πεδίο εισαγωγής.

4. Αξιολόγηση

Κριτήριο δεν ικανοποιείται.
  • Τα σημαντικά στοιχεία φόρμας (π.χ. η είσοδος αναζήτησης) είναι χωρίς ετικέτες. Και τα γειτονικά στοιχεία δεν εξηγούν τη συνάρτηση.
Κριτήριο δεν ικανοποιείται πλήρως.
  • Οι ετικέτες παρέχονται μόνο ως προεπιλογές πεδίων φόρμας.

Ταξινόμηση του σημείου ελέγχου 3.3.2 Ετικέτες ή οδηγίες για πεδία φόρμας

Ταξινόμηση του σημείου ελέγχου σύμφωνα με το WCAG 2.1

Κατευθυντήρια γραμμή Κριτήριο επιτυχίας Τεχνικές Γενικές τεχνικές HTML τεχνικές ARIA τεχνικές Αποτυχίες