Γιατί ένα PrestaShop E-Shop Χρειάζεται Καλή Web Accessibility

Η web accessibility σε ένα e-shop σημαίνει ότι όσο το δυνατόν περισσότεροι χρήστες μπορούν να βρουν προϊόντα, να κατανοήσουν τις επιλογές τους και να ολοκληρώσουν μια αγορά χωρίς εμπόδια που δημιουργεί το ίδιο το interface.

Σε ένα PrestaShop e-shop η προσβασιμότητα δεν αφορά μόνο το κείμενο και τα χρώματα. Αφορά menus, search, filters, combinations, product pages, forms, cart και checkout. Για αυτό πρέπει να αντιμετωπίζεται σαν μέρος της τεχνικής ποιότητας του καταστήματος.

Ποιοι χρήστες επωφελούνται;

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

Για παράδειγμα, η σωστή keyboard navigation είναι απαραίτητη για κάποιον που δεν χρησιμοποιεί ποντίκι, αλλά ένα καθαρό focus state βοηθά γενικότερα να γίνει πιο κατανοητό το interface.

Η προσβασιμότητα δεν είναι «SEO ranking factor» που ανεβάζει αυτόματα θέσεις

Η προσβασιμότητα και το SEO έχουν κοινές καλές πρακτικές, όπως semantic structure, κατανοητό περιεχόμενο και σωστά text alternatives, αλλά δεν πρέπει να παρουσιάζεται η accessibility σαν μαγικός τρόπος για υψηλότερη κατάταξη.

Η SEO βελτιστοποίηση και η accessibility είναι διαφορετικά αντικείμενα. Μπορούν να υποστηρίζουν την τεχνική ποιότητα του ίδιου site, αλλά χρειάζονται ξεχωριστή αξιολόγηση.

Navigation και menus

Ένα menu πρέπει να μπορεί να χρησιμοποιηθεί με προβλέψιμο τρόπο και χωρίς να εγκλωβίζει τον χρήστη. Submenus, mobile navigation και mega menus είναι σημεία όπου συχνά εμφανίζονται keyboard ή focus προβλήματα.

Η λογική σειρά των links και η σαφής ονομασία τους βοηθούν επίσης τόσο screen-reader users όσο και χρήστες που θέλουν απλώς να βρουν γρήγορα μια κατηγορία.

Search και filters

Σε e-commerce, τα filters μπορεί να είναι σύνθετα interactive components. Brand, price, size, colour και άλλα criteria πρέπει να είναι κατανοητά και λειτουργικά και χωρίς αποκλειστική χρήση mouse.

Το ίδιο ισχύει για autocomplete και search suggestions. Το interface πρέπει να επικοινωνεί με σαφή τρόπο τι έχει επιλεγεί και ποια αποτελέσματα εμφανίζονται.

Product pages και combinations

Buttons, selectors, quantity controls, size/color options και availability messages πρέπει να έχουν σωστή σημασιολογία και κατανοητό state.

Σε πιο εξειδικευμένα PrestaShop catalogs, όπου υπάρχουν πολλές combinations ή custom modules, ο accessibility έλεγχος πρέπει να καλύπτει και αυτές τις custom λειτουργίες και όχι μόνο το base theme.

Cart και checkout

Το checkout είναι κρίσιμο user journey. Labels, required fields, validation messages, payment choices και shipping methods πρέπει να μπορούν να γίνουν αντιληπτά και να χρησιμοποιηθούν σωστά.

Αν ο χρήστης δεν μπορεί να καταλάβει ποιο πεδίο έχει λάθος ή δεν μπορεί να ενεργοποιήσει ένα control με keyboard, το πρόβλημα είναι λειτουργικό και όχι απλώς αισθητικό.

Contrast, focus και information states

Το χρώμα δεν πρέπει να είναι ο μοναδικός τρόπος με τον οποίο επικοινωνείται ένα error, availability state ή selected option. Το κείμενο και σημαντικά UI controls χρειάζονται επαρκή contrast.

Παράλληλα, ο χρήστης που κινείται με keyboard πρέπει να βλέπει πού βρίσκεται το focus και το focused στοιχείο να μην καλύπτεται από sticky headers ή overlays.

Alt text στις εικόνες προϊόντων

Οι εικόνες που μεταφέρουν ουσιαστική πληροφορία χρειάζονται κατάλληλο alternative text. Δεν χρειάζεται όμως κάθε διακοσμητική εικόνα να έχει μεγάλη περιγραφή, ούτε το alt text να χρησιμοποιείται για keyword stuffing.

Η περιγραφή πρέπει να εξυπηρετεί τον ρόλο της εικόνας στη συγκεκριμένη σελίδα.

Automated accessibility scores δεν είναι πιστοποιητικό

Εργαλεία όπως Lighthouse/PageSpeed Insights, WAVE και άλλα accessibility scanners είναι χρήσιμα για να εντοπιστούν ορισμένες κατηγορίες προβλημάτων. Δεν μπορούν όμως να ελέγξουν πλήρως αν ένα checkout είναι πραγματικά εύχρηστο με keyboard ή αν ένα alt text περιγράφει σωστά την εικόνα.

Ένα υψηλό automated score δεν ισοδυναμεί με πλήρη accessibility ή νομική συμμόρφωση. Χρειάζεται και manual testing.

Accessibility toolbar: χρήσιμο συμπλήρωμα, όχι ολόκληρη η λύση

Ένα accessibility toolbar μπορεί να προσφέρει βοηθητικές επιλογές στον χρήστη, αλλά δεν διορθώνει λάθος HTML semantics, keyboard traps, inaccessible filters ή προβλήματα στο checkout.

Για αυτό η σωστή βελτιστοποίηση προσβασιμότητας εξετάζει τον κώδικα και τα πραγματικά user journeys.

Προσβασιμότητα και European Accessibility Act

Για ορισμένες υπηρεσίες ηλεκτρονικού εμπορίου η accessibility έχει πλέον και κανονιστική διάσταση στην Ευρωπαϊκή Ένωση. Το αν και πώς εφαρμόζονται οι απαιτήσεις σε μια συγκεκριμένη επιχείρηση χρειάζεται ξεχωριστή νομική αξιολόγηση.

Έχουμε αναλυτικότερο άρθρο για το European Accessibility Act και το e-commerce.

Γιατί το PrestaShop είναι καλή βάση για τεχνικές διορθώσεις

Επειδή το PrestaShop είναι open-source, έχουμε πρόσβαση στο template, στα modules και στον κώδικα που δημιουργεί τα interactive στοιχεία του store. Αυτό μας επιτρέπει να διορθώνουμε την πραγματική πηγή ενός accessibility προβλήματος αντί να περιοριζόμαστε σε ένα overlay.

Όταν το πρόβλημα προέρχεται από custom module ή εξειδικευμένο checkout/catalog workflow, μπορούμε να το αντιμετωπίσουμε στο επίπεδο της ίδιας της υλοποίησης.

Πώς αναλαμβάνουμε accessibility optimization

Ξεκινάμε με έλεγχο των βασικών templates και journeys: homepage όπου χρειάζεται, navigation, categories, product pages, filters, forms, cart και checkout. Τα findings οργανώνονται ανά σοβαρότητα και πηγή.

Στη συνέχεια εφαρμόζονται στοχευμένες διορθώσεις σε content, template ή modules. Αν θέλετε να ελέγξουμε το δικό σας website ή PrestaShop store, δείτε την υπηρεσία Βελτιστοποίησης Προσβασιμότητας Ιστοσελίδων.