Προσβάσιμες φόρμες: ετικέτες, υποδείξεις, μηνύματα σφάλματος

Έξι κριτήρια επιτυχίας για φόρμες

Το WCAG 2.2 είναι η τρέχουσα Σύσταση του W3C για προσβάσιμο περιεχόμενο ιστού. Για τα κείμενα μιας φόρμας μετράνε περισσότερο έξι από τα κριτήρια επιτυχίας του:

• 1.3.1 Πληροφορίες και σχέσεις (επίπεδο A): ό,τι δείχνει η διάταξη, όπως ποια ετικέτα ανήκει σε ποιο πεδίο, είναι διαθέσιμο και στον κώδικα ή σε κείμενο.
• 1.3.5 Προσδιορισμός σκοπού εισόδου (επίπεδο AA): τα πεδία που ζητούν πληροφορίες για τον χρήστη, όπως όνομα ή email, δηλώνουν τον σκοπό τους στον κώδικα.
• 3.3.1 Αναγνώριση σφάλματος (επίπεδο A): αν ένα σφάλμα εισόδου εντοπίζεται αυτόματα, το πεδίο κατονομάζεται και το σφάλμα περιγράφεται σε κείμενο.
• 3.3.2 Ετικέτες ή οδηγίες (επίπεδο A): δίνονται ετικέτες ή οδηγίες όταν το περιεχόμενο απαιτεί εισαγωγή από τον χρήστη.
• 3.3.3 Πρόταση για το σφάλμα (επίπεδο AA): αν εντοπιστεί σφάλμα και η διόρθωση είναι γνωστή, προτείνεται, εκτός αν αυτό θέτει σε κίνδυνο την ασφάλεια ή τον σκοπό του περιεχομένου.
• 4.1.2 Όνομα, ρόλος, τιμή (επίπεδο A): κάθε στοιχείο ελέγχου έχει όνομα και ρόλο που μπορεί να διαβάσει το λογισμικό.

Κάθε πεδίο χρειάζεται ορατή ετικέτα

Η ετικέτα λέει τι μπαίνει στο πεδίο και μένει ορατή όσο ο χρήστης πληκτρολογεί. Στην HTML σύνδεσε το στοιχείο label με το πεδίο: το χαρακτηριστικό for της ετικέτας έχει ακριβώς την ίδια τιμή με το id του πεδίου. Έτσι οι αναγνώστες οθόνης διαβάζουν την ετικέτα μαζί με το πεδίο, και ένα κλικ στην ετικέτα βάζει τον κέρσορα στο πεδίο. Ένα κουμπί παίρνει την ετικέτα του από το κείμενό του, και το «Αποστολή μηνύματος» λέει περισσότερα από το «Υποβολή». Οι ετικέτες συνήθως βρίσκονται δεξιά από τα κουμπιά επιλογής και τα πλαίσια ελέγχου και αριστερά ή πάνω από τα άλλα πεδία· οι ετικέτες πάνω από τα πεδία χρειάζονται λιγότερο χώρο σε πλάτος.

Το placeholder δεν είναι ετικέτα

Το γκρι κείμενο μέσα σε ένα κενό πεδίο μοιάζει με ετικέτα, αλλά δεν είναι. Το W3C ονομάζει τα προβλήματα:

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

Χρησιμοποίησε το placeholder το πολύ για ένα παράδειγμα και βάλε κάθε σημαντική πληροφορία στην ετικέτα ή σε μια υπόδειξη.

Υποδείξεις και υποχρεωτικά πεδία

• Βάλε τους κανόνες σε μια υπόδειξη: τη μορφή της ημερομηνίας, το μήκος ενός αριθμού πελάτη, τι χρειάζεται ένας κωδικός πρόσβασης. Στην HTML μπορείς να συνδέσεις την υπόδειξη με aria-describedby, ώστε οι αναγνώστες οθόνης να τη διαβάζουν μετά την ετικέτα.
• Πες ποια πεδία είναι υποχρεωτικά και ποια προαιρετικά. Αν χρησιμοποιείς αστερίσκο, εξήγησέ τον μία φορά στην αρχή της φόρμας.
• Βάλε τις οδηγίες για ολόκληρη τη φόρμα πριν από τη φόρμα, για παράδειγμα για ένα χρονικό όριο.
• Κράτα τις υποδείξεις σύντομες. Πάρα πολλές οδηγίες κάνουν μια φόρμα πιο δύσκολη, όχι πιο εύκολη.

Ομαδοποίησε τα σχετικά πεδία

