Ψηφιακή προσβασιμότητα ιστοσελίδων και EAA: τι ελέγχετε μόνοι σας

Αν πουλάτε online σε καταναλωτές στην ΕΕ, οι απαιτήσεις της Ευρωπαϊκής Πράξης για την Προσβασιμότητα (European Accessibility Act) για την ψηφιακή προσβασιμότητα ιστοσελίδων ισχύουν για το κατάστημά σας από τις 28 Ιουνίου 2025, εκτός αν η επιχείρησή σας είναι πολύ μικρή επιχείρηση. Πολλά από τα σοβαρά προβλήματα μπορείτε να τα βρείτε μόνοι σας: κάντε μια δοκιμαστική παραγγελία μόνο με το πληκτρολόγιο, μεγεθύνετε τη σελίδα και δοκιμάστε κάθε φόρμα. Αυτό που δεν μπορεί να κάνει ένας αυτοέλεγχος είναι να αποδείξει ότι ολόκληρος ο ιστότοπος πληροί το πρότυπο.

Ίσως κάποιος προγραμματιστής να ανέφερε τον νόμο ή ένα email να σας πρόσφερε ένα widget που κάνει κάθε ιστότοπο «συμβατό» με μία γραμμή κώδικα. Ένας πελάτης που δεν μπορεί να ολοκληρώσει το checkout σας με πληκτρολόγιο ή με αναγνώστη οθόνης (λογισμικό που διαβάζει τη σελίδα φωναχτά) μπορεί να πάει σε άλλο κατάστημα χωρίς να παραπονεθεί.

Ισχύει η Ευρωπαϊκή Πράξη για την Προσβασιμότητα για την ιστοσελίδα σας;

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

• Οι πολύ μικρές επιχειρήσεις που παρέχουν υπηρεσίες εξαιρούνται. Αυτό ορίζει το άρθρο 4 παράγραφος 5. Η οδηγία ορίζει την πολύ μικρή επιχείρηση ως επιχείρηση με λιγότερα από 10 άτομα και ετήσιο κύκλο εργασιών ή σύνολο ετήσιου ισολογισμού έως 2 εκατ. ευρώ. Μετράνε και ο αριθμός των ατόμων και ένα από τα δύο οικονομικά κριτήρια: μια ομάδα δέκα ατόμων είναι εκτός εξαίρεσης, όσο μικρός κι αν είναι ο κύκλος εργασιών.
• Πωλήσεις μόνο σε επιχειρήσεις. Ο ορισμός αφορά συμβάσεις με καταναλωτές. Αν ιδιώτες αγοραστές μπορούν να παραγγείλουν μέσω του checkout σας, θεωρήστε ότι ο ιστότοπος καλύπτεται.
• Ιστότοπος που δεν πουλά τίποτα. Ένας εταιρικός ιστότοπος χωρίς παραγγελίες, κρατήσεις ή πληρωμές γενικά δεν είναι υπηρεσία ηλεκτρονικού εμπορίου όπως την ορίζει η οδηγία. Οι κρατήσεις και οι πληρωμές το αλλάζουν αυτό.
• Η ημερομηνία του 2030 αφορά προϊόντα και παλιές συμβάσεις. Η μεταβατική περίοδος έως τις 28 Ιουνίου 2030 του άρθρου 32 καλύπτει προϊόντα που χρησιμοποιούνται για την παροχή υπηρεσίας και συμβάσεις που υπογράφηκαν πριν από τον Ιούνιο του 2025.

Κάθε χώρα της ΕΕ επιβάλλει την Πράξη μέσω δικού της νόμου και ορίζει τις δικές της κυρώσεις· στη Γερμανία ο νόμος αυτός είναι ο BFSG. Αν η επιχείρησή σας βρίσκεται στην Ελβετία ή στο Ηνωμένο Βασίλειο και πουλά σε καταναλωτές στην ΕΕ, ρωτήστε έναν δικηγόρο πώς ισχύουν για εσάς οι κανόνες αυτών των χωρών.

Γιατί τα e-shop αποτυγχάνουν στους ελέγχους προσβασιμότητας;

Τα σφάλματα παρακάτω προέρχονται συνήθως από αποφάσεις σχεδιασμού και φορμών που πάρθηκαν μία φορά σε ένα θέμα (theme) και επαναλαμβάνονται σε κάθε σελίδα. Η οδηγία (ΕΕ) 2019/882 ζητά ιστοτόπους «αντιληπτούς, λειτουργικούς, κατανοητούς και στιβαρούς». Το ευρωπαϊκό πρότυπο που μετατρέπει αυτό σε δοκιμές, το EN 301 549, ακολουθεί τις WCAG, τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού (Web Content Accessibility Guidelines) που δημοσιεύει το W3C. Οι WCAG χωρίζουν τα κριτήριά τους σε τρία επίπεδα: A (το ελάχιστο), AA και AAA. Το επίπεδο AA είναι ο στόχος που χρησιμοποιεί το πρότυπο.

