Έλεγχος προσβασιμότητας ιστότοπου: δωρεάν εργαλεία και τεστ

Να μια ιστορία που ακούμε συχνά. Κάποιος τρέχει το Lighthouse, παίρνει ένα πράσινο 100 στην προσβασιμότητα και προχωρά. Μια εβδομάδα αργότερα ένας πελάτης γράφει ότι δεν μπόρεσε να πληρώσει, γιατί στη φόρμα της κάρτας δεν φτάνει κανείς με το πληκτρολόγιο. Ισχύουν και τα δύο. Ο αυτόματος έλεγχος πέρασε, και ο ιστότοπος απέτυχε μπροστά σε έναν πραγματικό άνθρωπο.

Αυτός ο οδηγός δείχνει πώς να κάνετε σωστό έλεγχο με μικρό προϋπολογισμό: ποια δωρεάν εργαλεία να τρέξετε, μια χειροκίνητη ρουτίνα 15 λεπτών, μια πρώτη δοκιμή με αναγνώστη οθόνης και πότε αξίζει να πληρώσετε για αξιολόγηση (audit).

Μπορεί ένα εργαλείο αυτόματου ελέγχου να μου πει αν ο ιστότοπός μου είναι προσβάσιμος;

Όχι. Τα εργαλεία αυτόματου ελέγχου βρίσκουν γρήγορα κάποια προβλήματα, αλλά πολλά ερωτήματα προσβασιμότητας θέλουν άνθρωπο για να απαντηθούν. Όταν η Government Digital Service (GDS) της βρετανικής κυβέρνησης δοκίμασε 10 εργαλεία σε μια σελίδα με 143 γνωστές αστοχίες, το καλύτερο βρήκε το 41%. Το W3C το λέει ξεκάθαρα: τα εργαλεία αξιολόγησης «δεν μπορούν να κρίνουν την προσβασιμότητα, μπορούν μόνο να βοηθήσουν σε αυτό».

Η δοκιμή της GDS (ανοίγει σε νέα καρτέλα) έγινε τον Φεβρουάριο του 2017, και το 41% (του Asqatasun) περιλάμβανε και τις υποδείξεις του εργαλείου για χειροκίνητους ελέγχους. Τα εργαλεία έχουν βελτιωθεί από τότε, αλλά το κενό έχει την ίδια αιτία. Ένα λογισμικό μπορεί να καταλάβει ότι μια εικόνα δεν έχει εναλλακτικό κείμενο. Δεν μπορεί να καταλάβει ότι το «κόκκινο φόρεμα» είναι λάθος περιγραφή για τη φωτογραφία ενός μπλε κοστουμιού, ούτε αν η σειρά εστίασης βγάζει νόημα.

Δείτε λοιπόν ένα εργαλείο ελέγχου σαν ανιχνευτή καπνού, όχι σαν αυτοψία μηχανικού. Αξίζει πάντως να το τρέχετε: το WebAIM Million 2026 (ανοίγει σε νέα καρτέλα) βρήκε ανιχνεύσιμες αστοχίες στο 95,9% του ενός εκατομμυρίου κορυφαίων αρχικών σελίδων, οπότε στους περισσότερους ιστότοπους υπάρχουν εύκολες διορθώσεις που μπορούν να γίνουν αμέσως. Όπως λέει ο οδηγός του W3C για την επιλογή εργαλείων (ανοίγει σε νέα καρτέλα), «Απαιτείται ανθρώπινη κρίση».

Ποια δωρεάν εργαλεία ελέγχου προσβασιμότητας να χρησιμοποιήσω;

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

Τι μπορώ να ελέγξω με το χέρι σε 15 λεπτά;

Αρκετά πράγματα. Οι Easy Checks (ανοίγει σε νέα καρτέλα) («Εύκολοι έλεγχοι») του W3C καλύπτουν τίτλους σελίδων, εναλλακτικό κείμενο, επικεφαλίδες, αντίθεση, συνδέσμους παράκαμψης, ορατή εστίαση πληκτρολογίου, γλώσσα σελίδας, ζουμ, υπότιτλους και ετικέτες φορμών. Διαλέξτε μία σημαντική σελίδα, όπως μια σελίδα προϊόντος ή τη φόρμα κρατήσεων, και δώστε σε κάθε έλεγχο ένα με δύο λεπτά. Θα βρείτε πράγματα που κανένα εργαλείο δεν αναφέρει.

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