Τα κουμπιά επιλογής και τα πλαίσια ελέγχου που ανήκουν μαζί ομαδοποιούνται με το στοιχείο fieldset, και το στοιχείο legend ονομάζει την ομάδα, για παράδειγμα «Πώς να επικοινωνήσουμε μαζί σου;». Το W3C λέει ότι οι ομάδες κουμπιών επιλογής πρέπει πάντα να ομαδοποιούνται με αυτόν τον τρόπο. Κράτα το legend σύντομο, γιατί ορισμένοι αναγνώστες οθόνης το διαβάζουν σε κάθε πεδίο. Οι ομάδες βοηθούν και σε πεδία με την ίδια ετικέτα, όπως η οδός στη διεύθυνση αποστολής και στη διεύθυνση χρέωσης.

autocomplete: άφησε τον φυλλομετρητή να βοηθήσει

Για τα πεδία που ζητούν πληροφορίες για τον χρήστη, το 1.3.5 ζητά ο σκοπός τους να μπορεί να προσδιοριστεί στον κώδικα. Το WCAG 2.2 έχει μια λίστα με αυτούς τους σκοπούς, βασισμένη στην ενότητα autofill της προδιαγραφής HTML, όπως name, given-name, family-name, email, tel, street-address και postal-code. Στην HTML τους ορίζεις με το χαρακτηριστικό autocomplete, για παράδειγμα autocomplete="email". Οι φυλλομετρητές μπορούν τότε να συμπληρώνουν αποθηκευμένες τιμές, κάτι που γλιτώνει πληκτρολόγηση. Τα πεδία που δεν αφορούν τον χρήστη δεν χρειάζονται σκοπό.

Μηνύματα σφάλματος που βοηθούν

Ένα μήνυμα σφάλματος έχει τρεις δουλειές: να κατονομάζει το πεδίο, να λέει τι είναι λάθος και να λέει πώς διορθώνεται. Το 3.3.1 ζητά τα δύο πρώτα, σε κείμενο, οπότε ένα κόκκινο περίγραμμα ή ένα εικονίδιο μόνο του δεν αρκεί. Το 3.3.3 ζητά τη διόρθωση, όπου είναι γνωστή.

• Δείξε το μήνυμα δίπλα στο πεδίο και σύνδεσέ το με aria-describedby, ώστε οι αναγνώστες οθόνης να το διαβάζουν μαζί με το πεδίο.
• Μετά την αποστολή, δείξε μια λίστα με όλα τα σφάλματα στην κορυφή, πριν από τη φόρμα, κάτω από μια σαφή επικεφαλίδα. Κάθε καταχώριση κατονομάζει το πεδίο, το πρόβλημα και τη διόρθωση, και οδηγεί με σύνδεσμο στο πεδίο.
• Ενημέρωσε και τον τίτλο της σελίδας, για παράδειγμα «2 σφάλματα – Φόρμα επικοινωνίας», και μετακίνησε την εστίαση στο πρώτο πεδίο με σφάλμα.
• Κράτα ό,τι έχει ήδη συμπληρώσει ο χρήστης. Αυτή είναι δική μας συμβουλή, όχι κανόνας του WCAG: αν πρέπει να τα ξαναγράψει όλα μετά από ένα λάθος, ο κόσμος τα παρατάει.

Έλεγξε τη φόρμα σου με το Do4U

Το εργαλείο Κείμενα φορμών ελέγχει τα κείμενα μιας φόρμας ιστού. Επικολλάς την HTML της φόρμας ή δίνεις τη διεύθυνση ιστού της σελίδας, και μπορείς να προσθέσεις τα μηνύματα σφάλματος που δείχνει η φόρμα σου. Ο κώδικας διαβάζει κάθε πεδίο: την ετικέτα του και από πού προέρχεται, υποδείξεις, placeholders, υποχρεωτικά πεδία, τιμές autocomplete και ομάδες κουμπιών επιλογής ή πλαισίων ελέγχου. Βρίσκει προβλήματα όπως πεδίο χωρίς ετικέτα, placeholder ως μοναδική ετικέτα, υποχρεωτικά πεδία που δεν αναφέρει το κείμενο, τιμές autocomplete που λείπουν και αόριστα μηνύματα σφάλματος, το καθένα με το κριτήριο επιτυχίας του. Η ΤΝ προτείνει μια σαφή ετικέτα, μια σύντομη υπόδειξη και ένα μήνυμα σφάλματος που κατονομάζει το πεδίο και λέει πώς διορθώνεται η εισαγωγή. Ο κώδικας ελέγχει κάθε πρόταση και φτιάχνει από τη φόρμα σου ένα βελτιωμένο προσχέδιο HTML.

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