Προσβασιμότητα ιστοσελίδων

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

Γιατί μας αφορά η προσβασιμότητα ιστοσελίδων

Σύμφωνα με τον Παγκόσμιο Οργανισμό Υγείας¹ περίπου το 16% του πληθυσμού αντιμετωπίζει κάποια αναπηρία. Αυτό το ποσοστό μεταφράζεται σε περίπου 1,3 δισεκκατομύρια ανθρώπους! 🤯 Μία προσβάσιμη ιστοσελίδα υποστηρίζει το θεμελιώδες δικαίωμα ατόμων με αναπηρίες για πρόσβαση σε πληροφορίες και τεχνολογίες επικοινωνίας αλλά και την κοινωνική ενσωμάτωση ενώ συνήθως προσφέρει νέες ευκαιρίες σε αυτό τον τεράστιο αριθμό ατόμων με αναπηρίες.

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

Παράλληλα, διάφορα νομικά πλαίσια (ADA², EAA³ κ.α.), καθιστούν υποχρεωτική την προσβασιμότητα ιστοσελίδων για ορισμένες επιχειρήσεις βάσει του κλάδου όπου δραστηριοποιούνται (π.χ. εκπαιδευτικά ιδρύματα) ή οικονομικών κριτηρίων.

Σε ποιους απευθύνεται η προσβασιμότητα ιστοσελίδων

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

• Βρίσκεστε σε εξωτερικό χώρο με έντονη ηλιοφάνεια. Ο χάρτης για τον προορισμό σας δεν έχει επαρκή χρωματική αντίθεση και είναι πολύ δύσκολο να διακρίνετε την σωστή διαδρομή.
• Θέλετε να παρακολουθήσετε ένα video σε έναν χώρο όπου επικρατεί ησυχία (π.χ. βιβλιοθήκη). Δυστυχώς δεν έχει υπότιτλους που θα σας επέτρεπαν να το παρακολουθήσετε χωρίς ήχο.
• Η ιστοσελίδα που επισκεφθήκατε έχει κουμπιά μικρού μεγέθους και χωρίς επαρκές διάστημα μεταξύ τους. Είναι αρκετά δύσκολο να εντοπίσετε το σωστό κουμπί και αρκετά πιθανό να πατήσετε το λάθος κουμπί.
• Το αγαπημένο σας podcast έχει ένα νέο επεισόδιο, αλλά η ταχύτητα internet είναι πάρα πολύ αργή. Δεν υπάρχει κείμενο απομαγνητοφώνησης άρα δεν υπάρχει εναλλακτικός τρόπος για να δείτε το περιεχόμενο του podcase.

“Web Accessibility: essential for some, useful for all”

Tim Berners Lee

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

Τι είναι η αναπηρία και τι μορφές έχει

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

1. κινητικές αναπηρίες,
2. αισθητηριακές αναπηρίες,
3. νοητικές αναπηρίες,
4. αναπτυξιακές αναπηρίες,
5. σωματικές αναπηρίες

ενώ υπάρχει περίπτωση κάποια άτομα να αντιμετωπίζουν συνδυασμό αυτών. Επιπλέον η αναπηρία μπορεί να είναι:

1. μόνιμη ή προσωρινή
2. μερική ή ολική
3. εκ γενετής ή επίκτητη

Βοηθητικές τεχνολογίες (Assistive Technology)

Πρότυπα προσβασιμότητας

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

WCAG

Το WCAG (Web Content Accessibility Guidelines) είναι ίσως το πιο γνωστό και διαδεδομένο πρότυπο, και αφορά την προσβασιμότητα περιεχομένου. Ορίζει κανόνες όπως το ελάχιστο μέγεθος γραμματοσειράς, τις ελάχιστες διαστάσεις και περιθώρια ενός αντικειμένου, τρόπους σωστής δόμησης μίας φόρμας και πολλά ακόμα.

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

• Α: ελάχιστο επίπεδο προσβασιμότητας,
• ΑΑ: αποδεκτό επίπεδο προσβασιμότητας,
• ΑΑΑ: βέλτιστο επίπεδο προσβασιμότητας

Συνήθως το WCAG το βλέπουμε να ακολουθείται από κάποιον αριθμό. Αυτός ο αριθμός υποδηλώνει την έκδοση του προτύπου. Το WCAG 1.0 είναι το πρώτο πρότυπο προσβασιμότητας που δημοσιεύθηκε το 1999. Πλέον υπάρχει μία νεότερη και εξελιγμένη έκδοση και θα το δούμε ως WCAG 2.2. Η κάθε νέα έκδοση του προτύπου, προσθέτει η τροποποιεί κανόνες ώστε το πρότυπο να καλύπτει με τον βέλτιστο δυνατό τρόπο τις τρέχουσες και μελλοντικές ανάγκες των ατόμων με αναπηρία. Για παράδειγμα το WCAG 2.0, το οποίο δημοσιεύθηκε το 2008, πρόσθεσε αρκετούς νέους κανόνες που σχετίζονται με την χρήση ιστοσελίδων από κινητές συσκευές.

ATAG

Το ATAG (Authoring Tools Accessibility Guidelines), αφορά την προσβασιμότητα εργαλείων δημιουργίας περιεχομένου (π.χ. CMS) και έχει δύο διακριτά μέρη. Το πρώτο μέρος αφορά την προσβασιμότητα του εργαλείου, και ορίζει κανόνες ώστε να είναι δυνατή η απροβλημάτιστη χρήση του εργαλείου από άτομα με αναπηρία. Το δεύτερο μέρος, αφορά την υποστήριξη δημιουργίας προσβάσιμου περιεχομένου από το εργαλείο. Για παράδειγμα δεν θα ήταν σωστό να μπορώ να εισάγω μία εικόνα αλλά να μην μπορώ να ορίσω το ενναλακτικό κείμενο (alt text), καθώς αυτό θα οδηγούσε στην δημιουργία μη προσβάσιμου περιεχομένου.

