Τι είναι η προσβασιμότητα μιας ιστοσελίδας

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

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

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

Ποιους επισκέπτες εξυπηρετεί ο προσβάσιμος σχεδιασμός;

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

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

Υπάρχει και νομική διάσταση. Σε πολλές χώρες, συμπεριλαμβανομένων των ΗΠΑ, οι επιχειρήσεις υποχρεούνται από τον νόμο να παρέχουν ίση πρόσβαση στις υπηρεσίες τους. Ιστοσελίδες έχουν γίνει αντικείμενο αγωγών για την προσβασιμότητα και ο αριθμός των νομικών ενεργειών για την προσβασιμότητα στο web αυξάνεται σταθερά κάθε χρόνο. Το άρθρο για το πώς να κάνεις την ιστοσελίδα σου συμβατή με το ADA εξηγεί τι σημαίνουν στην πράξη οι νομικές απαιτήσεις για τις επαγγελματικές ιστοσελίδες.

Ποια είναι τα πρότυπα προσβασιμότητας WCAG;

Οι Web Content Accessibility Guidelines, γνωστές ως WCAG, είναι τα διεθνώς αναγνωρισμένα πρότυπα για την προσβασιμότητα στο web. Εκδίδονται από το World Wide Web Consortium και ορίζουν τρία επίπεδα συμμόρφωσης. Το επίπεδο A είναι η ελάχιστη βάση. Το επίπεδο AA είναι το πρότυπο που αναφέρεται στα περισσότερα νομικά πλαίσια και ο πρακτικός στόχος για τις επαγγελματικές ιστοσελίδες. Το επίπεδο AAA είναι το πιο ολοκληρωμένο και σπάνια απαιτείται σε ολόκληρη ιστοσελίδα.

Οι WCAG οργανώνονται γύρω από τέσσερις βασικές αρχές, που αναφέρονται με το ακρώνυμο POUR.

Αντιληπτό

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

Λειτουργικό

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

Κατανοητό

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

Στιβαρό

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

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

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

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

Η προσβασιμότητα της πλοήγησης είναι ένα ακόμη συνηθισμένο κενό. Τα μενού που ανοίγουν μόνο με hover αποτυγχάνουν για χρήστες πληκτρολογίου. Οι σύνδεσμοι που γράφουν «πάτα εδώ» ή «διάβασε περισσότερα» χωρίς πλαίσιο γύρω τους αποτυγχάνουν για χρήστες screen reader που πλοηγούνται μέσω λίστας συνδέσμων. Το άρθρο για το τι είναι η πλοήγηση ιστοσελίδας εξηγεί πώς να χτίσεις πλοήγηση που δουλεύει με όλους τους τρόπους εισόδου και όλες τις συσκευές.

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

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

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

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

Πώς επηρεάζει η προσβασιμότητα το SEO;

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

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

Πώς χειρίζεται το WEMASY την προσβασιμότητα

Ο δημιουργός ιστοσελίδων του WEMASY παράγει σημασιολογικό HTML και εφαρμόζει δομές επικεφαλίδων με λογική σειρά. Υπάρχουν πεδία alt text για όλες τις εικόνες, ώστε να προσθέτεις περιγραφές χωρίς να επεξεργάζεσαι κώδικα. Τα πρότυπα είναι φτιαγμένα με βάση τα πρότυπα αντίθεσης χρωμάτων WCAG AA, ώστε ο προεπιλεγμένος σχεδιασμός να περνά χωρίς χειροκίνητες προσαρμογές. Η πλοήγηση με πληκτρολόγιο και οι στόχοι αφής στα κινητά διαχειρίζονται από την πλατφόρμα και δεν χρειάζονται ξεχωριστή ρύθμιση.

Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.

Συχνές ερωτήσεις