Οδηγός σχεδιαστή για τα βασικά στοιχεία του σχεδιασμού προσβασιμότητας στον ιστό

Ο ιστός πρέπει να είναι ένα μέρος όπου όλοι μπορούν να έχουν πρόσβαση στο ίδιο περιεχόμενο από οπουδήποτε στον κόσμο. Οι απαντητικές τεχνικές έχουν προχωρήσει πολύ συσκευές-agnostic σχέδια. Αλλά τι γίνεται προσβασιμότητας-αγνωστικών σχεδίων?

Η προσβασιμότητα στον παγκόσμιο ιστό υπήρξε εδώ και χρόνια, αλλά η εφαρμογή του απαιτεί νέες εξελίξεις στην τεχνολογία και την ανάπτυξη ιστού. Πολλοί προγραμματιστές θέλουν να βοηθήσουν, αλλά είναι δύσκολο να κατανοήσουμε πώς να σχεδιάσουμε την προσβασιμότητα, επειδή υπάρχουν τόσα πολλά κινούμενα μέρη. Αυτό περιλαμβάνει κείμενο υψηλής αντίθεσης, σελίδες ήχου για τα τυφλά, βελτιστοποιημένα μέσα και αναστροφές για προγράμματα περιήγησης που δεν είναι JS / CSS.

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

Εισαγωγή στην προσβασιμότητα

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

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

Ίσως πιο σημαντικό είναι αυτό που μπορεί να προσφέρει η προσβασιμότητα στο διαδίκτυο, όπως περιγράφεται εδώ σε έναν ορισμό της Βικιπαίδειας:

Ωστόσο, η Άννα Γκίμπσον υποστηρίζει στη δημοσίευσή της List Apart ότι ο ορισμός της Wikipedia είναι πολύ ασαφής και δεν είναι μόλις για τα άτομα με αναπηρίες. Είναι πραγματικά περίπου Ολοι στο δίκτυο από όλο τον κόσμο αυτό ενδέχεται να μην έχουν τη βέλτιστη πρόσβαση στο Internet.

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

1. Οπτικός - χαμηλή όραση ή φτωχή / μη θέα
2. Ακουστικός - άτομα με προβλήματα ακοής ή κωφά
3. Γνωστική - προβλήματα κατανόησης ή κατανάλωσης πληροφοριών
4. Μοτέρ - προβλήματα φυσικής προσβασιμότητας που ενδέχεται να απαιτούν ειδικές συσκευές εισόδου, όπως πληκτρολόγια ή προγράμματα φωνητικών εντολών

Αυτές οι κατηγορίες έχουν έκαστη εκτεταμένες τεχνικές οι οποίες είναι αλλάζοντας εξίσου γρήγορα με τα πρότυπα του διαδικτύου. Αλλά υπάρχει μια αίσθηση σταθερότητας με αυτά τα πρότυπα επικυρωμένα στις Οδηγίες Προσβασιμότητας στο Περιεχόμενο του Παγκοσμίου Ιστού (WCAG).

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

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

Το W3C & προσβάσιμο σχέδιο

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

• W3C (Κοινοπραξία Παγκόσμιου Ιστού) - Μια διεθνής ομάδα που ορίζει πρότυπα ιστού για πρωτόκολλα, γλώσσες και κανονισμούς. Όλες οι επίσημες κατευθυντήριες γραμμές προσβασιμότητας υπάγονται σε αυτήν την οργάνωση.
• WAI (Πρωτοβουλία για την Προσβασιμότητα στο Διαδίκτυο) - Ένα επίσημο πρόγραμμα που καλύπτει τα πάντα σχετικά με την προσβασιμότητα. Αυτός ο όρος ομπρέλα περιέχει όλους τους κανόνες, τις κατευθυντήριες γραμμές και τις τεχνικές για τη σύγχρονη προσβασιμότητα.
• WCAG (Οδηγίες Προσβασιμότητας Περιεχομένου στο Web) - Μια ομάδα προτύπων και κανόνων που βοηθούν τους σχεδιαστές να βαθμολογούν τους ιστοτόπους τους με βάση το επίπεδο προσβασιμότητας.
• ΑΡΙΑ (Προσβάσιμες εφαρμογές Rich Internet) - Ένα συγκεκριμένο πρότυπο που καθορίζει τον τρόπο δημιουργίας προσβάσιμων πλούσιων εφαρμογών που βασίζονται σε JavaScript / Ajax και παρόμοιες τεχνολογίες. Διαβάστε περισσότερα για αυτό σε αυτή την ανάρτηση από την Anna Monus.

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

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

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

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

