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

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

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

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

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

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

2. Έλεγχος

• Έχουν επισημανθεί όλα τα στοιχεία της φόρμας;
• Τα υποχρεωτικά πεδία εμφανίζονται ξεκάθαρα σε στοιχεία ετικέτας ή υπόμνημα; Εάν χρησιμοποιούνται σύμβολα όπως ο αστερίσκος (*), η σημασία τους πρέπει να εξηγείται στην αρχή της φόρμας.
• Εάν τα πεδία εισαγωγής καθορίζουν μια συγκεκριμένη μορφή εισαγωγής, αυτό περιγράφεται σαφώς πριν από το πεδίο εισαγωγής; Για παράδειγμα, η "Μορφή καταχώρισης ημερομηνίας: ΗΗ.ΜΜ.ΕΕΕΕ" ή "Αριθμός τηλεφώνου: Εισαγάγετε μόνο αριθμούς χωρίς κενά ή παύλες".

1. Χρησιμοποιώντας τη γραμμή εργαλείων προγραμματιστή Ιστού, χρησιμοποιήστε τη συνάρτηση Διάφορα > Γραμμικοποίηση σελίδας για να γραμμικοποιήσετε τη δομή της σελίδας.
2. Ελέγξτε εάν οι ετικέτες των πεδίων εισαγωγής μπορούν να αντιστοιχιστούν με σαφήνεια στα πεδία στη γραμμική προβολή. Δηλαδή, οι ετικέτες πρέπει πάντα να βρίσκονται ακριβώς πάνω ή μπροστά από το πεδίο. Οι ετικέτες των πλαισίων ελέγχου και των κουμπιών επιλογής μπορούν να εμφανίζονται μετά το στοιχείο φόρμας.

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

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

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

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

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

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

• Οι ετικέτες παρέχονται μόνο ως προεπιλογές πεδίων φόρμας.

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

• Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.

• 3.3.2 Labels or Instructions (Level A)

• G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
• G89: Providing expected data format and example
• G131: Providing descriptive labels
• G162: Positioning labels to maximize predictability of relationships
• G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input

• H44: Using label elements to associate text labels with form controls
• H65: Using the title attribute to identify form controls when the label element cannot be used
• H71: Providing a description for groups of form controls using fieldset and legend elements
• H90: Indicating required form controls using label or legend

• ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
• ARIA9: Using aria-labelledby to concatenate a label from several text nodes
• ARIA17: Using grouping roles to identify related form controls

• F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label