1. Τίτλος σελίδας (1 λεπτό). Λέει η καρτέλα του προγράμματος περιήγησης τι είναι η σελίδα, π.χ. «Κράτηση τραπεζιού | Ταβέρνα της Ρόζας», αντί για «Αρχική» παντού;
2. Εικόνες (2 λεπτά). Εμφανίστε το εναλλακτικό κείμενο με το WAVE ή κάποιο παρόμοιο εργαλείο. Είναι ακριβές; Παραλείπονται τα διακοσμητικά στοιχεία;
3. Επικεφαλίδες (2 λεπτά). Βγάλτε τη λίστα των επικεφαλίδων και διαβάστε τες μόνες τους. Λειτουργούν σαν πίνακας περιεχομένων;
4. Αντίθεση (2 λεπτά). Ελέγξτε το κυρίως κείμενο, το μικρό γκρι κείμενο, το κείμενο των κουμπιών και το κείμενο πάνω σε εικόνες.
5. Πληκτρολόγιο (4 λεπτά). Αφήστε το ποντίκι στην άκρη και περάστε τη σελίδα με το Tab (δείτε την επόμενη ενότητα).
6. Ζουμ (2 λεπτά). Στο 200% και μετά στο 400%, μπορείτε ακόμη να διαβάσετε τα πάντα και να χρησιμοποιήσετε το μενού χωρίς οριζόντια κύλιση;
7. Φόρμες και γλώσσα (2 λεπτά). Κάντε κλικ στην ετικέτα κάθε πεδίου· σε μια σωστά φτιαγμένη φόρμα, ο κέρσορας μπαίνει μέσα στο πεδίο. Δείτε στην αναφορά του εργαλείου αν λείπει η γλώσσα της σελίδας.

Πώς ελέγχω με το πληκτρολόγιο;

Βάλτε το ποντίκι στην άκρη. Πατήστε Tab για να προχωρήσετε, Shift+Tab για να γυρίσετε πίσω, Enter για να ακολουθήσετε συνδέσμους, Space ή Enter για να πατήσετε κουμπιά και τα βελάκια μέσα σε μενού και κουμπιά επιλογής (radio buttons). Κάθε διαδραστικό στοιχείο πρέπει να είναι προσβάσιμο, πρέπει πάντα να βλέπετε πού βρίσκεστε και δεν πρέπει ποτέ να εγκλωβίζεστε.

Σε Mac, το Safari προσπερνά τους συνδέσμους με το Tab, μέχρι να ενεργοποιήσετε στις ρυθμίσεις «Για προχωρημένους» την επιλογή για επισήμανση κάθε στοιχείου της ιστοσελίδας με το Tab (στα αγγλικά «Press Tab to highlight each item on a webpage»). Έπειτα ελέγξτε:

• Βλέπετε πάντα πού βρίσκεστε; Αν το περίγραμμα εστίασης εξαφανιστεί, ο χρήστης πληκτρολογίου χάνεται.
• Είναι λογική η σειρά; Η εστίαση πρέπει να ακολουθεί τη σειρά ανάγνωσης.
• Κρύβεται κάτι; Μια σταθερή κεφαλίδα ή ένα banner για cookies που καλύπτει το στοιχείο με την εστίαση αποτυγχάνει στο κριτήριο Μη απόκρυψη εστίασης (Focus Not Obscured) του WCAG 2.2.
• Μπορείτε να βγείτε ξανά; Ανοίξτε κάθε μενού, αναδυόμενο παράθυρο και επιλογέα ημερομηνίας και μετά προσπαθήστε να βγείτε. Το Escape πρέπει να κλείνει τα παράθυρα διαλόγου.
• Λειτουργεί όλη η διαδρομή; Προσθέστε ένα προϊόν στο καλάθι, αλλάξτε την ποσότητα, βάλτε έναν εκπτωτικό κωδικό και φτάστε στην πληρωμή χωρίς ποντίκι.

Καταγράψτε κάθε αστοχία με ακρίβεια: το «Ο επιλογέας μεγέθους στη σελίδα προϊόντος δεν ανοίγει με Enter ή Space» διορθώνεται πολύ πιο γρήγορα από το «δεν δουλεύει το πληκτρολόγιο».

Πώς κάνω την πρώτη μου δοκιμή με αναγνώστη οθόνης;

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

• Mac: το Command+F5 ενεργοποιεί και απενεργοποιεί το VoiceOver· το Control+Option+U ανοίγει τον ρότορα, μια λίστα με επικεφαλίδες, συνδέσμους και στοιχεία φορμών.
• Windows: στο NVDA, πατήστε H για να πηγαίνετε από επικεφαλίδα σε επικεφαλίδα και Insert+F7 για λίστα με συνδέσμους και επικεφαλίδες.
• Κινητό: ενεργοποιήστε το VoiceOver (iPhone) ή το TalkBack (Android) και σύρετε το δάχτυλο προς τα δεξιά για να περνάτε από στοιχείο σε στοιχείο. Μάθετε πρώτα πώς απενεργοποιείται.