• WCAG 2.0 Απλοποιημένο
• Τμήμα 508 Απόδοση WCAG

Βήματα για την προσβάσιμη σχεδίαση

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

Μπορείτε να περιηγηθείτε στον κατάλογο ελέγχου των στοιχείων προσβασιμότητας ή ακόμα και σε ένα σωρό μοτίβα σχεδίασης για στοιχεία όπως dropdowns, καρτέλες, ακορντεόν, κουμπιά και παράθυρα modal (μεταξύ άλλων στοιχείων).

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

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

Εξετάστε τυφλούς χρήστες που ενδέχεται να χρησιμοποιούν αυτοματοποιημένο πρόγραμμα ανάγνωσης περιεχομένου. Μπορεί επίσης να έχουν μεταφραστή ή ακόμα και ειδικό πληκτρολόγιο για πλοήγηση στον ιστό με κλειδιά αντί για ποντίκι. Αυτός είναι ο λόγος κατάλληλη σημασιολογική HTML (ρίξτε μια ματιά σε αυτό το άρθρο) είναι τόσο σημαντικό με τις ιδιότητες όπως tabindex και κλειδί πρόσβασης.

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

Εργαλεία δοκιμών προσβασιμότητας

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

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

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

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

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

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

Υπάρχει μια άλλη δωρεάν εφαρμογή στην ιστοσελίδα Cynthia Says που μπορεί ελέγξτε τις ιστοσελίδες για βαθμολογίες επιτυχίας WCAG για Α, ΑΑ, ΑΑΑ, και κεφάλαιο 508 για συμμόρφωση με την κυβέρνηση.

Και αν είστε σε open source, ρίξτε μια ματιά σε αυτά δωρεάν εργαλεία ελέγχου προσβασιμότητας στο GitHub.

• HTML CodeSniffer
• Αυτόματο εργαλείο ελέγχου προσβασιμότητας
• WCAG Validator

Πρόσθετα προγράμματος περιήγησης

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

Ο AInspector για τον Firefox θεωρείται απαραίτητο για την προσβασιμότητα. Αυτό ελέγχει τα πάντα, και είναι πολύ πιο λεπτομερής από τον ελεγκτή WAVE.

Οι χρήστες της Mozilla θα μπορούσαν επίσης να προτιμούν τον Έλεγχο αντίθεσης WCAG, ο οποίος είναι επίσης δωρεάν πρόσθετο.

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

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

Δυστυχώς, δεν μπορούσα να βρω πολλά για τους χρήστες του Safari, αλλά βρήκα μία επέκταση για την Όπερα, η οποία ελέγχει τη συμμόρφωση με το WCAG 2.0. Αν είστε πρόθυμοι να ψάξετε αρκετά σκληρά την Google, ίσως βρείτε περισσότερα εργαλεία εκεί έξω.

Περαιτέρω ανάγνωση

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

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

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

• Πώς να βελτιώσετε την προσβασιμότητα του πίνακα HTML με τη σήμανση
• Προσβάσιμο σχέδιο για χρήστες με ειδικές ανάγκες
• 6 Συμβουλές για τη βελτίωση της προσβασιμότητας στον ιστότοπο
• Βεβαιωθείτε ότι ο ιστότοπός σας είναι προσβάσιμος στα άτομα με προβλήματα όρασης