Ο όρος du jour είναι προσβασιμότητα Ιστός - Κατά τη γνώμη μου, μία από τις πιο συχνά παρεξηγημένες και εσφαλμένες εφαρμογές του web design. ο κοινό λάθος είναι ότι η προσβασιμότητα έχει σχεδιαστεί μόνο για άτομα με ειδικές ανάγκες. Στην πραγματικότητα, όλοι επωφελούνται από προσβάσιμο περιεχόμενο και το κοινό σας θα αυξηθεί με την πρόσβαση σε βιώσιμο περιεχόμενο σε διαφορετικές πλατφόρμες ή με διαφορετικούς τρόπους, καθώς μπορούν να χρησιμοποιήσουν το περιεχόμενό σας με λιγότερους περιορισμούς.
Δυστυχώς, πολλοί προγραμματιστές ιστού μην κάνετε το περιεχόμενό τους προσβάσιμο και μην ακολουθείτε τις οδηγίες προσβασιμότητας στον Ιστό. Ως εκ τούτου, πολλοί άνθρωποι αντιμετωπίζουν περιττές δυσκολίες προσπαθώντας να χρησιμοποιήσουν τα σχέδιά τους και να απολαύσουν το περιεχόμενο. Σε ακραίες περιπτώσεις, ορισμένες ομάδες χρηστών δεν μπορούν να χρησιμοποιήσουν αυτόν τον ιστότοπο αποτελεσματικά.
Το προσβάσιμο σε κτίριο περιεχόμενο πρέπει να είναι δεύτερης φύσης για οποιονδήποτε προγραμματιστή, σχεδιαστή ή δημιουργό περιεχομένου, με τον ίδιο τρόπο που η σκέψη ράμπες, σκάλες και ανελκυστήρες είναι για έναν αρχιτέκτονα που σχεδιάζει ένα νέο κτίριο.
Ας ρίξουμε μια πιο προσεκτική ματιά στο τι είναι πίσω από τα παρασκήνια και γιατί τόσοι πολλοί προγραμματιστές φαίνεται να παρακάμπτουν τα πρότυπα προσβασιμότητας στον ιστό χωρίς κανένα καλό λόγο.
Το προσβάσιμο περιεχόμενο είναι περιεχόμενο που μπορεί να χρησιμοποιήσει ο καθένας . Δεν γνωρίζουμε όλες τις πτυχές του τρόπου με τον οποίο οι χρήστες έχουν πρόσβαση στο περιεχόμενό μας, γι 'αυτό πρέπει να σχεδιάζουμε με γνώμονα την προσβασιμότητα από την αρχή.
Όπως προανέφερα, αυτό δεν αφορά άτομα με αναπηρία, τα οποία αντιπροσωπεύουν περίπου περίπου το 15% του παγκόσμιου πληθυσμού . Στην πραγματική ζωή, οι χρήστες συχνά καταλήγουν να μην καταναλώνουν περιεχόμενο και να αλληλεπιδρούν με συσκευές με τον ίδιο τρόπο που οραματίστηκε κατά την ανάπτυξη. Απαιτείται επίσης προσβάσιμο περιεχόμενο για νομικούς λόγους σε πολλές δικαιοδοσίες. Ανάγνωση ' Παράγοντες νομικής και πολιτικής για την ανάπτυξη επιχειρηματικής υπόθεσης προσβασιμότητας στο Web για τον οργανισμό σας 'Για επιπλέον πληροφορίες σχετικά με τη συμμόρφωση με την προσβασιμότητα.
Εξετάστε τα ακόλουθα σενάρια όταν σκεφτείτε περιεχόμενο προσβάσιμο από το χρήστη που θα μπορούσε να έχει ή να έχει:
Δεν μπορώ να ακούσω καλά. 360 εκατομμύρια άνθρωποι σε όλο τον κόσμο έχουν προβλήματα ακοής. Το περιεχόμενο ήχου πρέπει να έχει μεταγραφές και το βίντεο πρέπει να έχει υπότιτλους.
Δεν μπορώ να δω καλά. 285 εκατομμύρια άνθρωποι Παγκοσμίως, εκτιμάται ότι έχουν προβλήματα όρασης: 39 εκατομμύρια είναι τυφλοί και 246 έχουν χαμηλή όραση. Οι χρήστες με προβλήματα όρασης χρησιμοποιούν προγράμματα ανάγνωσης οθόνης (που διαβάζουν περιεχόμενο χρησιμοποιώντας συνθετική ομιλία), την οθόνη μπράιγ (το περιεχόμενο της οθόνης εμφανίζεται στην οθόνη μπράιγ και ο χρήστης μπορεί να πλοηγηθεί και να αλληλεπιδράσει με τη συσκευή του χρησιμοποιώντας τα πλήκτρα στην οθόνη) ή τη λειτουργία αντίθεσης.
Επηρεάζεται από δυσλεξία. Τα άτομα με δυσλεξία δυσκολεύονται να διαβάσουν και να κατανοήσουν το περιεχόμενο, ειδικά, για παράδειγμα, αιτιολογημένο κείμενο ή όλα τα κεφαλαία γράμματα.
** Υποφέρουν από φυσικούς περιορισμούς. ** Δεν μπορούν όλα τα άτομα να χρησιμοποιούν όλες τις συσκευές. Για παράδειγμα, η πλοήγηση μέσω περιεχομένου θα πρέπει να είναι διαθέσιμη όχι μόνο σε χρήστες ποντικιού, αλλά και σε χρήστες που δεν μπορούν να χρησιμοποιήσουν ποντίκι.
Χρησιμοποιούν κινητές συσκευές. Προσαρμόστε το περιεχόμενό σας για μικρές οθόνες. Επιτρέπει στον χρήστη να μεγεθύνει ή να αυξήσει το μέγεθος της γραμματοσειράς.
Οι άνθρωποι χρησιμοποιούν πολύ διαφορετικούς τρόπους περιήγησης και κατανάλωσης περιεχομένου. Υπάρχουν χρήστες που πρέπει να είναι συμβατοί με πρόσθετα εργαλεία λογισμικού που τους βοηθούν να αποκτήσουν πρόσβαση στο περιεχόμενο πιο εύκολα. Αυτά τα εργαλεία, γνωστά ως βοηθητικές τεχνολογίες, κυμαίνονται από αναγνώστες οθόνης έως οθόνες αφής και δείκτες.
Ωστόσο, η εφαρμογή και η υποστηρικτική σας τεχνολογία πρέπει να μιλούν μεταξύ τους. Δεν είναι όλα όσα γράφονται σε HTML πλήρως κατανοητά στις υποστηρικτικές τεχνολογίες. Για να βοηθηθεί η «μετάφραση» περιεχομένου από «τεχνική γλώσσα» σε μια πιο αναγνώσιμη από τον άνθρωπο γλώσσα, έχουν δημιουργηθεί Πρότυπα προσβασιμότητας API .
Αυτό το βασικό διάγραμμα προσβασιμότητας στον ιστό θα σας δώσει μια καλύτερη ιδέα για το πώς λειτουργούν οι βοηθητικές τεχνολογίες.
Για να δείξουμε πώς λειτουργεί, ας δούμε ένα απλό παράδειγμα κώδικα:
Διαγράφω '. Για να βοηθήσουμε τους χρήστες να κατανοήσουν τι είδους μέθοδος χρησιμοποιείται για την εκτέλεση της ενέργειας, μπορούμε να χρησιμοποιήσουμε τα χαρακτηριστικά ΑΕΡΑΣ (Υποστηρικτικές εμπλουτισμένες εφαρμογές Διαδικτύου) που καθορίζονται στο https://www.w3.org/TR/wai-aria/ αυτό για να παρακάμψει τον αρχικό ρόλο. Αλλάζουμε την έννοια ενός συνδέσμου σε ένα κουμπί προσθέτοντας το χαρακτηριστικό role ='button'
. Με αυτόν τον τρόπο, οι αναγνώστες οθόνης θα το διαβάσουν ως κουμπί, όχι ως σύνδεσμο. Ποιο είναι πιο κατάλληλο. Συνοπτικά, το χαρακτηριστικό ARIA:
-
Δίνει ή βελτιώνει τη σημασιολογία των μη σημασιολογικών ή σημασιολογικών στοιχείων,
επέκταση αρχείου c++
-
Διασφαλίζει ότι το δυναμικό (ζωντανό) περιεχόμενο παραμένει προσβάσιμο.
-
Παρέχει το ρόλο για να περιγράψει τον τύπο του 'widget' που ορίζεται (μενού, στοιχείο δέντρου, ρυθμιστικό, μετρητής προόδου κ.λπ.).
-
Παρέχει το ρόλο για την περιγραφή της δομής της ιστοσελίδας (κεφαλίδες, περιοχές και πίνακες).
-
Παρέχει την κατάσταση του widgets (επιλεγμένο, έχει αναδυόμενα παράθυρα κ.λπ.).
-
Παρέχει ιδιότητες μεταφοράς και απόθεσης που περιγράφουν πηγές μεταφοράς και στόχους απόθεσης.
Τι είναι η προσβασιμότητα στο Web Design;
Κάθε φορά που σχεδιάζετε περιεχόμενο, σκεφτείτε δύο πράγματα: πώς το περιεχόμενο είναι αντιληπτό και πώς είναι λειτουργικό . Ας εξετάσουμε μερικά παραδείγματα για να δείξουμε την προσβασιμότητα στο σχεδιασμό ιστοσελίδων.
Ας υποθέσουμε ότι σχεδιάζετε ένα αναπτυσσόμενο στοιχείο προσαρμοσμένης επιλογής. Ακολουθούν οι παράμετροι που πρέπει να λάβετε υπόψη κατά το σχεδιασμό του στοιχείου:
-
Επισήμανση διαφορετικών καταστάσεων: ενεργοποιημένη, απενεργοποιημένη, μόνο για ανάγνωση.
-
Επισημάνετε το στοιχείο όταν λαμβάνει την κατάσταση εστίασης / βήματος.
-
Ελέγξτε κάθε στοιχείο επιλογής όταν λαμβάνετε την κατάσταση εστίασης / βήματος.
-
Βεβαιωθείτε ότι το περιεχόμενο εξακολουθεί να είναι αναγνώσιμο όταν μόνο το κείμενο έχει ζουμ σε επίπεδο 200%
-
Βεβαιωθείτε ότι υπάρχει επαρκής αντίθεση μεταξύ του κειμένου και του φόντου του. Αυτό βοηθά άτομα με μέτρια χαμηλή όραση ή άτομα που χρησιμοποιούν συσκευές σε ακραίες συνθήκες φωτισμού, για παράδειγμα, σε άμεσο ηλιακό φως ή σε οθόνη χαμηλής φωτεινότητας, να διαβάσουν το περιεχόμενο.
Ένα άλλο παράδειγμα θα μπορούσε να είναι η επιλογή ενός χρώματος για την περιγραφή μιας κατάστασης. Ακολουθούν τα σημεία που πρέπει να λάβετε υπόψη κατά το σχεδιασμό μιας ενότητας, στην οποία ο χρήστης θα μπορεί να πάρει ένα χρώμα:
-
Υπάρχουν άνθρωποι που δυσκολεύονται να διακρίνουν ορισμένα χρώματα. Έτσι το πράσινο δεν σημαίνει πράσινο για όλους τους επισκέπτες σας. Για να το διορθώσετε, προσθέστε μια περιγραφή για κάθε χρώμα που περιγράφει λεπτομερώς τον σκοπό του χρώματος.
-
Ελέγξτε κάθε στοιχείο όταν λαμβάνετε κατάσταση εστίασης / βήματος.
-
Βεβαιωθείτε ότι υπάρχει αρκετός χώρος μεταξύ των στοιχείων έτσι ώστε κάθε ένα να μπορεί να ενεργοποιηθεί εύκολα, για παράδειγμα, σε συσκευές με μικρότερη προβολή.
3. Δοκιμή προσβασιμότητας: Πού να ξεκινήσετε;
Δεν υπάρχει μονόδρομος να ελέγξετε και να βεβαιωθείτε ότι το περιεχόμενο ιστού είναι πλήρως προσβάσιμο. Απαιτούνται αρκετές τεχνικές για την επαλήθευση και την επίλυση προβλημάτων προσβασιμότητας. Μπορείτε να ξεκινήσετε με ορίστε προβλήματα , λύσεις Υ προτεραιότητες .
Ορισμός των προβλημάτων
Ενώ εργάζεστε σε ζητήματα προσβασιμότητας, προσπαθήστε πάντα να δημιουργήσετε ένα εισιτήριο ανά πρόβλημα με σαφή τίτλο. Αυτό θα πρέπει να απλοποιήσει την κατανόηση του προβλήματος και να βοηθήσει στον καθορισμό μιας προτεραιότητας.
Κακό παράδειγμα: Ο χρήστης δεν μπορεί να χρησιμοποιήσει πληκτρολόγιο στη σελίδα.
Καλό παράδειγμα: Δεν μπορείτε να χρησιμοποιήσετε την πλοήγηση πληκτρολογίου στο κύριο μενού.
Το κακό παράδειγμα οδηγεί σε μια υπόθεση που θα είναι αρκετά δύσκολο να κλείσει σε χρόνο μηδέν. Οι συζητήσεις για διάφορα θέματα θα μπορούσαν να ξεκινήσουν στην ενότητα σχολίων, καθώς ο τίτλος του εισιτηρίου είναι πολύ γενικός.
Το καλό παράδειγμα στοχεύει ακριβώς το πρόβλημα και εστιάζει σε ένα μόνο πράγμα: πλοήγηση πληκτρολογίου στο κύριο μενού.
Προτεραιότητα σε θέματα προσβασιμότητας στο Web
Οι προτεραιότητες είναι σημαντικές επειδή καθορίζουν ποια προβλήματα πρέπει πρώτα να επιλυθούν. Για παράδειγμα, τα WCAG διαιρούνται με τρία επίπεδα συμμόρφωσης : A, AA, AAA, που σημαίνει ότι πρέπει να ξεκινάτε από ένα ελάχιστο επίπεδο A, αλλά αυτό δεν σημαίνει αυτόματα ότι τα επίπεδα AA και AAA είναι αποκλειστικά 'ωραία'. Όλα τα επίπεδα είναι σημαντικά και είναι σημαντικό να μην δοθεί προτεραιότητα στην υπόθεση ότι το επίπεδο Α είναι επαρκές.
Ωστόσο, τα επίπεδα WCAG (ή οποιοσδήποτε άλλος οδηγός) μπορεί να είναι αρκετά δύσκολο να κατανοηθούν κατά καιρούς και να απλοποιηθούν λίγο, μπορείτε επίσης να λάβετε υπόψη τους ακόλουθους ορισμούς προτεραιότητας:
-
Κρίσιμος - Προβλήματα που εμποδίζουν τους χρήστες να χρησιμοποιούν μια εφαρμογή. Δεν υπάρχουν διαθέσιμες λύσεις.
-
Πιο ψηλά - Προβλήματα που εμποδίζουν ή / και αποπροσανατολίζουν τη χρήση μιας εφαρμογής, αλλά δεν εμποδίζουν την ικανότητα του χρήστη να ολοκληρώσει τη λειτουργία.
-
Πιο λιγο - Ζητήματα που είναι ενοχλητικά, αλλά δεν εμποδίζουν τη χρήση ή βελτιώσεις που θα μπορούσαν να γίνουν στην εφαρμογή.
-
Πληροφορίες - Δεν συμμορφώνεται με τις βέλτιστες πρακτικές. Γενικές συστάσεις για βελτιώσεις.
Λύσεις
Καμία από τις οδηγίες - εννοώ WCAG , Ενότητα 508 ή ΥΠΑΡΧΕΙ - Θα σας δώσει μια άμεση λύση όσον αφορά τον τεχνικό κώδικα για να μάθετε πώς πρέπει να επιλυθεί ένα συγκεκριμένο πρόβλημα. Ορίζουν μόνο την αναμενόμενη συμπεριφορά. Ωστόσο, το WCAG έχει επίσης ορίσει διαδικασίες δοκιμής που βοηθούν στην κατανόηση του τρόπου αναπαραγωγής του προβλήματος και υπάρχει μια ομάδα κοινότητας αυτόματης παρακολούθησης WCAG, μια κοινότητα W3C με έμφαση στην ανάπτυξη κανόνες αξιόπιστο, για δοκιμές προσβασιμότητας στο διαδίκτυο, τόσο αυτοματοποιημένες όσο και ημι-αυτοματοποιημένες.
Ένα παράδειγμα για την τεχνική WCAG G4 ('Να επιτρέπεται η διακοπή και επανεκκίνηση του περιεχομένου από το σημείο που σταμάτησε'):
ΔΙΑΔΙΚΑΣΙΑ ΕΞΕΤΑΣΗΣ
Σε μια σελίδα με κύλιση ή περιεχόμενο για κινητά,
- Χρησιμοποιήστε τον μηχανισμό που παρέχεται στην ιστοσελίδα ή από τον πράκτορα χρήστη για παύση του περιεχομένου κατά τη μετακίνηση ή την κύλιση.
- Βεβαιωθείτε ότι η κίνηση ή η κύλιση έχει σταματήσει και δεν επανεκκινείται από μόνη της.
- Χρησιμοποιήστε τον παρεχόμενο μηχανισμό για επανεκκίνηση περιεχομένου εν κινήσει.
- Ελέγχει ότι η κίνηση ή η κύλιση έχει συνεχιστεί από το σημείο που σταμάτησε.
Αναμενόμενα αποτελέσματα
Τα Νο. 2 και 4 είναι αλήθεια.
Όπως μπορούμε να δούμε, δεν υπάρχουν τεχνικές λύσεις, αλλά ορίζεται η αναμενόμενη συμπεριφορά. Σαν το προγραμματιστές ιστού Το εφαρμόζουν, εξαρτάται απόλυτα από αυτούς.
Οδηγίες προσβασιμότητας στον Ιστό και πρότυπα W3C
Τα βασικά πρότυπα ιστού πρέπει να είναι το σημείο εκκίνησης:
-
Το πιο κοινό είναι το Οδηγίες προσβασιμότητας για Περιεχόμενο Ιστού γνωστή ως WCAG. Το WCAG 2.0 είναι ένα σταθερό και τεχνικό πρότυπο αναφοράς, το οποίο έχει οργανώσει 12 οδηγίες 4 αρχές: αντιληπτές, λειτουργικές, κατανοητές και στιβαρές . Για κάθε κατευθυντήρια γραμμή, υπάρχουν επαληθεύσιμα κριτήρια επιτυχίας, τα οποία είναι τρία επίπεδα: A, AA και AAA . '_
-
Τεχνικές για WCAG 2.0 είναι ένας ολοκληρωμένος οδηγός για συγγραφείς περιεχομένου Ιστού.
-
Απαιτήσεις χρήστη για προσβασιμότητα μέσων W3C - Αυτό το έγγραφο παρουσιάζει τις απαιτήσεις προσβασιμότητας που ενδέχεται να έχουν οι χρήστες με αναπηρίες σχετικά με τον ήχο και το βίντεο στον Ιστό.
-
Προσβασιμότητα και Πρόσβαση στις επικοινωνίες Νόμος του ΧΧΙ αιώνα - Το CVAA χωρίζεται σε δύο τίτλους ή ευρεία τμήματα. Ο τίτλος Ι αφορά την πρόσβαση σε επικοινωνίες, έτσι ώστε τα προϊόντα και οι υπηρεσίες που χρησιμοποιούν ευρυζωνική πρόσβαση να είναι πλήρως προσβάσιμα σε άτομα με αναπηρία. Ο τίτλος II του νόμου για την προσβασιμότητα ανοίγει νέους τρόπους για να διευκολύνει τα άτομα με αναπηρία να παρακολουθούν τηλεοπτικό προγραμματισμό στην τηλεόραση και στο Διαδίκτυο.
-
Ενότητα 508 - απαιτήσεις προσβασιμότητας για τεχνολογίες πληροφοριών και επικοινωνιών (ΤΠΕ) που ισχύουν για όλες τις ομοσπονδιακές υπηρεσίες όταν αναπτύσσουν, προμηθεύονται, συντηρούν ή χρησιμοποιούν ηλεκτρονική και πληροφορική.
-
Προσβασιμότητα της Ιστοσελίδας βάσει του Τίτλου II του Νόμος για Αμερικανούς με Αναπηρίες (ADA) - Εκεί, θα μάθετε πώς ισχύουν οι απαιτήσεις απαγόρευσης των διακρίσεων του Τίτλου II του ADA σε ιστότοπους πολιτείας και τοπικής αυτοδιοίκησης.
Δοκιμή προσβασιμότητας στον Ιστό: Πώς μπορώ να ξέρω αν το περιεχόμενό μου είναι προσβάσιμο ή όχι;
Ακολουθούν βασικά και θεμελιώδη σημεία ελέγχου που θα σας βοηθήσουν να κάνετε το περιεχόμενο ιστού σας πιο προσβάσιμο από το πρώτο βήμα:
-
Επικυρώστε το HTML σας. Βεβαιωθείτε ότι η δομή HTML είναι χωρίς σφάλματα, καθώς οι βοηθητικές τεχνολογίες ενδέχεται να έχουν πρόβλημα στην ερμηνεία του περιεχομένου στη σελίδα.
-
Δοκιμάστε μόνο το πληκτρολόγιο. Βεβαιωθείτε ότι όλα τα εκτελέσιμα στοιχεία είναι προσβάσιμα μόνο με το πληκτρολόγιο. Επίσης, πρέπει να μπορείτε να εκτελείτε όλες τις ενέργειες χρησιμοποιώντας πληκτρολόγιο, για παράδειγμα υποβολή φόρμας.
-
Δοκιμάστε με εργαλεία επικύρωσης προσβασιμότητας και επικυρωτές. Χρησιμοποιήστε εργαλεία που αναλύουν και επαληθεύουν πιθανά σφάλματα προσβασιμότητας.
-
Δυναμικό περιεχόμενο. Ειδοποιήστε τους αναγνώστες οθόνης για δυναμικές αλλαγές, π.χ. όταν τα αποτελέσματα αναζήτησης έχουν αλλάξει.
-
Μην βασίζεστε στα χρώματα για να περιγράψετε το νόημα. Χρησιμοποιήστε το χρώμα μαζί με την περιγραφή, π.χ. [Κίτρινο κουτί] προειδοποίηση.
Μην εξαλείψετε το περίγραμμα στο επίκεντρο. Αυτό είναι ένα χαρακτηριστικό που αφαιρείται συνήθως χρησιμοποιώντας το CSS outline: 0;
Μην το κάνετε αυτό, καθώς οι χρήστες του πληκτρολογίου θα χάσουν τον προσανατολισμό τους στη σελίδα. Μπορείτε να καταργήσετε το σχήμα εστίασης για χρήστες εκτός πληκτρολογίου, αλλά πάντα παρέχει ένα περίγραμμα εστίασης για χρήστες πληκτρολογίου.
-
Μηνύματα σφάλματος . Πάντα λέει στον χρήστη πώς να διορθώσει ένα λάθος. Μην υποδεικνύετε απλώς ότι τα δεδομένα δεν είναι έγκυρα.
-
Παραγγελία καρτέλας. Βεβαιωθείτε ότι η πλοήγηση βάσει πίνακα ακολουθεί τις συμβάσεις που ορίζονται στη γραφική διεπαφή χρήστη. Τουλάχιστον, πρέπει να ακολουθήσετε την προεπιλεγμένη κατεύθυνση ανάγνωσης γλώσσας της εφαρμογής. Στα Αγγλικά, για παράδειγμα, η σειρά ανάγνωσης είναι από πάνω προς τα κάτω, από αριστερά προς τα δεξιά. στα Αραβικά είναι από πάνω προς τα κάτω, δεξιά προς τα αριστερά.
-
Ανίπταμαι διαγωνίως. Βεβαιωθείτε ότι το περιεχόμενο της σελίδας παραμένει ευανάγνωστο κατά τη μεγέθυνση έως και 200%.
-
Απενεργοποίηση εικόνων. Μπορείτε ακόμα να χρησιμοποιήσετε τη σελίδα με άνετο τρόπο; Υπάρχουν εναλλακτικά κείμενα για όλες τις εικόνες;
-
Αναγνώστης οθόνης Ελέγξτε εάν μπορείτε να διαβάσετε και να πλοηγηθείτε στο περιεχόμενο χρησιμοποιώντας τουλάχιστον μία συσκευή ανάγνωσης οθόνης, για παράδειγμα VoiceOver, Windows Narrator ή NVDA.
-
Λειτουργία υψηλής αντίθεσης. Ελέγξτε εάν το περιεχόμενο εξακολουθεί να είναι αναγνώσιμο κατά τη μετάβαση σε λειτουργία υψηλής αντίθεσης.
-
Μέγεθος γραμματοσειράς. Βεβαιωθείτε ότι το μέγεθος της γραμματοσειράς στη σελίδα δεν είναι μικρότερο από 10 εικονοστοιχεία.
4. Συνηθισμένα σφάλματα στην προσβασιμότητα στον Ιστό
Το πιο συνηθισμένο λάθος είναι δεν προσδιορίζει τις απαιτήσεις προσβασιμότητας πριν από την ανάπτυξη . Δυστυχώς, αργότερα η προσβασιμότητα θα είναι μέρος της ανάπτυξης, το πιο δύσκολο θα είναι η εφαρμογή λύσεων.
Αυτή είναι μια λίστα με τα πιο κοινά λάθη που κάνουν οι προγραμματιστές κατά την εφαρμογή της προσβασιμότητας:
-
Δεν υπάρχει δυνατότητα πλοήγησης μέσω περιεχομένου που χρησιμοποιεί απλά ένα πληκτρολόγιο .
-
Λανθασμένη χρήση της ιδιότητας σχήματος CSS Στις περισσότερες περιπτώσεις, το outline: 0;
χρησιμοποιείται, πράγμα που σημαίνει ότι το περίγραμμα γύρω από κάθε ενεργό στοιχείο δεν είναι πλέον ορατό. ** Μη χρησιμοποιείτε outline: 0;
ή outline: 0! Important;
**. Ο χρήστης θα χάσει τη δυνατότητα να δει το επίκεντρο στοιχείο κατά την πλοήγηση στο περιεχόμενο, εκτός εάν υπάρχει εναλλακτική λύση, για παράδειγμα, χρησιμοποιώντας την ιδιότητα CSS border
.
-
Χάνοντας την εστίαση του τρέχοντος στοιχείου, για παράδειγμα, λόγω χειρισμών DOM ή της χρήσης της μεθόδου blur()
Αυτό συμβαίνει συχνά για εφαρμογές μιας σελίδας.
-
Δεν υπάρχουν ειδοποιήσεις για χρήστες αναγνωστών οθόνης ότι κάτι έχει αλλάξει, για παράδειγμα: το περιεχόμενο έχει ληφθεί χρησιμοποιώντας το XMLHttpRequest API και νέες αλλαγές έχουν υποβληθεί σε επεξεργασία στη διεπαφή χρήστη. αλλά ο χρήστης δεν έχει ειδοποιηθεί. Αυτό συμβαίνει συχνά με εφαρμογές μιας σελίδας.
-
Η επιλογή ημερομηνίας δεν είναι προσβάσιμη. Σε πολλές περιπτώσεις, χρησιμοποιούνται απρόσιτα εργαλεία επιλογής ημερομηνιών. Οι χρήστες δεν μπορούν να πλοηγηθούν στις επιλογές ημερολογίου με το πληκτρολόγιο.
-
Χρήση επεκτάσεων τι θέλουν διορθώνει αυτόματα προβλήματα προσβασιμότητας . Χρησιμοποιήστε τα προσεκτικά και ελέγξτε τα αποτελέσματα. Η κακή χρήση τους μπορεί να δημιουργήσει περισσότερα προβλήματα παρά λύσεις.
-
** Προσθήκη στο χαρακτηριστικό tabindex
το στοιχείο με αριθμό ευρετηρίου μεγαλύτερο από 0. ** Ο σκοπός της χρήσης tabindex
με ευρετήριο άνω του 0 είναι κυρίως να 'διορθώσετε' τη διαδρομή πλοήγησης. Ωστόσο, σκεφτείτε να αλλάξετε τη δομή HTML αρκετά για να επιτύχετε τη φυσική διαδρομή πλοήγησης. Χειριστείτε το χρησιμοποιώντας tabindex
Μπορεί να οδηγήσει σε προβλήματα συντήρησης, όπως και μια απρόβλεπτη διαδρομή πλοήγησης.
-
Κακή ιεραρχία κεφαλίδας. Δυστυχώς, εξακολουθεί να θεωρείται πολύ συχνά ότι η ιεραρχία κεφαλίδας δεν έχει δημιουργηθεί σωστά, για παράδειγμα,
,
και
. Οι χρήστες του προγράμματος ανάγνωσης οθόνης χρησιμοποιούν επικεφαλίδες για πλοήγηση σε ενότητες και η ακατάλληλη δομή προκαλεί σύγχυση καθώς το περιεχόμενο είναι δύσκολο να κατανοηθεί.
-
Λείπει υποστήριξη υψηλής αντίθεσης. Υπάρχουν άτομα που χρησιμοποιούν το λογισμικό τους σε λειτουργία υψηλής αντίθεσης. Βεβαιωθείτε ότι το περιεχόμενό σας είναι αντιληπτό.
-
Χρησιμοποιήστε μια απρόσιτη λύση CAPTCHA. Δυστυχώς, όλα τα γνωστά CAPTCHAs, για μένα, είναι είτε δυσπρόσιτα είτε πολύ δύσκολα στη χρήση.
-
Πάρα πολλές ή / και μη παύσιμες κινούμενες εικόνες. Η αυτόματη αναπαραγωγή βίντεο, διαφημίσεων ή καρουζέλ εικόνας μπορεί να αποσπά την προσοχή.
-
Μεγάλα κομμάτια κειμένου. Κείμενο που συμπυκνώνεται σε ένα πολύ μεγάλο μπλοκ, χωρίς κενά, κόμματα ή τελείες. Πολύ δύσκολο να διαβαστεί. Χωρίζοντας σε μικρότερα κομμάτια, περισσότερες παραγράφους και υπότιτλοι βοηθούν στην καλύτερη οργάνωση του περιεχομένου του κειμένου.
-
Ζουμ προβλήματα. Βεβαιωθείτε ότι το περιεχόμενό σας παραμένει ευανάγνωστο και με δυνατότητα πλοήγησης όταν μεγεθύνετε έως και 200%.
-
Εξαρτηθείτε από τα χρώματα. Πολύ συχνά η κατάσταση ενός αντικειμένου επισημαίνεται μόνο με ένα χρώμα, για παράδειγμα, μια κατάσταση προειδοποίησης επισημαίνεται μόνο με κίτρινη κουκκίδα. αυτό το χρώμα δεν γίνεται αντιληπτό με τον ίδιο τρόπο για τους τυφλούς χρώματος.
-
Μικροί στόχοι με δυνατότητα κλικ / αφής. Οι περιοχές στις οποίες μπορείτε να κάνετε κλικ / λήψη είναι συχνά πολύ μικρές. Το να μεγαλώσει επιτρέπει στους χρήστες να τους ενεργοποιούν πιο εύκολα.
Αλλά πώς μπορώ να βελτιώσω την προσβασιμότητα στον Ιστό;
Ο ορισμός των προβλημάτων είναι ένα πράγμα. Η διόρθωση είναι πολύ διαφορετική και πολύ συχνά δεν είναι τόσο εύκολη όσο ακούγεται. Αυτό συμβαίνει επειδή οι εφαρμογές API προσβασιμότητας δεν είναι σταθερές και μερικές φορές πρέπει να βρούμε λύσεις ή ακόμη και να αποδεχθούμε το γεγονός ότι κάτι δεν θα λειτουργήσει όταν προσπαθούμε να διορθώσουμε το πρόβλημα.
Όσον αφορά τα εργαλεία, δεν υπάρχει κανένα εργαλείο που μπορεί να ελέγξει όλους τους πιθανούς συνδυασμούς, αλλά ως καλή αρχή, αυτά τα εργαλεία θα βοηθήσουν:
μεταφορά δεδομένων από παλαιού τύπου συστήματα
-
Υπηρεσία επικύρωσης μάρκας W3C - Απλώς για να είμαστε σίγουροι ότι το περιεχόμενο HTML δεν περιέχει σφάλματα. Εάν η δομή HTML έχει σφάλματα, τότε η έξοδος είναι απρόβλεπτη και δεν μπορεί να επεξεργαστεί σωστά, ειδικά από διαφορετικά βοηθητικές τεχνολογίες .
-
https://www.w3.org/WAI/ER/tools/ - Μια λίστα με διαδικτυακά προγράμματα ή υπηρεσίες που θα σας βοηθήσουν να προσδιορίσετε εάν το περιεχόμενο ιστού πληροί τις οδηγίες προσβασιμότητας.
-
Και το εργαλείο μου, ASLint https://www.aslint.org/ , σας βοηθά να βρείτε προβλήματα προσβασιμότητας.
Να θυμάστε πάντα ότι δεν υπάρχει εργαλείο προσβασιμότητας μπορεί να αντικαταστήσει τη χειροκίνητη δοκιμή καθώς δεν μπορούν να αυτοματοποιηθούν πλήρως όλα τα σενάρια, για παράδειγμα ο έλεγχος του λόγου αντίθεσης φωτεινότητας σε στοιχεία με position: fixed;
.
Εστίαση σε ζητήματα που εμποδίζουν τη χρήση της εφαρμογής σας, για παράδειγμα, ο χρήστης δεν μπορεί να περιηγηθεί στο μενού χρησιμοποιώντας το πληκτρολόγιο.
Γιατί είναι σημαντικό να κάνετε προσβάσιμο περιεχόμενο
Όλοι θέλουν να διαδώσουν το περιεχόμενό τους όσο το δυνατόν ευρύτερα. Η προσβασιμότητα βοηθά σε αυτόν τον τομέα, σε μεγάλο βαθμό, από την προσέγγιση ενός μεγαλύτερου κοινού έως τη βελτίωση της εμπειρίας χρήστη για όλα αυτά. Επιπλέον, η προσβασιμότητα δεν είναι μόνο για αυτό που, παραδοσιακά, θα μπορούσε να θεωρηθεί ως άτομα με αναπηρία. Είτε πρόκειται για ένα άτομο που μεγαλώνει και περνά από τις συνοδευτικές φυσικές αλλαγές, κάποιος που τρέχει σε μια ηλιόλουστη ημέρα που χρειάζεται αυτόματη ρύθμιση αντίθεσης στο τηλέφωνό του, ή ένας γονέας με χέρια γεμάτα τσάντες αγορών που θέλει να στείλει ένα μήνυμα κειμένου στη φωνή ; η προσβάσιμη τεχνολογία είναι τεχνολογία που όλοι οι χρήστες μπορούν να χρησιμοποιούν από καιρό σε καιρό.
Ως πρόσθετο όφελος, το θετικό αποτέλεσμα είναι ότι το προσβάσιμο περιεχόμενο που συμμορφώνεται πλήρως με τα πρότυπα WCAG 2.0 είναι ευκολότερο για τις μηχανές αναζήτησης να ανιχνεύσουν και να κατανοήσουν και ότι μπορεί να έχει σημαντική επίδραση στην κατάταξη ενός ιστότοπου. Επομένως, ο προσβάσιμος σχεδιασμός μπορεί να δημιουργήσει επιπλέον κίνηση στον ιστότοπο.
Τέλος, ακολουθούν ορισμένα στατιστικά στοιχεία που πρέπει να λάβετε υπόψη:
-
Περισσότερα από ένα δισεκατομμύριο άνθρωποι σε όλο τον κόσμο βιώνουν κάποιο είδος αναπηρίας
-
Γήρανση του πληθυσμού . Μεταξύ 2015 και 2030, ο αριθμός των ηλικιωμένων, ηλικίας 60 ετών και άνω, αναμένεται να αυξηθεί κατά 56%, από 901 εκατομμύρια σε περισσότερα από 1,4 δισεκατομμύρια.
-
Ο καθολικός σχεδιασμός είναι το κλειδί. Ο καθολικός σχεδιασμός αναφέρεται σε ένα ευρύ φάσμα ιδεών και πρακτικών για την παραγωγή υπηρεσιών, προϊόντων και περιβαλλόντων που είναι εγγενώς προσβάσιμα και μπορούν να χρησιμοποιηθούν από άτομα όλων των ικανοτήτων.
-
Τύποι αναπηριών: Υπάρχουν πέντε ευρείες κατηγορίες αναπηριών, όπως οπτική, κινητικότητα, ομιλία, γνώση και ακοή.
Όλοι χρειαζόμαστε υπηρεσίες υψηλής ποιότητας. Ας τα παραδώσουμε επίσης .