Το πλαίσιο εστίασης αφαιρέθηκε για λόγους εμφάνισης. Όταν κάποιος κινείται σε μια σελίδα με το πλήκτρο Tab, ο browser σχεδιάζει ένα πλαίσιο γύρω από τον ενεργό σύνδεσμο ή το ενεργό κουμπί. Ορισμένα θέματα το κρύβουν επειδή φαίνεται ακατάστατο, παρότι οι WCAG απαιτούν ορατή ένδειξη εστίασης. Ένα κριτήριο που προστέθηκε στις WCAG 2.2 ορίζει επίσης ότι το στοιχείο σε εστίαση δεν πρέπει να κρύβεται εντελώς από το ίδιο το περιεχόμενο του ιστοτόπου, όπως μια σταθερή κεφαλίδα ή ένα banner cookies.

Το κείμενο είναι πολύ αχνό. Οι WCAG ζητούν λόγο αντίθεσης, δηλαδή πόσο πιο σκούρο ή πιο ανοιχτό είναι το κείμενο από το φόντο του, τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Η σάρωση του WebAIM το 2026 σε ένα εκατομμύριο αρχικές σελίδες βρήκε κείμενο χαμηλής αντίθεσης στο 83,9% από αυτές. Ανοιχτό γκρι σε λευκό και λευκό σε κουμπί σε παστέλ απόχρωση είναι οι συνηθισμένες περιπτώσεις.

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

Το checkout φτιάχτηκε για ποντίκι. Προσαρμοσμένα αναπτυσσόμενα μενού, CAPTCHA με παζλ και συνδέσεις που σας ζητούν να θυμηθείτε ή να ξαναπληκτρολογήσετε έναν κωδικό σταματούν όσους χρησιμοποιούν πληκτρολόγιο ή αναγνώστη οθόνης. Η οδηγία αναφέρει χωριστά την ταυτοποίηση, την ασφάλεια και την πληρωμή για το ηλεκτρονικό εμπόριο. Τον Μάρτιο του 2026 η ολλανδική αρχή καταναλωτών ACM ανέφερε ότι στο 61% των μεγάλων ολλανδικών e-shop και άλλων μεγάλων ιστοτόπων για καταναλωτές που έλεγξε, δεν ήταν δυνατό να γίνει παραγγελία με υποστηρικτική τεχνολογία, όπως έναν αναγνώστη οθόνης.

Ένα widget ή μια βαθμολογία παίρνει τη θέση της διόρθωσης. Τα overlay widgets προσθέτουν μια γραμμή εργαλείων προσβασιμότητας πάνω από τον ιστότοπο. Η Ευρωπαϊκή Επιτροπή αναφέρει ότι τα overlays και τα παρόμοια εργαλεία που δεν κάνουν τον ίδιο τον ιστότοπο να πληροί το πρότυπο «δεν αποτελούν κατάλληλη λύση». Ένα αυτοματοποιημένο τεστ βοηθά, αλλά, κατά το W3C, «κανένα εργαλείο μόνο του δεν μπορεί να κρίνει αν ένας ιστότοπος πληροί τα πρότυπα προσβασιμότητας».

Πώς ελέγχετε μόνοι σας την ψηφιακή προσβασιμότητα ιστοσελίδων

Μπορείτε να κάνετε έναν πρώτο έλεγχο με έναν browser και ένα πληκτρολόγιο, χωρίς επί πληρωμή εργαλεία. Το W3C, ο φορέας πίσω από τις WCAG, δημοσιεύει μια σειρά Easy Checks βασισμένη σε αυτή την ιδέα. Διαλέξτε τρεις σελίδες: την αρχική, μια σελίδα προϊόντος ή υπηρεσίας και το checkout ή τη φόρμα επικοινωνίας. Προχωρήστε με τη σειρά και σημειώστε κάθε σημείο όπου κολλάτε.

