Τι θα συμβεί αν σας είπα σχεδιαστές ιστοσελίδων εκεί έξω ότι υπάρχουν άνθρωποι που θα μπορούσαν να επισκεφθούν την ιστοσελίδα σας που δεν τους ενδιαφέρει αυτό που μοιάζει;
Οι άνθρωποι με προβλήματα όρασης ταξιδεύουν στον ιστό για τους ίδιους λόγους που όλοι μας κάνουμε, για να βρούμε πληροφορίες, να ψωνίσουμε και να εκτελέσουμε μια πληθώρα σημαντικών καθηκόντων χρησιμοποιώντας εφαρμογές στο διαδίκτυο. Αλλά οι άνθρωποι με προβλήματα όρασης βιώνουν τον ιστό διαφορετικά και πρέπει να είμαστε ευαίσθητοι στις ανάγκες τους όταν σχεδιάζουμε και κατασκευάζουμε ιστότοπους.
Σύμφωνα με το Γραφείο Απογραφής των ΗΠΑ και τον ΟΗΕ και την Παγκόσμια Τράπεζα, πάνω από 47 εκατομμύρια Αμερικανοί, και μέχρι 650 εκατομμύρια άνθρωποι παγκοσμίως, έχουν κάποιο είδος αναπηρίας. Κάθε επισκέπτης στις τοποθεσίες που σχεδιάζετε πρέπει να είναι σε θέση να βρει τις πληροφορίες που αναζητούν και να εκτελέσει τα καθήκοντα που προτίθενται να εκτελέσουν ανεξάρτητα από το τι φαίνεται η ιστοσελίδα ή η εφαρμογή. Πολλοί διαφορετικοί παράγοντες που εμπλέκονται στη δημιουργία της ιστοσελίδας ή της εφαρμογής μπορούν να επηρεάσουν την προσβασιμότητα.
Παίρνετε το μπλε χάπι - η ιστορία τελειώνει, ξυπνάτε στο κρεβάτι σας και πιστεύετε ότι θέλετε να πιστέψετε. Παίρνετε το κόκκινο χάπι - μένετε στη χώρα των θαυμάτων και σας δείχνω πόσο βαθιά είναι η τρύπα του κουνελιού. - Η μήτρα
Είστε έτοιμοι να κατεβείτε μαζί μου με το κουνέλι προσβασιμότητας; Θα πρέπει να εξετάσουμε τις τεχνικές πτυχές των ιστοσελίδων. HTML είναι ο σκελετός μιας ιστοσελίδας, ενώ το CSS, το JavaScript και οι εικόνες ενισχύουν το HTML. Συχνά οι άνθρωποι με προβλήματα όρασης παραλείπουν όλες αυτές τις βελτιώσεις. Παρόλο που η προσβασιμότητα είναι κυρίως έργο ανάπτυξης, ορισμένες φορές οι τεχνικές απαιτήσεις που απαιτούνται για τη διατήρηση ή την ενίσχυση της προσβασιμότητας θα επηρεάσουν την εμφάνιση του ιστότοπου. Αυτό σημαίνει ότι ο σχεδιασμός, η αντιγραφή, η εμπειρία και η ανάπτυξη των χρηστών πρέπει όλοι να συνεργαστούν για να διασφαλίσουν ότι οι έλεγχοι πλοήγησης, τα έντυπα, τα κουμπιά, τα κεφάλαια, τα κουμπιά, οι σύνδεσμοι και άλλα είναι προσβάσιμα.
το σχεδιασμό, το αντίγραφο, η εμπειρία και η ανάπτυξη των χρηστών πρέπει όλοι να συνεργαστούν για να διασφαλίσουν ότι οι έλεγχοι πλοήγησης, τα έντυπα, τα κουμπιά, τα κεφάλαια, τα κουμπιά, οι σύνδεσμοι και άλλα είναι προσβάσιμα
Τα άτομα που είναι τυφλά, άτομα με προβλήματα όρασης, αναλφάβητοι ή άτομα με ειδικές ανάγκες μάθησης χρησιμοποιούν τεχνολογίες υποβοήθησης για πλοήγηση στο Διαδίκτυο. Οι συσκευές ανάγνωσης οθόνης είναι η πιο κοινή τεχνολογία υποβοήθησης για τον ιστό, τα προγράμματα αυτά προσπαθούν να ερμηνεύσουν τι εμφανίζεται στην ιστοσελίδα και να την μεταφέρουν στον χρήστη, συνήθως μετατρέποντας το κείμενο σε ομιλία αλλά μερικές φορές μέσω μιας συσκευής εξόδου Braille. Οι μεγεθυντικοί φακοί οθόνης χρησιμοποιούνται επίσης συχνά σε συνδυασμό με έναν αναγνώστη οθόνης. Συνήθως ένας αναγνώστης οθόνης θα προσπαθήσει να αναλύσει την HTML από την κορυφή του αρχείου HTML στο κάτω μέρος και να μιλήσει σχετικά στοιχεία στο χρήστη. Στην ιδανική περίπτωση, ο αναγνώστης οθόνης θα επιτρέψει στον χρήστη να μετακινήσει επιτυχώς έναν εικονικό δρομέα προς τα κάτω στη σελίδα, προκειμένου να συμπληρώσει πεδία φόρμας, κουμπιά κλικ και να κάνει επιλογές από αναπτυσσόμενα μενού και άλλα στοιχεία ελέγχου.
Για να δοκιμάσετε προσεκτικά την προσβασιμότητα, θα πρέπει να βεβαιωθείτε ότι ο ιστότοπος ή η εφαρμογή λειτουργεί καλά σε κάθε έναν από τους πολλούς διαθέσιμους αναγνώστες οθόνης. Υπάρχουν πολλοί δημοφιλείς ελεύθεροι ή / και ανοικτού κώδικα αναγνώστες οθόνης σε κάθε πλατφόρμα, συμπεριλαμβανομένων JAWS , και NVDA . Οι χρήστες της Microsoft μπορούν να χρησιμοποιήσουν το NVDA, ενώ οι υπολογιστές Apple και οι συσκευές iOS συνοδεύονται Φωνή η οποία μπορεί να μεγεθύνει τα χειριστήρια του πληκτρολογίου και να διαβάσει τα περιεχόμενα της οθόνης, και για τις συσκευές Unix υπάρχει Orca . Το πρόγραμμα περιήγησης Chrome διαθέτει δύο πρόσθετα βοηθητικής τεχνολογίας, ChromeVox για ανάγνωση οθόνης και ChromeVis για μεγέθυνση.
Τα περισσότερα προβλήματα προσβασιμότητας στον ιστό εμφανίζονται όταν ο εικονικός δρομέας του αναγνώστη οθόνης παγιδεύεται σε κακή μορφή ή παραλείπει ένα σημαντικό στοιχείο ελέγχου ή ένα σημαντικό κομμάτι των πληροφοριών κειμένου. Η επαλήθευση ότι οι ιστότοποι είναι πράγματι χρησιμοποιήσιμοι είναι παρόμοιος με τον έλεγχο του προγράμματος περιήγησης επειδή κάθε συσκευή ανάγνωσης οθόνης έχει διαφορετικές απαιτήσεις και περιορισμούς. Αυτός είναι ο λόγος για τον οποίο η κατανόηση της συμπεριφοράς κάθε αναγνώστη οθόνης είναι σημαντική. Οι ανάγκες των διαφόρων συσκευών ανάγνωσης οθόνης μπορούν να προσαρμοστούν προσθέτοντας διάφορες ειδικές ετικέτες HTML στα σημαντικά στοιχεία της σελίδας.
Το σύγχρονο δυναμικό περιβάλλον διαδικτύου μπορεί να είναι ιδιαίτερα προβληματικό για την προσβασιμότητα, επειδή τα σημαντικά στοιχεία προστίθενται στη σελίδα δυναμικά χρησιμοποιώντας το JavaScript. Τα προσαρμοσμένα μενού, modals, tooltips, περιεχόμενο ακορντεόν και δυναμικά σφάλματα και ειδοποιήσεις μπορεί να είναι δύσκολο να κατανοήσουν οι χρήστες του προγράμματος ανάγνωσης οθόνης εξαιτίας της διακοπής της επικοινωνίας μεταξύ του HTML, του JavaScript και του προγράμματος ανάγνωσης οθόνης. Η εγγενής HTML και JavaScript δεν έχουν τρόπο επικοινωνίας των ενημερώσεων σελίδας (Μοντέλο αντικειμένου εγγράφου) με τους αναγνώστες οθόνης. Οι προγραμματιστές πρέπει να μετακινήσουν την εστίαση (ο εικονικός δρομέας του προγράμματος ανάγνωσης οθόνης) στο τμήμα του UI που άλλαξε. Όταν ένα μοντέλο ανοίγει, οι προγραμματιστές πρέπει να τοποθετήσουν την εστίαση του χρήστη σε αυτό το τρόπο ώστε ο αναγνώστης οθόνης να μπορεί να διαβάσει αυτό το περιεχόμενο και ο χρήστης να μπορεί να κατανοήσει και να αλληλεπιδράσει με αυτόν.
Το WAI-ARIA μπορεί να γεφυρώσει τα κενά ανάμεσα σε αυτά που αναφέρει το ακατέργαστο HTML της σελίδας και σε ό, τι βλέπουν οι χρήστες με προβλήματα όρασης
Αυτό γίνεται μέσω της χρήσης ειδικών ετικετών HTML που ονομάζονται WAI-ARIA ετικέτες. Η WAI-ARIA (Accessible Rich Internet Applications) μπορεί να γεφυρώσει τα κενά ανάμεσα σε αυτό που αναφέρει το ακατέργαστο HTML της σελίδας και σε όσους βλέπουν τους χρήστες, παρέχοντας έναν τυποποιημένο τρόπο για τους προγραμματιστές να προσθέσουν επιπλέον νόημα στα κράτη, τις ιδιότητες, τις σχέσεις, ένας αναγνώστης οθόνης διαφορετικά δεν θα καταλάβαινε. Οι προγραμματιστές μπορούν να χρησιμοποιήσουν επίπεδο aria για να εξηγήσουν στους αναγνώστες οθόνης την ιεραρχία κάθε επικεφαλίδας στη σελίδα. Με τους υπεύθυνους ανάπτυξης ετικετών μπορεί να προσθέσει μια επικεφαλίδα για να περιγράψει το σκοπό ενός διακριτού στοιχείου στη σελίδα. Αυτό βοηθά τους προγραμματιστές να δημιουργήσουν σαφείς σχέσεις μεταξύ διαφορετικών στοιχείων. Οι προγραμματιστές μπορούν επίσης να επιστήσουν την προσοχή σε σημαντικούς ελέγχους, επισημαίνοντάς τους με ετικέτες ρόλων aria, για παράδειγμα ένα κουμπί με αναπτυσσόμενο μενού θα φέρει την ακόλουθη ετικέτα: Aria-έχει αναδυόμενο παράθυρο: true.
Δείτε το στυλό Απλά προσβάσιμες καρτέλες από τον Scott Vinkle ( @svinkle ) επί CodePen .
Στο HTML στο παραπάνω παράδειγμα, οι καρτέλες δημιουργούνται χρησιμοποιώντας μια μη ταξινομημένη λίστα με κατηγορίες σε κάθε στοιχείο λίστας. Το jQuery καταγράφει τα συμβάντα κλικ όταν κάνει κλικ σε μια καρτέλα και προσθέτει την επιλεγμένη καρτέλα 'aria-selected': 'true' και 'tab-widget__tab-content-active' και αποκρύπτει τις άλλες καρτέλες προσθέτοντας 'aria-selected' false 'στις υπόλοιπες καρτέλες. Στη γραμμή 127 έχουν οριστεί τα αρχικά χαρακτηριστικά για τις καρτέλες, μαζί αυτά τα αποσπάσματα βοηθούν τους αναγνώστες οθόνης να αναγνωρίζουν την καρτέλα που είναι ορατή. Το JavaScript στη γραμμή 35 προσθέτει επίσης υποστήριξη πληκτρολογίου στις καρτέλες. Το υπόλοιπο αρχείο χειρίζεται την καταγραφή γεγονότων κλικ και πληκτρολογίου, έτσι ώστε το jQuery να μπορεί να προσθέσει χαρακτηριστικά 'role' και 'presentation' στην τρέχουσα επιλεγμένη καρτέλα.
Οι ετικέτες Aria μπορούν να βοηθήσουν τους αναγνώστες οθόνης να ερμηνεύσουν τα προσαρμοσμένα στοιχεία ελέγχου ως κουμπιά επιλογής, όταν ο προσαρμοσμένος έλεγχος φέρει την ετικέτα: Aria-role = κουμπί επιλογής. Όταν μια εφαρμογή διαθέτει περιοχή sandbox που μεταδίδει ανατροφοδότηση ή ενημερώσεις στον χρήστη, μπορεί να επισημανθεί με ετικέτα ζωντανής περιοχής: Aria-live. Αυτό εξασφαλίζει ότι όταν αλλάξει το κείμενο σε αυτό το στοιχείο, αυτόματα θα μιλήσει στο χρήστη μέσω του προγράμματος ανάγνωσης οθόνης.
Οι ανανεώσεις σελίδων αποτελούν βασικό μέρος του ιστού για αναγνώστες οθόνης, διότι όταν εμφανίζεται μια ανανέωση σελίδας, σηματοδοτεί στον αναγνώστη οθόνης ότι πρέπει να ανακοινώσει τη νέα σελίδα στο χρήστη και να ξαναδιαβάσει τα περιεχόμενα της σελίδας στον χρήστη. Αυτό σημαίνει ότι οι εφαρμογές ιστού μιας σελίδας δημιουργούν ειδικές προκλήσεις όσον αφορά την προσβασιμότητα. Σε μια εφαρμογή μιας σελίδας δεν υπάρχει πλήρης σελίδα ανανεώνεται, ώστε ο αναγνώστης οθόνης και ως εκ τούτου ο χρήστης δεν θα ειδοποιηθεί για το ενημερωμένο περιεχόμενο. Το αποτέλεσμα θα είναι ότι ο χρήστης δεν λαμβάνει ανατροφοδότηση σχετικά με τις ενέργειές του. Η καλύτερη λύση είναι να μιμηθεί τη συμπεριφορά ανανέωσης της φυσικής σελίδας. Στην προβολή που έχει φορτωθεί, ενημερώστε τον τίτλο της σελίδας και ενημερώστε τον στο χρήστη.
Οι πλήρεις προδιαγραφές για το WAI-ARIA διατηρούνται από το W3 όπως και οι προδιαγραφές για το ίδιο το HTML στο πλαίσιο της Πρωτοβουλίας για την Προσβασιμότητα στο Παγκόσμιο Ιστό (Web Accessibility Initiative, WAI), αλλά μερικές φορές οι κατευθυντήριες γραμμές μπορούν να είναι πιο χρήσιμες από τις προδιαγραφές, επομένως εδώ είναι μερικές γενικές οδηγίες για τους σχεδιαστές:
Υπάρχουν διάφορες απλές αποφάσεις που μπορείτε να κάνετε κατά την ανάπτυξη μιας ιστοσελίδας που θα κάνει την ιστοσελίδα πιο προσιτή χωρίς να πάρει πάρα πολύ βαθιά σε ειδική σήμανση προσβασιμότητας ή δοκιμασία ανάγνωσης οθόνης. Βεβαιώνοντας ότι το HTML σας μεταφέρει νόημα μέσω της δομής του, θα βοηθήσετε τους αναγνώστες οθόνης να επεξεργάζονται τις πληροφορίες με τον ίδιο τρόπο που εμφανίζεται στη σελίδα για τους χρήστες με προβλήματα όρασης. Αυτό είναι σημαντικό για χρήστες που χρησιμοποιούν μεγεθυντικό φακό σε συνδυασμό με αναγνώστη οθόνης.
Η χρήση κατάλληλης σήμανσης HTML για επικεφαλίδες, λίστες, πίνακες και άλλα στοιχεία επιτρέπει στον αναγνώστη οθόνης να κατηγοριοποιήσει τη δομή της σελίδας για τον χρήστη με έναν οικείο τρόπο. Για περισσότερες σχετικές διατάξεις HTML5 παρέχει πρόσθετα στοιχεία, όπως
Έχουμε πάει πολύ μακριά κάτω από αυτή την τρύπα κουνελιών μαζί, επειδή οι δυνητικοί δικαιούχοι όλων αυτών των εργασιών είναι μια ευρύτερη ομάδα από ό, τι νομίζετε. Εάν έχετε δοκιμάσει ποτέ να χρησιμοποιήσετε μια εφαρμογή για κινητά με το ένα χέρι επειδή το άλλο σας χέρι φέρει κάτι, αν έχετε προσπαθήσει ποτέ να χρησιμοποιήσετε ένα ποντίκι με το μη κυριαρχούν σας χέρι εξαιτίας ενός τραυματισμού που έχετε απενεργοποιήσει την κατάσταση. Και δεν είναι υπέροχο όταν τα δάχτυλά σας είναι κολλώδη και μπορείτε ακόμα να πλοηγηθείτε σε μια ιστοσελίδα χρησιμοποιώντας ένα πληκτρολόγιο με τους αρθρώσεις σας; Όλοι μας, δυστυχώς, είμαστε ευάλωτοι στις αναπηρίες που προέρχονται από το να μεγαλώνουν, όπως απώλεια μνήμης, δυσκολία στην ακοή, επιδείνωση της όρασης και περιορισμένη κίνηση.
Η δύναμη του Ιστού βρίσκεται στην οικουμενικότητα του. Η πρόσβαση όλων ανεξάρτητα από την αναπηρία αποτελεί ουσιαστική πτυχή. - Tim Berners-Lee, διευθυντής του W3C και εφευρέτης του Παγκόσμιου Ιστού
Προτεινόμενη εικόνα, εικόνα προσβασιμότητας μέσω Shutterstock.