Προσβάσιμα συστατικά UI για τον Ιστό

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

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

Τα οπτικά ζητήματα μπορεί να κυμαίνονται από την αδυναμία να διακρίνει κανείς τα χρώματα χωρίς καθόλου όραση.

  • Βεβαιωθείτε ότι έχει επιτευχθεί ελάχιστο όριο λόγος αντίθεσης για το περιεχόμενο κειμένου.
  • Αποφύγετε την επικοινωνία πληροφοριών χρησιμοποιώντας αποκλειστικά το χρώμα και βεβαιωθείτε ότι όλο το κείμενο είναι ανθεκτικό.
  • Βεβαιωθείτε ότι όλα τα στοιχεία διεπαφής χρήστη μπορούν να χρησιμοποιηθούν με βοηθητικές τεχνολογίες, όπως συσκευές ανάγνωσης οθόνης, μεγεθυντές και οθόνες braille. Αυτό συνεπάγεται ότι τα στοιχεία UI επισημαίνονται έτσι ώστε τα API προσβασιμότητας να μπορούν να καθορίσουν προγραμματικά τον ρόλο, την κατάσταση, την αξία και τον τίτλο οποιουδήποτε στοιχείου.

Τα θέματα ακοής σημαίνουν ότι ένας χρήστης μπορεί να έχει προβλήματα που ακούν ήχο που εκπέμπεται από μια σελίδα.

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

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

  • Κάντε το περιεχόμενο των στοιχείων του UI σας λειτουργικά προσβάσιμο από ένα πληκτρολόγιο για τυχόν ενέργειες που διαφορετικά θα χρησιμοποιούσε ένα ποντίκι.
  • Βεβαιωθείτε ότι τα στοιχεία UI έχουν επισημανθεί σωστά για βοηθητικές τεχνολογίες. αυτοί οι χρήστες μπορούν να χρησιμοποιούν τεχνολογίες όπως το λογισμικό φωνητικού ελέγχου και τα φυσικά πλήκτρα ελέγχου, τα οποία τείνουν να χρησιμοποιούν τα ίδια APIs με άλλες βοηθητικές τεχνολογίες όπως οι συσκευές ανάγνωσης οθόνης.

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

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

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

Είναι προσιτό το στοιχείο UI σας;

Περίληψη (tl; dr)

Κατά τον έλεγχο της αίτησής σας για πρόσβαση, αναρωτηθείτε:

  • Μπορείτε να χρησιμοποιήσετε το στοιχείο UI μόνο με το πληκτρολόγιο; Καταφέρνει να εστιάσει και να αποφύγει τις παγίδες εστίασης; Μπορεί να ανταποκριθεί στα κατάλληλα συμβάντα πληκτρολογίου;
  • Μπορείτε να χρησιμοποιήσετε το στοιχείο UI σας με ένα πρόγραμμα ανάγνωσης οθόνης; Έχετε παράσχει εναλλακτικές λύσεις κειμένου για οποιεσδήποτε πληροφορίες παρουσιάζονται οπτικά; Έχετε προσθέσει σημασιολογικές πληροφορίες χρησιμοποιώντας ARIA;
  • Μπορεί το στοιχείο UI να λειτουργεί χωρίς ήχο; Απενεργοποιήστε τα ηχεία σας και περάστε από τις περιπτώσεις χρήσης.
  • Μπορεί να λειτουργήσει χωρίς χρώμα; Βεβαιωθείτε ότι το στοιχείο UI σας μπορεί να χρησιμοποιηθεί από κάποιον που δεν μπορεί να δει χρώματα. Ένα χρήσιμο εργαλείο για την προσομοίωση της τύφλωσης του χρώματος είναι μια επέκταση του Chrome που ονομάζεται SEE (δοκιμάστε όλες τις τέσσερις μορφές προσομοίωσης χρωματικής τύφλωσης που είναι διαθέσιμες). Μπορεί επίσης να σας ενδιαφέρει η επέκταση Daltonize, η οποία είναι εξίσου χρήσιμη.
  • Μπορεί το στοιχείο UI να λειτουργεί με λειτουργία υψηλής αντίθεσης; Όλα τα σύγχρονα λειτουργικά συστήματα υποστηρίζουν λειτουργία υψηλής αντίθεσης. Η υψηλή αντίθεση είναι μια διαθέσιμη επέκταση του Chrome που μπορεί να βοηθήσει εδώ.