UAAG

Το UAAG (User Agent Accesibility Guidelines), σχετίζεται με την προσβασιμότητα των εφαρμογών πλοήγησης, όπως για παράδειγμα οι browsers.

Πώς να κάνω την ιστοσελίδα μου προσβάσιμη

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

Γραπτό κείμενο

Χρησιμοποιήστε γραπτό κείμενο για να παρουσιάσετε οποιαδήποτε πληροφορία στην ιστοσελίδα σας. Το γραπτό κείμενο σε συνδυασμό με την απαραίτητη βοηθητική τεχνολογία μπορεί να γίνει αντιληπτό με οποιαδήποτε αίσθηση (όραση, ακοή ή αφή). Μην τοποθετείτε χρήσιμες πληροφορίες σε άλλα έγγραφα (π.χ. PDF) ή σε μορφή που δεν μπορεί να γίνει αντιληπτή όπως για παράδειγμα κείμενο σε εικόνες.

Εναλλακτικές μορφές παρουσίασης και απλή γλώσσα

Εμπλουτίστε το κείμενο σας με επεξηγηματικές εικόνες ή video. Αποφύγετε τις μεγάλες προτάσεις, καθώς και την χρήση περίπλοκου λεξιλογίου. Οι αναγνώστες μπορεί να κατανοήσουν καλύτερα και πιο εύκολα το περιεχόμενο της ιστοσελίδας σας, ακόμη και εάν είναι η πρώτη φορά που έρχονται σε επαφή με το αντικείμενο στο οποίο αναφέρεστε.

Υπότιτλοι, απομαγνητοφωνήσεις και εναλλακτικό κείμενο

Βεβαιωθείτε ότι τα video έχουν υπότιτλους και και ότι τα αρχεία ήχου συνοδεύονται από την απομαγνητοφώνηση τους σε μορφή κειμένου. Οι υπότιτλοι θα πρέπει να είναι σε ξεχωριστό αρχείο (Closed Captions) και όχι ενσωματωμένοι στο αρχείο του video ώστε να είναι προσβάσιμοι. Επίσης οι εικόνες θα πρέπει να έχουν εναλλακτικό κείμενο (alt text). Το εναλλακτικό κείμενο περιγράφει το τι απεικονίζει η εικόνα. Η περιγραφή θα πρέπει να είναι σχετική με το υπόλοιπο περιεχόμενο της σελίδας.

Αντίθεση χρωμάτων και μέγεθος γραμματοσειράς

Η χρωματική παλέτα που χρησιμοποιείτε στην ιστοσελίδα σας θα πρέπει να έχει έναν λόγο αντίθεσης 4.5:1 μεταξύ του χρώματος φόντου και προσκηνίου. Μπορείτε να χρησιμοποιήσετε το εργαλείο contrast ratio για να βεβαιωθείτε ότι η χρωματική παλέτα που χρησιμοποιείτε έχει επαρκή αντίθεση. Επίσης το μέγεθος γραμματοσειράς δεν θα πρέπει να είναι μικρότερο των 12 pixel. Προτιμήστε μέγεθος τουλάχιστον 16 pixels. Έτσι θα βεβαιωθείτε ότι το κείμενο είναι πάντα ευανάγνωστο.

Μέγεθος κουμπιών

Επιλέξτε μεγάλα κουμπιά με μέγεθος τουλάχιστον 40 x 40 pixels. Σε αυτό το μέγεθος είναι εύκολο για τον χρήστη να πατήσει το κουμπί και δεν απαιτείται ακρίβεια και λεπτή κινητικότητα.

Λεπτομερείς και ακριβείς οδηγίες

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

Χρώματα, σχέδια και κείμενο

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

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

Υπερσύνδεσμοι

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

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

---

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

Πως μπορώ να βεβαιωθώ ότι η ιστοσελίδα μου είναι προσβάσιμη

Για να ελέγξετε την προσβασιμότητα μίας ιστοσελίδας, μπορείτε να χρησιμοποιήσετε διάφορα εργαλεία για αυτοματοποιημένους ή μη αυτόματους ελέγχους. Για αυτοματοποιημένους ελέγχους μπορείτε να βασιστείτε σε δωρεάν online εργαλεία όπως το WAVE, το Accessibility Checker ή το Deque Accessibility Test. Σε αυτά τα εργαλεία, μπορείτε να ελέγξετε μία-μία τις σελίδες του ιστοτόπου σας και να λάβετε μία αναφορά σχετικά με την συμμόρφωση με το πρότυπο WCAG, αλλά και προτάσεις επίλυσης τυχόν σφαλμάτων.

Στην ιστοσελίδα σας μπορείτε να εγκαταστήσετε πρόσθετα (plugins), όπως το Accessibility Checker. Αυτά εκτελούν ελέγχους συμμόρφωσης για το περιεχόμενο των σελίδων και των άρθρων σας την στιγμή που τα συντάσσετε.

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

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

Ποια είναι τα επόμενα βήματα

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

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

1. Παγκόσμιος Οργανισμός Υγείας – Αναφορά ποσοστού παγκόσμιας αναπηρίας ↩︎
2. American with Disabilities Act ↩︎
3. European Act for Accessibility ↩︎