5 συχνά λάθη προσβασιμότητας που βλέπουμε σε ελληνικά e-shops

Το ηλεκτρονικό εμπόριο είναι μία από τις κατηγορίες που καλύπτει ρητά το European Accessibility Act — και ταυτόχρονα μία από τις πιο "πυκνές" σε στοιχεία διεπαφής, άρα και σε πιθανά προβλήματα προσβασιμότητας e-shop. Μετά από αρκετές σαρώσεις σε ελληνικά ηλεκτρονικά καταστήματα, βλέπουμε ξανά και ξανά τα ίδια πέντε μοτίβα. Αν αναγνωρίζετε κάποιο από αυτά στο δικό σας site, δεν είστε μόνοι — είναι εξαιρετικά κοινά.

1. Κάρτες προϊόντων χωρίς σωστό alt text

Η κάρτα ενός προϊόντος σε μια σελίδα κατηγορίας συνήθως περιλαμβάνει μια φωτογραφία, τιμή, και σύντομο τίτλο. Πολύ συχνά, η εικόνα του προϊόντος έχει είτε κενό alt attribute είτε γενικόλογο κείμενο όπως "product-image-01.jpg" — άχρηστο για κάποιον που χρησιμοποιεί screen reader. Το αποτέλεσμα: ένας τυφλός επισκέπτης δεν μπορεί καν να καταλάβει τι προϊόντα βλέπει, πόσο μάλλον να αποφασίσει τι να αγοράσει.

Η διόρθωση είναι απλή σε επίπεδο κώδικα: το alt text πρέπει να περιγράφει το προϊόν με τον ίδιο τρόπο που θα το περιέγραφε ο τίτλος του (π.χ. "Λευκό ανδρικό πουκάμισο με κοντό μανίκι"), όχι απλά "εικόνα προϊόντος".

2. Χαμηλή αντίθεση σε τιμές και εκπτώσεις

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

3. Φίλτρα αναζήτησης μη προσβάσιμα με πληκτρολόγιο

Τα φίλτρα κατηγορίας (μέγεθος, χρώμα, εύρος τιμής) υλοποιούνται συχνά με custom dropdown ή slider στοιχεία που φαίνονται καλά οπτικά αλλά δεν "ανοίγουν" ή δεν λειτουργούν σωστά όταν κάποιος προσπαθεί να τα χρησιμοποιήσει μόνο με πλήκτρο Tab και Enter, χωρίς mouse. Αυτό αποκλείει πλήρως χρήστες με κινητικές δυσκολίες από τη διαδικασία φιλτραρίσματος — ίσως το πιο βασικό εργαλείο σε ένα e-shop με πολλά προϊόντα.

4. Φόρμα checkout χωρίς σαφή μηνύματα σφάλματος

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

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

5. Popup/modal παράθυρα χωρίς σωστή διαχείριση focus

Ένα δημοφιλές μοτίβο σε ελληνικά e-shops είναι το popup προσφοράς/newsletter που εμφανίζεται λίγα δευτερόλεπτα μετά τη φόρτωση της σελίδας. Πολύ συχνά, όταν ανοίγει ένα τέτοιο modal, η "εστίαση" (focus) δεν μεταφέρεται μέσα σε αυτό — ένας χρήστης πληκτρολογίου/screen reader συνεχίζει να "ακούει" ή να πλοηγείται στο περιεχόμενο πίσω από το modal, χωρίς καν να γνωρίζει ότι υπάρχει ένα παράθυρο ανοιχτό μπροστά του. Ακόμα χειρότερα, αν το modal δεν μπορεί να κλείσει με το πλήκτρο Escape ή μέσω πληκτρολογίου γενικά, ο χρήστης μπορεί να "κολλήσει" εντελώς.

Το κοινό νήμα

Παρατηρήστε ότι κανένα από αυτά τα πέντε προβλήματα δεν απαιτεί πλήρες redesign — είναι όλα στοχευμένες, τεχνικές διορθώσεις σε συγκεκριμένα σημεία κώδικα. Αυτό είναι καλό νέο: η βελτίωση της προσβασιμότητας e-shop δεν σημαίνει απαραίτητα μεγάλο κόστος ή χρόνο, αρκεί να ξέρετε ακριβώς πού να κοιτάξετε.

Μια σάρωση με το AccessScan εντοπίζει αυτόματα ακριβώς αυτού του τύπου τα προβλήματα στο δικό σας e-shop, με έτοιμη πρόταση διόρθωσης κώδικα για το καθένα.

Τα παραπάνω αντιπροσωπεύουν γενικά, συχνά παρατηρούμενα μοτίβα και δεν αναφέρονται σε συγκεκριμένο, κατονομαζόμενο ιστότοπο.