Τα εγγενή στοιχεία ελέγχου (όπως το <κουμπί> και το . Στα στοιχεία αυτόματης εστίασης στα δικά σας προσαρμοσμένα στοιχεία UI, καλέστε τη μέθοδο εστίασης () που υποστηρίζεται σε όλα τα στοιχεία HTML που μπορούν να επικεντρωθούν (π.χ. document.getElementById ('myButton').

Προσθήκη αλληλεπίδρασης πληκτρολογίου

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

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

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

Μπορείτε να χρησιμοποιήσετε το στοιχείο UI σας με ένα πρόγραμμα ανάγνωσης οθόνης;

Περίπου το 1-2% των χρηστών θα χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης. Στο τέλος αυτού του άρθρου, απαριθμούμε ορισμένους αναγνώστες οθόνης που είναι ελεύθεροι να χρησιμοποιήσουν: Δοκιμάστε να χρησιμοποιήσετε το στοιχείο σας με τουλάχιστον έναν από αυτούς τους αναγνώστες οθόνης. Μπορείτε να προσδιορίσετε όλες τις σημαντικές πληροφορίες και να αλληλεπιδράσετε με το στοιχείο χρησιμοποιώντας μόνο τον αναγνώστη οθόνης και το πληκτρολόγιο;

Οι ακόλουθες ερωτήσεις πρέπει να σας βοηθήσουν να καθοδηγήσετε την προσβασιμότητα στον αναγνώστη οθόνης:

Έχουν όλα τα στοιχεία και οι εικόνες αντικειμενικές εναλλακτικές λύσεις;

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

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

Εικονίδιο μενού ρυθμίσεων

για να υποδείξει ότι πρόκειται για ένα μενού ρυθμίσεων, χρειάζεται μια εναλλακτική λύση προσπελάσιμου κειμένου όπως "ρυθμίσεις", η οποία μεταφέρει τις ίδιες πληροφορίες. Ανάλογα με το πλαίσιο, αυτό μπορεί να χρησιμοποιεί ένα χαρακτηριστικό alt, ένα χαρακτηριστικό aria-label, ένα χαρακτηριστικό aria-labelledby ή απλό κείμενο στο DOM Shadow. Μπορείτε να βρείτε γενικές τεχνικές συμβουλές στο WebAIM Quick Reference.

Κάθε στοιχείο UI που εμφανίζει μια εικόνα πρέπει να παρέχει έναν μηχανισμό για την παροχή εναλλακτικού κειμένου για την εικόνα αυτή, ανάλογο με το χαρακτηριστικό alt.

Τα στοιχεία σας παρέχουν σημασιολογικές πληροφορίες;

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

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

Για παράδειγμα, ένα εξειδικευμένο στοιχείο UI μπορεί να πάρει έναν ρόλο ARIA του slider, ο οποίος έχει κάποια σχετικά χαρακτηριστικά ARIA: aria-valuenow, aria-valuemin και aria-valuemax. Συνδέοντας αυτές τις ιδιότητες με τις σχετικές ιδιότητες στο προσαρμοσμένο στοιχείο, μπορείτε να επιτρέπετε στους χρήστες βοηθητικής τεχνολογίας να αλληλεπιδρούν με το στοιχείο και να αλλάζουν την αξία του και ακόμη και να προκαλούν την αντίστοιχη αλλαγή της οπτικής παρουσίασης του στοιχείου.

Ένα εξάρτημα ρυθμιστικού εύρους
<φαντασία-slider role = "slider" aria-valueminax = "5" aria-valuenow = "2.5"> 

Μπορούν οι χρήστες να καταλάβουν τα πάντα χωρίς να βασίζονται στο χρώμα;

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

Υπάρχει επαρκής αντίθεση μεταξύ του κειμένου / των εικόνων και του φόντου;

Οποιοδήποτε περιεχόμενο κειμένου που εμφανίζεται στο εξάρτημα σας πρέπει να πληροί την ελάχιστη γραμμή αντίθεσης (AA). Εξετάστε το ενδεχόμενο να δημιουργήσετε ένα θέμα υψηλής αντίθεσης που να ανταποκρίνεται στην υψηλότερη γραμμή (AAA) και επίσης να διασφαλίσετε ότι τα φύλλα στυλ των χρηστών μπορούν να εφαρμοστούν εάν οι χρήστες απαιτούν εξαιρετική αντίθεση ή διαφορετικά χρώματα. Μπορείτε να χρησιμοποιήσετε αυτό το Έγχρωμο Έλεγχο Αντίθεσης ως βοήθημα όταν κάνετε σχεδίαση.

Είναι το περιεχόμενο που κινείται ή αναβοσβήνει στα εξαρτήματά σας στάσιμο και ασφαλές;

Το περιεχόμενο που κινείται, περιστρέφεται ή αναβοσβήνει και διαρκεί για περισσότερα από 5 δευτερόλεπτα πρέπει να μπορεί να σταματήσει, να σταματήσει ή να κρυφτεί. Σε γενικές γραμμές, προσπαθήστε να αναβοσβήνετε όχι περισσότερο από τρεις φορές το δευτερόλεπτο.

Εργαλεία Προσβασιμότητας

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

  • ax - αυτοματοποιημένη δοκιμή προσβασιμότητας για το πλαίσιο ή το πρόγραμμα περιήγησης που έχετε επιλέξει
  • Οι έλεγχοι προσβασιμότητας του Φάρου για το Chrome παρέχουν χρήσιμες πληροφορίες για την εύρεση προβλημάτων προσβασιμότητας.
Έλεγχος εγγενούς προσβασιμότητας στο DevTools
  • Tenon.io - χρήσιμο για τον έλεγχο κοινών προβλημάτων προσβασιμότητας. Ο Tenon έχει ισχυρή υποστήριξη ενσωμάτωσης σε όλα τα εργαλεία κατασκευής, τα προγράμματα περιήγησης (μέσω επεκτάσεων) και ακόμη και τους επεξεργαστές κειμένων.
  • Μπορείτε να εξετάσετε τον τρόπο με τον οποίο οι βοηθητικές τεχνολογίες βλέπουν το περιεχόμενο ιστού χρησιμοποιώντας το Accessibility Inspector (Mac) ή τα εργαλεία δοκιμών API των Windows Automation και AccProbe (Windows). Επιπλέον, μπορείτε να δείτε το δέντρο πλήρους προσβασιμότητας που δημιουργεί το Chrome με την πλοήγηση στο chrome: // accessibility.
  • Ο καλύτερος τρόπος για να ελέγξετε την υποστήριξη ανάγνωσης οθόνης σε ένα Mac χρησιμοποιεί το βοηθητικό πρόγραμμα VoiceOver. Μπορείτε να χρησιμοποιήσετε το ⌘F5 για να ενεργοποιήσετε / απενεργοποιήσετε, Ctrl + Option ← → για να μετακινηθείτε στη σελίδα και Ctrl + Shift + Option + ↑ ↓ για να μετακινηθείτε πάνω / κάτω το δέντρο. Για πιο λεπτομερείς οδηγίες, ανατρέξτε στην πλήρη λίστα των εντολών VoiceOver και στη λίστα των εντολών VoiceOver Web.
  • tota11y είναι ένας χρήσιμος οπτικοακουστικός εξοπλισμός για θέματα βοηθητικής τεχνολογίας που κατασκευάστηκαν από την Khan Academy. Πρόκειται για ένα σενάριο που προσθέτει ένα κουμπί στο έγγραφό σας, το οποίο ενεργοποιεί διάφορα πρόσθετα για να σχολιάσει θέματα όπως ο ανεπαρκής λόγος αντίθεσης και άλλες παραβιάσεις
  • Το ally.js (από τον Rodney Rehm) είναι μια βιβλιοθήκη που προσπαθεί να απλοποιήσει την προσθήκη λίγων χαρακτηριστικών προσβασιμότητας στην εφαρμογή σας. Βοηθά στο ερώτημα του DOM για όλα τα συγκεντρωτικά στοιχεία, τα σημεία εστίασης σε συγκεκριμένα DOM υπο-δέντρα, βοηθάει στον προσδιορισμό του τρόπου με τον οποίο η εστίαση έχει αλλάξει και έρχεται με αρκετούς άλλους βοηθούς.
  • Στα Windows, το NVDA είναι ένας ελεύθερος αναγνώστης οθόνης ανοιχτού κώδικα, ο οποίος εμφανίζεται πλήρως και κερδίζει γρήγορα τη δημοτικότητα του. Ωστόσο, σημειώστε ότι έχει μια πολύ πιο απότομη καμπύλη μάθησης για τους χρήστες με προβλήματα όρασης από το VoiceOver.
  • Το ChromeLens βοηθά στην ανάπτυξη για άτομα με προβλήματα όρασης. Έχει επίσης μεγάλη υποστήριξη για την απεικόνιση των διαδρομών πλοήγησης πληκτρολογίου http://chromelens.xyz/
Η επέκταση του ChromeLens DevTools, με πολλές επιλογές για την εξομοίωση διαφορετικών τύπων τύφλωσης, ανίχνευσης καρτελών και ελέγχου προσβασιμότητας.
  • Το ChromeVox είναι ένας αναγνώστης οθόνης ο οποίος είναι διαθέσιμος ως επέκταση του Chrome και ενσωματώνεται σε συσκευές ChromeOS.

Σημείωση: Ευχαριστώ πολύ την Alice Boxhall και Rob Dodson για βοήθεια με το άρθρο.

PS: Εάν ενδιαφέρεστε να μάθετε περισσότερα, μπορείτε να μάθετε για τα βασικά στοιχεία της προσβασιμότητας σε αυτό το δωρεάν μάθημα Udacity https://bit.ly/web-a11y