Δώστε προσοχή σε ό,τι μετράει περισσότερο. Στην έρευνα του WebAIM για τους αναγνώστες οθόνης του 2024 (ανοίγει σε νέα καρτέλα), το 71,6% των συμμετεχόντων είπε ότι σε μια μεγάλη σελίδα πλοηγείται πρώτα μέσω των επικεφαλίδων, οπότε ξεκινήστε από εκεί. Έπειτα ανοίξτε τη λίστα συνδέσμων: πέντε σύνδεσμοι με το όνομα «Διαβάστε περισσότερα» δεν λένε τίποτα σε κανέναν. Το «Προσθήκη στο καλάθι, πουλόβερ σε σκούρο μπλε» είναι χρήσιμο κουμπί· ένα σκέτο «κουμπί» δεν είναι. Τέλος, συμπληρώστε μια φόρμα και ελέγξτε ότι κάθε πεδίο και κάθε σφάλμα διαβάζεται φωναχτά.

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

Πώς ελέγχω το ζουμ, την αναδιάταξη και τις αποστάσεις κειμένου;

Μεγεθύνετε το πρόγραμμα περιήγησης στο 200% και ελέγξτε ότι το κείμενο μεγαλώνει χωρίς να κόβεται και χωρίς να πέφτει το ένα πάνω στο άλλο. Μετά ελέγξτε την αναδιάταξη: σε ζουμ 400% και σε παράθυρο πλάτους 1.280 pixel, το περιεχόμενο πρέπει να χωρά χωρίς οριζόντια κύλιση. Τέλος, αυξήστε την απόσταση ανάμεσα σε γράμματα, λέξεις, γραμμές και παραγράφους και βεβαιωθείτε ότι τίποτα δεν χαλάει ή δεν εξαφανίζεται.

Αυτά αντιστοιχούν στα κριτήρια του WCAG Αλλαγή μεγέθους κειμένου (Resize Text, 1.4.4), Αναδιάταξη (Reflow, 1.4.10) (ανοίγει σε νέα καρτέλα) και Απόσταση κειμένου (Text Spacing, 1.4.12) (ανοίγει σε νέα καρτέλα). Η αναδιάταξη ελέγχεται σε πλάτος 320 pixel CSS, που κατά το W3C «ισοδυναμεί με αρχικό πλάτος παραθύρου προβολής 1.280 pixel CSS σε ζουμ 400%». Η απόσταση κειμένου ζητά να μη χάνεται τίποτα όταν ο αναγνώστης ορίζει διάστιχο 1,5 φορές το μέγεθος της γραμματοσειράς, απόσταση παραγράφων 2 φορές, απόσταση γραμμάτων 0,12 φορές και απόσταση λέξεων 0,16 φορές.

Ένα bookmarklet για τις αποστάσεις κειμένου, δηλαδή ένα μικρό script αποθηκευμένο ως σελιδοδείκτης, εφαρμόζει και τις τέσσερις τιμές με ένα κλικ. Ψάξτε για κείμενο που ξεχειλίζει από κουμπιά και για ετικέτες που κόβονται στην άκρη. Σε ζουμ 400% ένας φορητός υπολογιστής δείχνει περίπου ό,τι ένα μικρό κινητό, οπότε ένας σωστά φτιαγμένος responsive ιστότοπος περνά ήδη μεγάλο μέρος αυτού του ελέγχου.

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

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

• Σφάλματα. Ένα «Μη έγκυρη καταχώριση» με κόκκινα γράμματα δεν αρκεί. Ένα «Γράψτε την ημερομηνία λήξης ως ΜΜ/ΕΕ», δίπλα στο πεδίο, αρκεί. Μετά την υποβολή, η εστίαση πρέπει να μεταφέρεται στη σύνοψη σφαλμάτων ή στο πρώτο πεδίο με πρόβλημα.
• Συνδέσεις και κωδικοί. Σύμφωνα με το κριτήριο Προσβάσιμος έλεγχος ταυτότητας (ανοίγει σε νέα καρτέλα) (Accessible Authentication) του WCAG 2.2, ο αποκλεισμός της επικόλλησης ή των διαχειριστών κωδικών πρόσβασης αποτελεί αστοχία, εκτός αν υπάρχει άλλος τρόπος εισόδου.
• CAPTCHA και χρονικά όρια. Στην έρευνα του WebAIM, οι χρήστες αναγνωστών οθόνης κατέταξαν το CAPTCHA ως το πιο προβληματικό στοιχείο του διαδικτύου. Ελέγξτε ότι υπάρχει προσβάσιμη εναλλακτική και ότι τα χρονικά όρια μπορούν να παραταθούν.

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

Τι περιλαμβάνει μια επαγγελματική αξιολόγηση προσβασιμότητας και πότε τη χρειάζομαι;