1. Βάλτε το ποντίκι στην άκρη. Κινηθείτε σε κάθε σελίδα με Tab και Shift+Tab και χρησιμοποιήστε Enter, το πλήκτρο διαστήματος και τα βελάκια. Πρέπει να φτάνετε στο μενού, στα φίλτρα, στο κουμπί προσθήκης στο καλάθι, σε κάθε πεδίο φόρμας και στο κουμπί πληρωμής. Πρέπει ανά πάσα στιγμή να βλέπετε πού βρίσκεστε. Σημειώστε πού το πλαίσιο χάνεται πίσω από μια σταθερή κεφαλίδα ή ένα banner cookies και αν μπορείτε να βγείτε από ένα μενού ή ένα παράθυρο chat.
2. Μεγεθύνετε. Ρυθμίστε τον browser στο 200%. Οι WCAG προβλέπουν ότι το κείμενο παραμένει ευανάγνωστο χωρίς να κόβεται ή να επικαλύπτεται περιεχόμενο. Έπειτα κάντε το παράθυρο περίπου 1280 pixel πλάτος και μεγεθύνετε στο 400%: το περιεχόμενο πρέπει να χωρά στο πλάτος χωρίς οριζόντια κύλιση, εκτός από στοιχεία όπως χάρτες και πίνακες δεδομένων.
3. Ελέγξτε το αχνό κείμενο. Τα εργαλεία προγραμματιστή σε Chrome, Edge και Firefox δείχνουν τον λόγο αντίθεσης ενός επιλεγμένου χρώματος κειμένου. Ελέγξτε το κυρίως κείμενο, τις τιμές, τα κουμπιά και το μικρό γκρι κείμενο κάτω από τα πεδία φορμών.
4. Δοκιμάστε κάθε φόρμα κενή και μετά λάθος συμπληρωμένη. Κάθε πεδίο χρειάζεται ορατή ετικέτα που παραμένει όταν γράφετε. Υποβάλετε τη φόρμα κενή: το σφάλμα πρέπει να λέει με λέξεις τι λείπει, δίπλα στο πεδίο, και να διατηρείται ό,τι έχετε ήδη γράψει. Ένα νέο κριτήριο των WCAG 2.2 ζητά επίσης οι πληροφορίες που έχετε ήδη εισαγάγει στην ίδια διαδικασία, όπως μια διεύθυνση, να συμπληρώνονται αυτόματα ή να προσφέρονται για επιλογή. Άλλους τρόπους με τους οποίους μια φόρμα σας κοστίζει παραγγελίες θα βρείτε στο άρθρο μας για επισκέψεις στον ιστότοπο χωρίς αιτήματα.
5. Συνδεθείτε και περάστε τον έλεγχο κατά του spam. Οι WCAG 2.2 ορίζουν ότι η σύνδεση δεν πρέπει να εξαρτάται από τεστ γνωστικής λειτουργίας, όπως η απομνημόνευση κωδικού ή η επίλυση παζλ, εκτός αν υπάρχει εναλλακτική ή βοήθεια, όπως ένας διαχειριστής κωδικών πρόσβασης ή η επικόλληση. Ένα CAPTCHA με παζλ χωρίς άλλη επιλογή αποτυγχάνει εδώ.
6. Δείτε τις φωτογραφίες προϊόντων. Κάντε δεξί κλικ σε μια εικόνα και επιλέξτε Επιθεώρηση. Το εναλλακτικό κείμενο (alt), η σύντομη περιγραφή που διαβάζει φωναχτά ένας αναγνώστης οθόνης, πρέπει να λέει τι είναι το προϊόν· οι καθαρά διακοσμητικές εικόνες μπορούν να το έχουν κενό.
7. Επαναλάβετε τα βασικά βήματα σε κινητό. Τα μικρά εικονίδια που βρίσκονται κοντά το ένα στο άλλο πατιούνται δύσκολα. Οι WCAG 2.2 ορίζουν ελάχιστο μέγεθος στόχου 24 επί 24 CSS pixel (μονάδα μεγέθους της ίδιας της ιστοσελίδας), με εξαιρέσεις όπως επαρκής χώρος γύρω από τον στόχο.

Το W3C σημειώνει ότι μια σελίδα «μπορεί να φαίνεται ότι περνά αυτούς τους ελέγχους, αλλά να έχει ακόμη σημαντικά εμπόδια προσβασιμότητας». Το επόμενο βήμα είναι μια δοκιμή από κάποιον που χρησιμοποιεί αναγνώστη οθόνης κάθε μέρα.

Τι διορθώνετε πρώτα;

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

