Τι ελέγχεται;
Οι πληροφορίες που μεταφέρονται μέσω των χρωμάτων θα πρέπει επίσης να είναι διαθέσιμες χωρίς να γίνεται αντιληπτό το χρώμα. Δηλαδή θα πρέπει επίσης να επισημαίνονται με άλλα μέσα (όπως έντονη γραφή ή εσοχή).
Οι αναφορές στο περιεχόμενο της σελίδας δε θα πρέπει να χρησιμοποιούν μόνο αισθητηριακά χαρακτηριστικά όπως το χρώμα, το σχήμα ή τη θέση. Αλλά θα πρέπει επίσης να είναι κατανοητές χωρίς ορισμένες αισθητηριακές αντιλήψεις (π.χ. μέσω της αναφοράς στον τίτλο του περιεχομένου). Είναι το αντικείμενο από το Σημείο ελέγχου 1.3.3 Αισθητηριακά Χαρακτηριστικά.
Γιατί ελέγχεται;
Οι πληροφορίες που μεταφέρονται αποκλειστικά μέσω χρώματος δεν είναι προσβάσιμες σε τυφλούς χρήστες. Αλλά και οι χρήστες με χαμηλή όραση, για παράδειγμα, λόγο αχρωματοψίας δεν μπορούν να αναγνωρίσουν και να διακρίνουν τα χρώματα ή μπορούν να τα αναγνωρίσουν μόνο σε περιορισμένο βαθμό. Επομένως, χρήστες με αχρωματοψία και γενικά με χαμηλή όραση επωφελούνται όταν οι πληροφορίες που μεταφέρονται με χρώμα είναι διαθέσιμες και με άλλους οπτικούς τρόπους.
Η αναφορά στο σχήμα, το χρώμα ή τη θέση ορισμένου περιεχομένου σελίδας δεν μπορεί επίσης να χρησιμοποιηθεί για τυφλούς χρήστες ή χρήστες που προβάλλουν τη σελίδα χωρίς το παρεχόμενο φύλλο στυλ ή σε άλλες συσκευές εξόδου.
Πώς ελέγχεται;
1. Εφαρμογή του σημείου ελέγχου
Το σημείο ελέγχου ισχύει πάντα.2. Αξιολόγηση
2.1 Κειμενικές αναφορές σε χρώματα και άλλα αισθητηριακά χαρακτηριστικάΕλέγξτε εάν οι αναφορές κειμένου στο περιεχόμενο της σελίδας προσδιορίζουν μόνο αισθητηριακά χαρακτηριστικά όπως χρώμα, σχήμα, μέγεθος, θέση ή προσανατολισμό και όχι ανεξάρτητα από τις αισθήσεις. Για παράδειγμα, αναφέροντας μια επικεφαλίδα ή μια ετικέτα. Παραδείγματα αναφορών που προσδιορίζουν μόνο αισθητηριακά χαρακτηριστικά:
- Κάντε κλικ στο πράσινο κουμπί για να...
- Χρησιμοποιώντας το στρογγυλό κουμπί μπορείτε να...
- Το κουτί με κόκκινο χρώμα περιέχει πληροφορίες για...
- Κάντε κλικ το δεξί μενού...
- Στη φαρδιά στήλη θα βρείτε...
- Οι παράγραφοι με τη δεξιά στοίχιση δείχνουν ...
Τέτοιες αναφορές δεν μπορούν να γίνουν κατανοητές χωρίς την αντίληψη των αισθητηριακών χαρακτηριστικών.
Αυτό ισχύει επίσης για εναλλακτικά κείμενα για γραφικά πληροφοριών. Δεν πρέπει να μεταφέρουν όλες τις πληροφορίες που σχετίζονται με την κατανόηση απλώς αναφερόμενοι σε αισθητηριακά χαρακτηριστικά. Βλέπεται Αποτυχία F13: F13: Failure of Success Criterion 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
2.2. Παροχή πληροφοριών σχετικά με το χρωματισμόΕλέγξτε εάν ο ιστότοπος περιέχει στοιχεία που μεταφέρουν πληροφορίες μέσω του χρώματος. Παραδείγματα σχετικά αυτού:
- Οι επικεφαλίδες επισημαίνονται με χρώμα.
- Τα επιλεγμένα στοιχεία μενού εμφανίζονται με διαφορετικό χρώμα.
- Οι σύνδεσμοι στο συνεχές κείμενο εμφανίζονται με διαφορετικό χρώμα.
- Ένα γραφικό χρησιμοποιεί διαφορετικά χρώματα για να συγκρίνει τις τάσεις τιμών διαφορετικών μετοχών.
- Τα υποχρεωτικά πεδία στις φόρμες επισημαίνονται με χρώμα. Για παράδειγμα, τα πεδία που επισημαίνονται με κίτρινο πρέπει πάντα να συμπληρώνονται.
Τέτοια σημεία είναι θετικά. Ωστόσο, η μετάδοση σημαντικών πληροφοριών δεν πρέπει να βασίζεται αποκλειστικά σε απλές αλλαγές χρώματος. Επομένως, είναι σημαντικό να ελέγξετε εάν οι πληροφορίες μεταφέρονται και με άλλο τρόπο. Παραδείγματα πρόσθετης διαμεσολάβησης:
- Οι επικεφαλίδες έχουν επιπλέον εσοχές ή επισημαίνονται με διαφορετικό μέγεθος γραμματοσειράς (αυτό συμβαίνει σχεδόν πάντα).
- Οι επιλεγμένες καταχωρήσεις μενού επισημαίνονται επίσης.
- Οι σύνδεσμοι στο συνεχές κείμενο δεν έχουν μόνο χρωματική αντίθεση, αλλά είναι επίσης υπογραμμισμένοι, έντονοι, ανεστραμμένοι ή επισημασμένοι. Εξαίρεση: Η αναλογία αντίθεσης μεταξύ του χρώματος του συνδέσμου και του χρώματος του περιβάλλοντος κειμένου και του χρώματος του συνδέσμου και του φόντου είναι 3:1 ή καλύτερη. Σε αυτήν την περίπτωση, η πρόσθετη επισήμανση μπορεί να παραλειφθεί στην αρχική κατάσταση. Ωστόσο, οι σύνδεσμοι πρέπει στη συνέχεια να τονιστούν επιπλέον, διατηρώντας παράλληλα την εστίαση.
- Οι γραμμές στα διαγράμματα είναι επίσης διακεκομμένες ή συμπαγείς, οι περιοχές έχουν διακριτά σχέδια.
- Τα υποχρεωτικά πεδία στη φόρμα επισημαίνονται επίσης με αστερίσκο (με επεξήγηση της σημασίας στην αρχή της φόρμας) ή κείμενο ("υποχρεωτικό πεδίο").
Υπάρχουν επίσης άλλες, πρόσθετες μέθοδοι διαμεσολάβησης, χρησιμοποιώντας το παράδειγμα επισήμανσης της τρέχουσας επιλεγμένης επιλογής μενού:
- Το breadcrumb δείχνει ποια σελίδα έχει επιλεγεί.
- Η επικεφαλίδα είναι πάντα η ίδια με την επιλεγμένη επιλογή μενού.
Επίσης, δε λαμβάνονται υπόψη οι απλές χρωματικές διαφορές:
- Το έγχρωμο φόντο των στοιχείων (επειδή προστίθεται ή αλλάζει ένα σχήμα).
- Η ανταλλαγή χρωμάτων προσκηνίου και φόντου (γιατί αν γίνει αντιληπτή διαφορά μεταξύ προσκηνίου και φόντου, η ανταλλαγή είναι επίσης αισθητή).
Ταξινόμηση του σημείου ελέγχου
Διατύπωση A11y WCAG 2.0
1.3.3 Αισθητηριακά ΧαρακτηριστικάΟι οδηγίες για την κατανόηση και τη χρήση του περιεχομένου δε βασίζονται αποκλειστικά σε αισθητηριακά χαρακτηριστικά των στοιχείων, όπως: Π.χ. σχήμα, μέγεθος, οπτική τοποθέτηση, προσανατολισμός ή ήχος.
1.4.1 ΧρώμαΤο χρώμα δεν πρέπει να χρησιμοποιείται ως το μοναδικό μέσο για τη μετάδοση πληροφοριών, την ένδειξη μιας ενέργειας, την πρόκληση ανταπόκρισης ή τον προσδιορισμό ενός οπτικού στοιχείου.
Διαφοροποίηση από άλλα σημεία ελέγχου
1. Οριοθέτηση για τον έλεγχο των αντιθέσεωνΑυτό το σημείο ελέγχου δηλαδή Κριτήριο επιτυχίας 1.3.3 Αισθητηριακά Χαρακτηριστικά δεν αφορά τον έλεγχο των αντιθέσεων. Αυτή είναι η εργασία των σημείων ελέγχου 1.4.3(a) «Αντίθεση (Ελάχιστη)» και 1.4.3(b) «Επαρκείς αντιθέσεις γραφικών».
2. Οριοθέτηση για τον έλεγχο σήμανσηςΣε αυτό το σημείο ελέγχου, η σήμανση των στοιχείων δε λαμβάνεται υπόψη. Πρόκειται λοιπόν για την πολύπλευρη επικοινωνία πληροφοριών στην οθόνη. Τα σημεία ελέγχου για τη σωστή επισήμανση, από την άλλη πλευρά, αφορούν τη διασφάλιση ότι οι πληροφορίες είναι διαθέσιμες ανεξάρτητα από την εμφάνιση στην οθόνη ή ότι ο χρήστης μπορεί να προσαρμόσει την εμφάνιση στην οθόνη.
3. Διαφοροποίηση από άλλες επισημάνσεις Αυτό το σημείο ελέγχου 1.3.3 αφορά την ανεξαρτησία χρώματος των υπαρχόντων στοιχείων σελίδας.Μια αρνητική βαθμολογία είναι κατάλληλη, για παράδειγμα, εάν οι σύνδεσμοι στο κείμενο προσδιορίζονται μόνο με χρώμα (και όχι επιπλέον με υπογράμμιση, έντονη γραφή ή προηγούμενη σήμανση). Ωστόσο, εάν οι σύνδεσμοι στο κείμενο δεν επισημαίνονται καθόλου, το σημείο ελέγχου δεν ισχύει. Αυτό είναι στην πραγματικότητα παραβίαση του σημείου ελέγχου 3.2.3 «Συνεπής πλοήγηση».
Αντίστοιχα, κατά τον προσδιορισμό της τρέχουσας θέσης μενού: Ένας ιστότοπος που δεν εμφανίζει καθόλου την τρέχουσα θέση δεν παραβιάζει αυτό το σημείου ελέγχου δηλαδή Κριτήριο επιτυχίας 1.3.3 Αισθητηριακά Χαρακτηριστικά. Ωστόσο, συνήθως δεν πληροί το σημείο ελέγχου 2.4.8(a) «Τοποθεσία».
Ταξινόμηση του σημείου ελέγχου σύμφωνα με το WCAG 2.0
Κατευθυντήριες γραμμές- Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background
- 1.3.2 Meaningful Sequence (Level A)
- 1.3.3 Sensory Characteristics (Level A)
- 1.4.1 Use of Color (Level A)
- G14: Ensuring that information conveyed by color differences is also available in text
- G57 Ordering the content in a meaningful sequence
- G96 Providing textual identification of items that otherwise rely only on sensory information to be understood
- G111: Using color and pattern
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
- F13: Failure of Success Criterion 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location
- F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
- F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only
Πηγές
Αισθητηριακά Χαρακτηριστικά: Κατανόηση από το Σημείο ελέγχου 1.3.3Χρήση χρώματος: Κατανόηση από το Σημείο ελέγχου 1.4.1Τα άτομα που είναι τυφλά και τα άτομα με χαμηλή όραση ενδέχεται να μην είναι σε θέση να κατανοήσουν πληροφορίες εάν μεταφέρονται με βάση το σχήμα ή/και την τοποθεσία. Η παροχή πρόσθετων πληροφοριών εκτός από το σχήμα και/ή την τοποθεσία θα τους επιτρέψει να κατανοήσουν τις πληροφορίες που μεταφέρονται από το σχήμα ή/και μόνες τους.
Καθορισμός χρωμάτωνΟ σκοπός αυτού του κριτηρίου επιτυχίας είναι να διασφαλίσει ότι όλοι οι χρήστες μπορούν να έχουν πρόσβαση σε πληροφορίες που μεταφέρονται από διαφορές χρώματος, δηλαδή με τη χρήση χρώματος όπου κάθε χρώμα έχει μια σημασία που του αποδίδεται. Εάν οι πληροφορίες μεταφέρονται μέσω διαφορών χρωμάτων σε μια εικόνα (ή άλλη μορφή μη κειμένου), το χρώμα ενδέχεται να μην είναι ορατό από χρήστες με χρωματικές ανεπάρκειες. Σε αυτήν την περίπτωση, η παροχή των πληροφοριών που μεταφέρονται με χρώμα μέσω άλλου οπτικού μέσου διασφαλίζει ότι οι χρήστες που δεν μπορούν να δουν χρώμα μπορούν να αντιληφθούν τις πληροφορίες.
Το χρώμα είναι ένα σημαντικό πλεονέκτημα στον σχεδιασμό του περιεχομένου του Ιστού, ενισχύοντας την αισθητική του γοητεία, τη χρηστικότητά του και την προσβασιμότητά του. Ωστόσο, ορισμένοι χρήστες δυσκολεύονται να αντιληφθούν το χρώμα. Τα άτομα με χαμηλή όραση συχνά αντιμετωπίζουν περιορισμένη έγχρωμη όραση και πολλοί ηλικιωμένοι χρήστες δεν βλέπουν καλά το χρώμα. Επιπλέον, τα άτομα που χρησιμοποιούν οθόνες και προγράμματα περιήγησης μόνο κειμένου, περιορισμένων χρωμάτων ή μονόχρωμων δε θα έχουν πρόσβαση σε πληροφορίες που παρουσιάζονται μόνο έγχρωμες.
Παραδείγματα πληροφοριών που μεταφέρονται από χρωματικές διαφορές: "τα υποχρεωτικά πεδία είναι κόκκινα", "το σφάλμα εμφανίζεται με κόκκινο" και "Οι πωλήσεις της Mary είναι με κόκκινο, οι Tom's είναι με μπλε". Παραδείγματα ενδείξεων μιας ενέργειας περιλαμβάνουν: χρήση χρώματος για να υποδείξετε ότι ένας σύνδεσμος θα ανοίξει σε νέο παράθυρο ή ότι μια καταχώρηση βάσης δεδομένων έχει ενημερωθεί με επιτυχία. Ένα παράδειγμα προτροπής απάντησης θα ήταν: η χρήση επισήμανσης στα πεδία φόρμας για να υποδείξετε ότι ένα απαιτούμενο πεδίο είχε μείνει κενό.
Σημείωση: Αυτό δεν θα πρέπει σε καμία περίπτωση να αποθαρρύνει τη χρήση χρώματος σε μια σελίδα ή ακόμη και τη χρωματική κωδικοποίηση εάν είναι περιττή με άλλες οπτικές ενδείξεις.
Το χρώμα προσκηνίου και το χρώμα φόντου του κειμένου πρέπει να ορίζονται στο ίδιο σημείο. Διαφορετικά, μπορεί να συμβεί, για παράδειγμα, το χρώμα της γραμματοσειράς να επιλεγεί ως χρώμα φόντου και να μην είναι πλέον δυνατή η ανάγνωση της γραμματοσειράς.
- Σχετικό άρθρο: καθορισμός χρωμάτων
Ερωτήσεις σχετικά του σημείου ελέγχου
Ερώτηση: Οι σύνδεσμοι που επισκέπτεστε εμφανίζονται συχνά με διαφορετικό χρώμα. Εμπίπτει και σε αυτό το σημείο ελέγχου;
Απάντηση: Η διάκριση μεταξύ συνδέσμων που έχουν επισκεφθεί και εκείνους που δεν έχουν επισκεφθεί είναι χρήσιμη. Ο χρήστης μπορεί να δει αμέσως ποιες σελίδες έχει ήδη επισκεφτεί. Ως εκ τούτου, θα ήταν ιδανικό εάν οι σύνδεσμοι που επισκεφτήκατε επισημαίνονταν επίσης με διαφορετική υπογράμμιση, για παράδειγμα.
Αλλά οι διαθέσιμες επιλογές σχεδίασης είναι περιορισμένες. Και πάρα πολλές διαφορετικές ετικέτες για συνδέσμους μπορεί επίσης να προκαλέσουν σύγχυση.
Σε αυτό το σημείο ελέγχου του WCAG τεστ, η αναγνώριση των συνδέσμων που επισκεφτήκατε δεν λαμβάνεται υπόψη, δεν είναι σχετική για την αξιολόγηση.