Προσβάσιμες φόρμες επικοινωνίας και η Ευρωπαϊκή Πράξη για την Προσβασιμότητα

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

Τι καλύπτει η Ευρωπαϊκή Πράξη για την Προσβασιμότητα

Η Ευρωπαϊκή Πράξη για την Προσβασιμότητα (Οδηγία (ΕΕ) 2019/882) εφαρμόζεται από τις 28 Ιουνίου 2025. Θέτει απαιτήσεις προσβασιμότητας για ορισμένα προϊόντα και υπηρεσίες που προσφέρονται σε καταναλωτές – μεταξύ αυτών το ηλεκτρονικό εμπόριο, οι τραπεζικές υπηρεσίες για καταναλωτές, τα ηλεκτρονικά βιβλία, οι ηλεκτρονικές επικοινωνίες και μέρη των επιβατικών μεταφορών. Για έναν ιστότοπο, αυτό σημαίνει το ηλεκτρονικό κατάστημα ή την τραπεζική υπηρεσία στο σύνολό τους, συμπεριλαμβανομένων των φορμών που χρησιμοποιούν οι πελάτες για να επικοινωνήσουν μαζί σας, να κάνουν ερωτήσεις ή να υποβάλουν παράπονα. Οι πολύ μικρές επιχειρήσεις που παρέχουν υπηρεσίες εξαιρούνται: επιχειρήσεις με λιγότερους από δέκα εργαζόμενους και ετήσιο κύκλο εργασιών ή σύνολο ισολογισμού που δεν υπερβαίνει τα 2 εκατομμύρια EUR. Οι προσφορές που απευθύνονται αποκλειστικά σε άλλες επιχειρήσεις βρίσκονται κατά κανόνα εκτός του πεδίου εφαρμογής της.

Κάθε κράτος μέλος έχει μεταφέρει την οδηγία στο εθνικό του δίκαιο. Στη Γερμανία πρόκειται για τον Barrierefreiheitsstärkungsgesetz (BFSG), στην Πολωνία για έναν νόμο του 2024 σχετικά με τη διασφάλιση ότι ορισμένα προϊόντα και υπηρεσίες πληρούν τις απαιτήσεις προσβασιμότητας. Οι εποπτικές αρχές και οι κυρώσεις διαφέρουν από χώρα σε χώρα, αλλά το τεχνικό μέτρο σύγκρισης είναι σε γενικές γραμμές το ίδιο: στην πράξη το ευρωπαϊκό πρότυπο EN 301 549, το οποίο με τη σειρά του βασίζεται στις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού (WCAG).

Γιατί αξίζει τον κόπο ακόμη και χωρίς νομική υποχρέωση

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

Μια πρακτική λίστα ελέγχου με παραπομπές στις WCAG 2.2

• Ορατές ετικέτες συνδεδεμένες με τα πεδία τους (1.3.1, 3.3.2): κάθε πεδίο έχει μια ορατή ετικέτα συνδεδεμένη μέσω for/id. Ένα placeholder από μόνο του δεν είναι ετικέτα – εξαφανίζεται μόλις κάποιος αρχίσει να πληκτρολογεί.
• Μηνύματα σφάλματος που εξηγούν τη διόρθωση (3.3.1, 3.3.3): κατονομάστε το πεδίο, πείτε τι είναι λάθος και πώς διορθώνεται – με κείμενο, όχι μόνο με ένα κόκκινο περίγραμμα. Το «Εισαγάγετε μια διεύθυνση e-mail όπως name@example.com» είναι καλύτερο από το «Μη έγκυρη καταχώριση».
• Πλήρης χειρισμός με πληκτρολόγιο (2.1.1, 2.1.2): κάθε πεδίο, πλαίσιο επιλογής, CAPTCHA και το κουμπί υποβολής μπορούν να προσεγγιστούν και να χρησιμοποιηθούν με Tab, Space και Enter, χωρίς παγίδες πληκτρολογίου.
• Ορατή εστίαση (2.4.7): μπορείτε πάντα να δείτε ποιο πεδίο είναι ενεργό. Η αφαίρεση του περιγράμματος εστίασης του προγράμματος περιήγησης χωρίς αντικατάσταση δεν πληροί αυτό το κριτήριο.
• Επαρκής αντίθεση (1.4.3): το κείμενο, οι ετικέτες και τα μηνύματα σφάλματος έχουν λόγο αντίθεσης τουλάχιστον 4,5:1 σε σχέση με το φόντο (3:1 για μεγάλο κείμενο).
• Μέγεθος στόχου (2.5.8): τα κουμπιά, τα πλαίσια επιλογής και οι σύνδεσμοι έχουν μέγεθος τουλάχιστον 24 × 24 pixels CSS ή αρκετό κενό χώρο γύρω τους.
• Εναλλακτικές για CAPTCHA (1.1.1) και προσβάσιμος έλεγχος ταυτότητας (3.3.8): το 1.1.1 απαιτεί εναλλακτικό κείμενο και το CAPTCHA σε περισσότερες από μία αισθητηριακές μορφές· το 3.3.8 καλύπτει αυστηρά τα βήματα σύνδεσης, αλλά η ιδέα του μεταφέρεται – ένας γρίφος όπως η επαναπληκτρολόγηση παραμορφωμένων γραμμάτων ή η επίλυση ενός αθροίσματος δεν πρέπει να είναι ο μόνος τρόπος να περάσει κανείς. Προσφέρετε μια εναλλακτική ή χρησιμοποιήστε μια μέθοδο που δεν χρειάζεται καθόλου γρίφο.
• Honeypots κρυμμένα από τις υποστηρικτικές τεχνολογίες: το πεδίο-παγίδα λαμβάνει aria-hidden="true" στο περίβλημά του και tabindex="-1", ώστε οι χρήστες αναγνωστών οθόνης και πληκτρολογίου να μην καταλήγουν ποτέ σε αυτό.

