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

Η βελτιστοποίηση προσβασιμότητας δεν είναι ένα toolbar ή ένα plugin που «διορθώνει» αυτόματα ολόκληρη την ιστοσελίδα. Πολλά προβλήματα βρίσκονται μέσα στη δομή HTML, στο template, στα menus, στις φόρμες, στα χρώματα, στα components ή στον τρόπο με τον οποίο έχει οργανωθεί το ίδιο το περιεχόμενο.

Πρακτικός έλεγχος με βάση τις αρχές WCAG

Χρησιμοποιούμε τις Web Content Accessibility Guidelines (WCAG) ως τεχνικό πλαίσιο αναφοράς για τον έλεγχο και την προτεραιοποίηση διορθώσεων. Η αξιολόγηση μπορεί να περιλαμβάνει περιεχόμενο, navigation, keyboard interaction, focus, contrast, φόρμες, εικόνες και διαδραστικά στοιχεία.

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

Τι μπορούμε να ελέγξουμε και να βελτιώσουμε

• Δομή headings και semantic HTML ώστε το περιεχόμενο να έχει λογική ιεραρχία.
• Keyboard navigation για menus, links, buttons, forms και άλλα λειτουργικά στοιχεία.
• Focus states ώστε ο χρήστης να μπορεί να βλέπει πού βρίσκεται κατά την πλοήγηση με πληκτρολόγιο.
• Χρωματική αντίθεση και αναγνωσιμότητα σε κείμενα και σημαντικά UI στοιχεία.
• Alt text και text alternatives για εικόνες που μεταφέρουν πληροφορία.
• Labels, instructions και error messages στις φόρμες.
• Links και buttons με κατανοητό σκοπό και σωστή συμπεριφορά.
• Skip links και navigation landmarks όπου είναι χρήσιμα.
• ARIA attributes όταν είναι πραγματικά απαραίτητα και δεν υπάρχει κατάλληλη native HTML λύση.
• Joomla και PrestaShop templates/modules που δημιουργούν εμπόδια στην πλοήγηση ή στη χρήση.

Semantic HTML και σωστή δομή περιεχομένου

Η σωστή χρήση headings, lists, buttons, links, labels και άλλων HTML στοιχείων βοηθά το περιεχόμενο να έχει σαφή δομή. Όταν η εμφάνιση δημιουργείται με στοιχεία που δεν έχουν τη σωστή σημασιολογία, μπορεί να είναι κατανοητή οπτικά αλλά πολύ πιο δύσκολη για χρήστες assistive technologies.

Κατά τον έλεγχο εξετάζουμε αν η δομή μπορεί να βελτιωθεί με κατάλληλα native HTML στοιχεία πριν προστεθούν πιο σύνθετες ARIA λύσεις.

Πλοήγηση με πληκτρολόγιο

Βασικές λειτουργίες μιας ιστοσελίδας πρέπει να μπορούν να χρησιμοποιηθούν χωρίς να απαιτείται αποκλειστικά ποντίκι. Ελέγχουμε menus, links, buttons, modal στοιχεία, φόρμες και άλλα διαδραστικά components για προβλήματα keyboard access.

Ιδιαίτερη σημασία έχει να μην δημιουργούνται keyboard traps, δηλαδή σημεία στα οποία ο χρήστης μπορεί να μεταφέρει το focus αλλά δεν μπορεί να φύγει από αυτά με φυσιολογικό τρόπο.

Focus που είναι ορατό και δεν κρύβεται

Ο χρήστης που κινείται με Tab ή άλλο keyboard input πρέπει να μπορεί να καταλάβει ποιο στοιχείο είναι ενεργό. Ελέγχουμε αν τα focus indicators είναι ορατά και αν sticky headers, banners, overlays ή άλλα στοιχεία κρύβουν το focused control.

Αυτό είναι σημαντικό σε menus, forms, buttons και οποιοδήποτε interface περιλαμβάνει διαδοχική keyboard πλοήγηση.

Χρώμα, contrast και αναγνωσιμότητα