1. Μην εγκαταστήσετε overlay. Η συμβουλή της Ευρωπαϊκής Επιτροπής είναι να διορθώνονται τα προβλήματα προσβασιμότητας «στην πηγή τους», που για ένα e-shop σημαίνει το θέμα, τις φόρμες και το checkout.
2. Επαναφέρετε το πλαίσιο εστίασης και σκουρύνετε το κείμενο. Και τα δύο βρίσκονται συνήθως στις ρυθμίσεις χρωμάτων και στυλ του θέματος. Εμείς ξεκινάμε ορίζοντας την αντίθεση μία φορά στην παλέτα του σχεδιασμού και ελέγχοντάς την στην ανοιχτή και στη σκούρα εκδοχή του ιστοτόπου, ώστε μια νέα σελίδα να ξεκινά με χρώματα που ήδη περνούν τον έλεγχο.
3. Ξαναφτιάξτε τις φόρμες. Ορατές ετικέτες, σφάλματα με λέξεις δίπλα στο πεδίο, δεδομένα που διατηρούνται μετά από σφάλμα, εστίαση που μεταφέρεται στο πρώτο πεδίο που χρειάζεται διόρθωση και αυτόματη συμπλήρωση του browser για όνομα, email και διεύθυνση. Στα έργα ιστοσελίδων που αναλαμβάνουμε ξεκινάμε από το ίδιο το component της φόρμας, ώστε κάθε νέα φόρμα να ξεκινά με αυτές τις διορθώσεις.
4. Προσθέστε εναλλακτικό κείμενο και τη γλώσσα της σελίδας. Περιγράψτε τις φωτογραφίες προϊόντων και περιεχομένου και φροντίστε κάθε σελίδα να δηλώνει τη γλώσσα της, ώστε ο αναγνώστης οθόνης να την προφέρει σωστά. Οι μηχανές αναζήτησης διαβάζουν το ίδιο εναλλακτικό κείμενο και το ίδιο χαρακτηριστικό γλώσσας, γι’ αυτό ανήκουν και στο τεχνικό SEO.
5. Διορθώστε checkout, σύνδεση και widgets τρίτων. Αντικαταστήστε τα CAPTCHA με παζλ με ελέγχους που δεν ζητούν από τον πελάτη να λύσει τίποτα και προσφέρετε τρόπο σύνδεσης που δεν εξαρτάται από τη μνήμη. Τα widgets πληρωμής και chat προέρχονται από προμηθευτές: ζητήστε από κάθε προμηθευτή τις πληροφορίες προσβασιμότητάς του και αντικαταστήστε όσα δεν είναι προσβάσιμα με πληκτρολόγιο.
6. Δημοσιεύστε τις πληροφορίες προσβασιμότητάς σας. Το παράρτημα V της οδηγίας ζητά από τους παρόχους υπηρεσιών να περιγράφουν πώς η υπηρεσία πληροί τις απαιτήσεις, στους γενικούς όρους και προϋποθέσεις ή σε ισοδύναμο έγγραφο. Οι λεπτομέρειες ορίζονται από τον εθνικό σας νόμο.
7. Στοχεύστε στις WCAG 2.2 επιπέδου AA. Η έκδοση 4.1.1 του EN 301 549, που δημοσιεύθηκε τον Σεπτέμβριο του 2026, προσθέτει έξι απαιτήσεις από τις WCAG 2.2, αναφέρει το AccessibleEU. Έως ότου η Επιτροπή την παραθέσει στην Επίσημη Εφημερίδα της Ευρωπαϊκής Ένωσης, σημειώνει η ίδια πηγή, αναφορά παραμένει η έκδοση 3.2.1, που βασίζεται στις WCAG 2.1 επιπέδου AA. Η ιρλανδική National Disability Authority αναμένει την παράθεση στις 16 Δεκεμβρίου 2026. Αν διορθώσετε τώρα με βάση τις WCAG 2.2, οι νέες απαιτήσεις θα καλύπτονται όταν συμβεί αυτό.

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

Τι μετράτε μετά τις διορθώσεις;

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

1. Μια δοκιμαστική παραγγελία μόνο με πληκτρολόγιο, από τη σελίδα προϊόντος έως την επιβεβαίωση, χωρίς να αγγίξετε το ποντίκι.
2. Η λίστα ευρημάτων από ένα δωρεάν αυτοματοποιημένο τεστ, όπως το Lighthouse στο Chrome, στους ίδιους τρεις τύπους σελίδων. Εξετάστε τα ευρήματα και ελέγξτε ποια παραμένουν.
3. Φόρμες που υποβάλλονται με σφάλματα, για να επιβεβαιώσετε ότι κάθε σφάλμα περιγράφεται με λέξεις και ότι δεν χάνεται τίποτα από όσα πληκτρολογήθηκαν.
4. Οι δημοσιευμένες πληροφορίες προσβασιμότητάς σας, ενημερωμένες μετά από κάθε αλλαγή που επηρεάζει τον τρόπο με τον οποίο παραγγέλνουν οι πελάτες.

Πού μπαίνουμε εμείς

Όταν εξετάζουμε το checkout ενός e-shop, ακολουθούμε τη διαδρομή του πελάτη: τη σελίδα προϊόντος, το καλάθι, τις φόρμες και το βήμα πληρωμής, πρώτα με το πληκτρολόγιο και μετά σε κινητό. Τα προβλήματα που βρίσκονται στο θέμα ή στα components των φορμών διορθώνονται φθηνότερα εκεί· ό,τι δεν μπορεί να κρίνει ένας αυτοέλεγχος το αφήνουμε για δοκιμή με αναγνώστη οθόνης. Αν θέλετε μια δεύτερη ματιά στο checkout σας, πείτε μας για τον ιστότοπό σας.

← Όλα τα άρθρα