CAPTCHA και honeypots: εκεί όπου η προστασία από spam συναντά την προσβασιμότητα

Αυστηρά μιλώντας, το κριτήριο 3.3.8 αφορά βήματα σύνδεσης και ελέγχου ταυτότητας, όχι φόρμες επικοινωνίας. Η ιδέα πίσω από αυτό μεταφέρεται ωστόσο καλά: η πληκτρολόγηση παραμορφωμένων γραμμάτων, η επίλυση ενός αθροίσματος ή η επιλογή φαναριών από ένα πλέγμα εικόνων αποκλείει εντελώς ορισμένους ανθρώπους. Επιλογές που συνήθως λειτουργούν χωρίς κανέναν γρίφο – όπως το Cloudflare Turnstile, το Friendly Captcha, ένα honeypot σε συνδυασμό με έλεγχο χρόνου ή φιλτράρισμα στον διακομιστή όπως το Akismet – κρατούν το spam έξω χωρίς να ζητούν από τους επισκέπτες να αποδείξουν τίποτα. Ένα honeypot είναι φιλικό μόνο αν είναι πραγματικά αόρατο, και για τους χρήστες αναγνωστών οθόνης και πληκτρολογίου:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Αφήστε αυτό το πεδίο κενό</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Δοκιμάστε τη δική σας φόρμα σε δεκαπέντε λεπτά

1. 1Αφήστε το ποντίκι στην άκρη και συμπληρώστε ολόκληρη τη φόρμα μόνο με το πληκτρολόγιο. Μπορείτε να φτάσετε σε κάθε πεδίο και στο κουμπί υποβολής, και βλέπετε πάντα πού βρίσκεστε;
2. 2Υποβάλετε τη φόρμα κενή και στη συνέχεια με λανθασμένη διεύθυνση e-mail. Εμφανίζονται τα σφάλματα ως κείμενο δίπλα στο σωστό πεδίο, και είναι σαφές τι πρέπει να κάνετε;
3. 3Ανοίξτε τη σελίδα σε κινητό ή μεγεθύνετε το πρόγραμμα περιήγησης στο 200%. Είναι όλα ευανάγνωστα, πατιούνται εύκολα τα κουμπιά, και μήπως ένα banner cookies ή ένα widget συνομιλίας καλύπτει το κουμπί υποβολής;
4. 4Ενεργοποιήστε έναν αναγνώστη οθόνης (VoiceOver, NVDA ή TalkBack) και ακούστε: ανακοινώνεται κάθε πεδίο με την ετικέτα του, και παραμένει σιωπηλό το honeypot;
5. 5Εκτελέστε έναν αυτοματοποιημένο έλεγχο όπως το axe-core. Εντοπίζει γρήγορα ετικέτες που λείπουν και προβλήματα αντίθεσης, αλλά όχι τα πάντα – τα παραπάνω χειροκίνητα βήματα εξακολουθούν να χρειάζονται.

Αν προτιμάτε να ξεκινήσετε με μια επισκόπηση, το formexposed εξετάζει τις δημόσιες φόρμες σας από έξω, χωρίς να υποβάλει τίποτα. Οι έλεγχοι προσβασιμότητας εκτελούν το axe-core σε κάθε φόρμα, επισημαίνουν CAPTCHA χωρίς προσβάσιμη εναλλακτική και honeypots που ανακοινώνονται από αναγνώστες οθόνης, και εξετάζουν τη φόρμα σε κινητό – στόχοι αφής, επικαλύψεις που καλύπτουν το κουμπί υποβολής, οριζόντια κύλιση. Ο δωρεάν έλεγχος δείχνει το συνολικό επίπεδο· οι λεπτομέρειες αυτές βρίσκονται στην πλήρη αναφορά. Είναι ένα καλό σημείο εκκίνησης για την παραπάνω λίστα, όχι υποκατάστατο της δοκιμής με πραγματικούς ανθρώπους.