Το κείμενο και τα βασικά στοιχεία interface πρέπει να διακρίνονται από το background και η πληροφορία δεν πρέπει να βασίζεται αποκλειστικά στο χρώμα. Εξετάζουμε προβλήματα contrast και περιπτώσεις όπου status, errors ή επιλογές γίνονται αντιληπτά μόνο μέσα από μια αλλαγή χρώματος.

Εικόνες και εναλλακτικό κείμενο

Οι εικόνες που μεταφέρουν πληροφορία χρειάζονται κατάλληλη text alternative. Το alt text δεν πρέπει να γεμίζει μηχανικά με keywords ούτε να επαναλαμβάνει άσκοπα το γύρω κείμενο. Πρέπει να εξυπηρετεί τον σκοπό της συγκεκριμένης εικόνας.

Οι καθαρά διακοσμητικές εικόνες αντιμετωπίζονται διαφορετικά από εικόνες προϊόντων, diagrams, icons ή άλλα γραφικά που μεταφέρουν ουσιαστική πληροφορία.

Φόρμες που εξηγούν τι ζητούν

Οι φόρμες επικοινωνίας, login, checkout και άλλα input interfaces είναι συχνά σημεία όπου εμφανίζονται εμπόδια. Ελέγχουμε τη σχέση label και field, τις οδηγίες, τα required fields, τα error messages και τη δυνατότητα keyboard interaction.

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

Accessibility σε Joomla

Σε Joomla η τελική προσβασιμότητα επηρεάζεται από το template, τα modules, τα menu components, τις φόρμες και τον τρόπο που έχει δημιουργηθεί το περιεχόμενο. Ένας έλεγχος μπορεί να εντοπίσει αν το πρόβλημα βρίσκεται στο ίδιο το Joomla content, στο template ή σε συγκεκριμένο extension.

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

Accessibility σε PrestaShop

Σε ένα PrestaShop e-shop ο έλεγχος χρειάζεται να περιλαμβάνει όχι μόνο στατικές σελίδες αλλά και product listings, filters, product pages, cart, checkout, account forms και modules που προσθέτουν interactive functionality.

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

Automated checks και manual testing

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

Για αυτό ένας πρακτικός έλεγχος συνδυάζει automated findings με manual έλεγχο σε βασικές διαδρομές και interactive elements.

Προτεραιοποίηση διορθώσεων

Σε ένα υπάρχον site μπορεί να υπάρχουν πολλά findings. Δεν έχουν όλα την ίδια επίδραση. Προτεραιότητα δίνεται σε προβλήματα που μπλοκάρουν βασική πλοήγηση ή ενέργειες, όπως αδυναμία χρήσης menu ή checkout με keyboard, μη κατανοητές φόρμες ή στοιχεία που δεν μπορούν να γίνουν αντιληπτά σωστά.

Προσβασιμότητα ως συνεχής διαδικασία

Ένα site αλλάζει με νέο περιεχόμενο, modules, templates και λειτουργίες. Για αυτό η προσβασιμότητα χρειάζεται να λαμβάνεται υπόψη και στις μελλοντικές αλλαγές. Μια σωστή σημερινή διόρθωση μπορεί να χαθεί αν ένα νέο component εισάγει ξανά το ίδιο πρόβλημα.

Πώς ξεκινά η συνεργασία

Ξεκινάμε με τον έλεγχο της υπάρχουσας ιστοσελίδας και των βασικών user journeys. Καταγράφονται τα προβλήματα, η πιθανή πηγή τους και η προτεραιότητα των διορθώσεων. Στη συνέχεια μπορούν να εφαρμοστούν αλλαγές στο περιεχόμενο, στο template ή στα components όπου αυτό είναι τεχνικά εφικτό.

Η υπηρεσία έχει στόχο τη βελτίωση της πραγματικής προσβασιμότητας και όχι την παραγωγή ενός απλού score ή ενός σήματος «συμμόρφωσης» χωρίς τεχνική τεκμηρίωση.

Λεπτομέρειες

Κατηγορία: Υπηρεσίες

Δημοσιεύθηκε : 05 Σεπτεμβρίου 2019