Η αξιολόγηση προσβασιμότητας (audit) είναι μια δομημένη εξέταση από ειδικό, με βάση ένα συγκεκριμένο πρότυπο, συνήθως το WCAG 2.1 ή 2.2 επίπεδο AA. Συνδυάζει αυτόματες σαρώσεις με χειροκίνητους ελέγχους και δοκιμές με υποστηρικτική τεχνολογία στα βασικά πρότυπα σελίδων και στις βασικές διαδρομές σας, και καταλήγει σε έκθεση με προτεραιότητες. Τη χρειάζεστε όταν σας αφορά ο νόμος, πριν από ένα μεγάλο λανσάρισμα ή όταν οι πελάτες σας ζητούν αποδείξεις.

Πριν συμφωνήσετε τιμή, ρωτήστε:

• Με βάση ποιο πρότυπο, ποια έκδοση και ποιο επίπεδο θα γίνει ο έλεγχος;
• Ποια πρότυπα σελίδων και ποιες διαδρομές περιλαμβάνονται; Για ένα κατάστημα: αρχική, κατηγορία, προϊόν, καλάθι, ολοκλήρωση παραγγελίας, σελίδες λογαριασμού και φόρμες.
• Κάνετε χειροκίνητες δοκιμές με αναγνώστες οθόνης, πληκτρολόγιο και ζουμ, και σε ποια προγράμματα περιήγησης και συσκευές;
• Κατατάσσει η έκθεση τα ζητήματα κατά σοβαρότητα, δείχνει πού βρίσκονται και προτείνει διορθώσεις;
• Περιλαμβάνεται επανέλεγχος;

Οι τιμές διαφέρουν πολύ ανάλογα με τον πάροχο, τη χώρα και το εύρος, οπότε συγκρίνετε τι περιλαμβάνεται. Αν σας αφορά η Ευρωπαϊκή Πράξη για την Προσβασιμότητα (European Accessibility Act), μια αξιολόγηση στηρίζει και τη δημόσια δήλωσή σας· ο οδηγός μας για την Πράξη εξηγεί ποιους αφορά.

Γιατί να κάνετε δοκιμές με χρήστες με αναπηρία;

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

Δεν χρειάζεστε εργαστήριο. Λίγες συνεδρίες πάνω στην πιο σημαντική εργασία του ιστότοπού σας, όπως η εύρεση ενός προϊόντος και η πληρωμή, θα σας μάθουν περισσότερα από άλλον έναν γύρο σαρώσεων. Βρείτε συμμετέχοντες μέσω οργανώσεων ατόμων με αναπηρία, εταιρειών έρευνας ή των δικών σας πελατών, και πληρώστε τους για τον χρόνο τους. Αφήστε τους να χρησιμοποιούν τις δικές τους συσκευές και ρυθμίσεις. Ο οδηγός του W3C για τη συμμετοχή των χρηστών στην αξιολόγηση (ανοίγει σε νέα καρτέλα) καλύπτει την πρακτική πλευρά.

Τι κάνω με τα αποτελέσματα;

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

1. Βάλτε προτεραιότητες. Πρώτα ό,τι μπλοκάρει τις βασικές διαδρομές (ολοκλήρωση παραγγελίας, κράτηση, εγγραφή), μετά τα κοινά πρότυπα σελίδων και μετά οι μεμονωμένες σελίδες.
2. Διορθώστε στην πηγή. Αλλάξτε το θέμα, το component ή το περιεχόμενο, όχι μόνο το σύμπτωμα.
3. Ελέγξτε ξανά. Επαναλάβετε τους ίδιους ελέγχους, με το χέρι αλλά και με εργαλεία.
4. Καταγράψτε. Αναφέρετε τα γνωστά ζητήματα, με ημερομηνίες, στη δήλωση προσβασιμότητάς σας. Ο οδηγός μας για το WCAG 2.2 εξηγεί τα νεότερα κριτήρια.
5. Επαναλάβετε. Προσθέστε έναν έλεγχο με πληκτρολόγιο και μια σάρωση σε κάθε νέα έκδοση.

Αν χρησιμοποιείτε widget προσβασιμότητας, ακόμη και το δικό μας, κάντε τις δοκιμές με το πάνελ κλειστό. Ένα πάνελ όπως το SiteAccessible δίνει στους επισκέπτες επιπλέον τρόπους να προσαρμόσουν τη σελίδα, αλλά το WCAG εξετάζει αν η σελίδα λειτουργεί στην προεπιλεγμένη της κατάσταση. Ορισμένα συστήματα αξιολόγησης δεν εξετάζουν σελίδες στις οποίες τρέχει script επικάλυψης προσβασιμότητας (overlay), οπότε ρωτήστε πρώτα τον αξιολογητή σας.