Το ίντερνετ ενός επισκέπτη κόβεται ενώ φορτώνει τη φόρμα σου. Μια επέκταση του Chrome χαλά τη JavaScript σου. Ένας παλιότερος περιηγητής δεν υποστηρίζει τη JavaScript που χρησιμοποιείς. Το πρόγραμμα ανάγνωσης οθόνης του δεν μπορεί να πλοηγηθεί στη φόρμα σου, γιατί οι ετικέτες κρύβονται με CSS.
Οι φόρμες είναι κρίσιμες διαδρομές. Οι χρήστες πρέπει να μπορούν να τις υποβάλουν. Η φόρμα δεν επιτρέπεται απλώς να χαλάσει. Η προοδευτική βελτίωση είναι η αρχή να φτιάχνεις φόρμες που δουλεύουν παντού και μετά να προσθέτεις βελτιώσεις για τους περιηγητές που τις αντέχουν.
Αυτό το άρθρο εξηγεί πώς θα φτιάξεις φόρμες που υποβαθμίζονται ομαλά, δουλεύουν χωρίς JavaScript και μένουν προσβάσιμες σε όλους.
Τι είναι η προοδευτική βελτίωση;
Προοδευτική βελτίωση σημαίνει ότι ξεκινάς με μια βασική φόρμα που δουλεύει στους παλαιότερους περιηγητές και χωρίς JavaScript και μετά προσθέτεις βελτιώσεις από πάνω για τους σύγχρονους περιηγητές. Το επίπεδο 1 (HTML) δίνει μια βασική φόρμα με πεδία, ετικέτες και κουμπί υποβολής, που δεν χρειάζεται JavaScript και δουλεύει παντού. Το επίπεδο 2 (CSS) στυλιζάρει τη φόρμα με χρώματα, αποστάσεις και διάταξη, οπότε η φόρμα δουλεύει ακόμη κι αν το CSS δεν φορτώσει, απλώς φαίνεται άσχημη. Το επίπεδο 3 (JavaScript) προσθέτει έλεγχο σε πραγματικό χρόνο, ομαλές κινήσεις και υποβολή με AJAX, οπότε η φόρμα δουλεύει ακόμη κι αν η JavaScript αποτύχει και απλώς υποβάλλεται με τον παραδοσιακό τρόπο. Αν αποτύχει οποιοδήποτε επίπεδο, ο χρήστης έχει πάντα μια φόρμα που δουλεύει. Αυτό είναι ανθεκτικότητα.
Η βάση: HTML που δουλεύει
Ξεκίνα με σημασιολογικό HTML, με σωστές ετικέτες, fieldset και στοιχεία legend. Μια βασική φόρμα μοιάζει με <form action="/submit" method="POST"> <label for="email">Email</label> <input type="email" id="email" name="email" required> <label for="message">Message</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form>. Αυτή η φόρμα δουλεύει χωρίς JavaScript, χωρίς CSS, σε παλιούς περιηγητές, με προγράμματα ανάγνωσης οθόνης και με πλοήγηση από πληκτρολόγιο. Αυτή είναι η βάση σου. Μην αφαιρείς ποτέ στοιχεία από το DOM για να τα αντικαταστήσεις με στοιχεία που τα φτιάχνει η JavaScript, γιατί αν αποτύχει η JavaScript, η φόρμα χαλά. Κράτα το σημασιολογικό HTML.
Ομαλή υποβάθμιση με CSS
Πρόσθεσε βελτιώσεις CSS πάνω από το HTML. Στυλιζάρισε όμορφα τη φόρμα. Αν όμως αποτύχει το CSS, η φόρμα δουλεύει ακόμη.
Μην κρύβεις τις ετικέτες με CSS βασιζόμενος στα placeholder, γιατί κάποιο CSS αποτυγχάνει να φορτώσει και τα προγράμματα ανάγνωσης οθόνης χρειάζονται τις ετικέτες στο HTML. Μην χρησιμοποιείς CSS για να κρύψεις τις ενδείξεις υποχρεωτικών πεδίων, γιατί αν το δικό σου «αστεράκι» δεν φορτώσει, οι χρήστες δεν μπορούν να καταλάβουν ποια πεδία είναι υποχρεωτικά. Χρησιμοποίησε το χαρακτηριστικό required του HTML. Απόφυγε να κρύβεις οπτικά την ετικέτα και να δείχνεις placeholder με label { display: none; } και input::placeholder { content: 'Email'; }. Κράτα αντί γι' αυτό την ετικέτα στο HTML και στυλιζάρισέ την όπως θες με label { font-weight: bold; color: #333; }.
Βελτιώσεις JavaScript που υποβαθμίζονται ομαλά
Πρόσθεσε βελτιώσεις JavaScript, αλλά μόνο αν η φόρμα ήδη δουλεύει. Χρησιμοποίησε ανίχνευση χαρακτηριστικών για να ελέγξεις αν ο περιηγητής υποστηρίζει ό,τι χρειάζεσαι με if (window._blocked_) { // Use _blocked_ for AJAX submission } else { // Form submits traditionally }. Μην υποθέτεις ότι τα χαρακτηριστικά υπάρχουν. Υπέθεσε ότι μπορεί να μην υπάρχουν. Ανίχνευσε πρώτα.
Έλεγχος σε πραγματικό χρόνο με εναλλακτική λύση
Χρησιμοποίησε τον έλεγχο του HTML ως βάση με <input type="email" required>, ώστε ο περιηγητής να ελέγχει κατά την υποβολή. Μετά πρόσθεσε έλεγχο με JavaScript που τρέχει σε πραγματικό χρόνο με input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Invalid email'); } });. Δείχνει σφάλματα καθώς πληκτρολογεί ο χρήστης και, αν αποτύχει η JavaScript, ο ενσωματωμένος έλεγχος του περιηγητή δουλεύει ακόμη. Ο χρήστης παίρνει το όφελος της άμεσης ανατροφοδότησης και, αν αποτύχει η JavaScript, παίρνει ανατροφοδότηση από τον περιηγητή κατά την υποβολή. Και στις δύο περιπτώσεις γίνεται έλεγχος.
Υποβολή με AJAX και παραδοσιακή εναλλακτική
Φτιάξε μια παραδοσιακή φόρμα που υποβάλλεται στον διακομιστή και μετά παρεμπόδισε την υποβολή και χρησιμοποίησε AJAX με form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });. Αν αποτύχει η JavaScript, το preventDefault δεν τρέχει ποτέ, η φόρμα υποβάλλεται με τον παραδοσιακό τρόπο και ο χρήστης βλέπει επαναφόρτωση σελίδας αντί για ομαλή εμπειρία. Η φόρμα όμως δουλεύει.
Η προσβασιμότητα ως προοδευτική βελτίωση
Η προσβασιμότητα δεν είναι επιπλέον χαρακτηριστικό. Είναι η βάση. Φτιάξε προσβάσιμες φόρμες.
Οι ετικέτες πρέπει να συνδέονται με τα πεδία με τα χαρακτηριστικά for και id. Όχι data-attributes, όχι aria-labels που μπορεί να χαθούν. Σωστές ετικέτες.
<label for="email">Email</label>
<input id="email">
Χρησιμοποίησε σημασιολογικά στοιχεία HTML (fieldset, legend, button, input). Όχι div που στυλιζάρονται για να μοιάζουν με κουμπιά.
Η πλοήγηση με πληκτρολόγιο πρέπει να δουλεύει. Tab για να περάσεις από όλα τα πεδία. Shift+Tab για να γυρίσεις πίσω. Enter για υποβολή. Space για να πατήσεις πλαίσια επιλογής. Αυτά δουλεύουν από προεπιλογή με σημασιολογικό HTML. Μην τα χαλάσεις με JavaScript.
Αφού δουλέψουν τα βασικά, πρόσθεσε ετικέτες ARIA για τα προγράμματα ανάγνωσης οθόνης. Πρόσθεσε ενδείξεις εστίασης για χρήστες πληκτρολογίου. Αυτές όμως είναι βελτιώσεις πάνω από προσβάσιμο HTML.
Έλεγχος ανθεκτικότητας
Δοκίμασε τη φόρμα σου με απενεργοποιημένη JavaScript. Απενεργοποίησε τη JavaScript στον περιηγητή σου και δοκίμασε να υποβάλεις. Αν η φόρμα χαλά, δεν είναι ανθεκτική.
Δοκίμασε με αργά δίκτυα. Περιόρισε τη σύνδεσή σου σε 2G. Αν η φόρμα αργεί πολύ να φορτώσει, οι επισκέπτες με ασταθές ίντερνετ θα φύγουν.
Δοκίμασε με παλιότερους περιηγητές. Χρησιμοποίησε εργαλεία δοκιμής σε διαφορετικούς περιηγητές για να δοκιμάσεις στο IE 11 (αν το χρειάζεσαι ακόμη). Δες ποια χαρακτηριστικά δεν υποστηρίζονται.
Δοκίμασε με προγράμματα ανάγνωσης οθόνης. Χρησιμοποίησε το NVDA (Windows) ή το VoiceOver (Mac). Άκουσε πώς ανακοινώνεται η φόρμα. Αν δεν βγάζει νόημα σε πρόγραμμα ανάγνωσης οθόνης, διόρθωσέ την.
Δοκίμασε μόνο με πληκτρολόγιο. Μην χρησιμοποιήσεις ποντίκι. Μπορείς να πλοηγηθείς στη φόρμα; Μπορείς να την υποβάλεις;
Ανίχνευση χαρακτηριστικών, όχι ανίχνευση περιηγητή
Μην ελέγχεις για συγκεκριμένους περιηγητές. Έλεγξε για χαρακτηριστικά, αντί να χρησιμοποιείς ανίχνευση περιηγητή όπως if (navigator.userAgent.includes('Chrome')) { /* use _blocked_ */ }. Χρησιμοποίησε αντί γι' αυτό ανίχνευση χαρακτηριστικών όπως if (window._blocked_) { /* use _blocked_ */ }. Η ανίχνευση χαρακτηριστικών είναι πιο αξιόπιστη, γιατί μια ενημέρωση περιηγητή που προσθέτει υποστήριξη για _blocked_ θα δουλέψει με τον κώδικά σου, ενώ η ανίχνευση περιηγητή όχι.
Πώς να φτιάξεις ανθεκτικές φόρμες με τη WEMASY
Ο δημιουργός ιστοσελίδων της WEMASY σού επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον δημιουργό ιστοσελίδων.
Δες τα πακέτα της WEMASY.