Σημείο ελέγχου 1.4.3(c) Ορατό περιεχόμενο με προσαρμοσμένα χρώματα

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

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

Τα κείμενα θα πρέπει επίσης να μπορούν να χρησιμοποιηθούν όταν χρησιμοποιούνται προσαρμοσμένα χρώματα. Είναι αντικείμενο από το Σημείο ελέγχου 1.4.3(c) Ορατό περιεχόμενο με προσαρμοσμένα χρώματα.

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

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

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

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

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

1. Εφαρμογή του σημείου ελέγχου

Το σημείο ελέγχου μπορεί πάντα να εφαρμοστεί σε περιεχόμενο κειμένου. Έλεγχος της εφαρμογής του σημείου ελέγχου στα γραφικά:

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

Ποιο περιεχόμενο είναι σημαντικό και διαθέσιμο μόνο μέσω γραφικών;

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

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

2. Έλεγχος

Βασική ρύθμιση στον Firefox

1. Ανοίξτε τον Firefox και ανοίξτε το παράθυρο διαλόγου Ρυθμίσεις... στο μενού Εργαλεία. Επιλέξτε την καρτέλα Περιεχόμενο. Στην ενότητα Γραμματοσειρές & Χρώματα, επιλέξτε Χρώματα....
2. Στο παράθυρο διαλόγου Χρώματα στην περιοχή Κείμενο και φόντο, επιλέξτε ένα χρώμα ως χρώμα φόντου που συνήθως χρησιμοποιείται σπάνια για τη σχεδίαση σελίδας (π.χ. ανοιχτό ροζ ή πράσινοι τόνοι είναι κατάλληλοι).
3. Κλείστε το παράθυρο διαλόγου με "OK".

2.1 Έλεγχος της αναγνωσιμότητας του κειμένου Ελέγξτε εάν όλο το περιεχόμενο κειμένου εξακολουθεί να είναι ευανάγνωστο μετά τη ρύθμιση προσαρμοσμένων χρωμάτων. 2.2 Έλεγχος της ορατότητας των γραφικών σε μεταβαλλόμενο φόντο

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

1. Ανοίξτε τη σελίδα στον Firefox.
2. Στο επιπρόσθετο Web Developer Toolbar, επιλέξτε Disable > Disable Page Colors.
3. Ελέγξτε εάν εξαφανίζονται σημαντικές πληροφορίες (εξαφανίζονται όταν περιλαμβάνονται ως εικόνες φόντου).
4. Ελέγξτε εάν χρησιμοποιούνται γραφικά με πληροφοριακό χαρακτήρα, με διαφανές φόντο. Το πολύχρωμο χρώμα φόντου θα πρέπει συνήθως να διευκολύνει το αν τα γραφικά έχουν το δικό τους φόντο ή όχι. Ανάλογα με το χρωματικό σχέδιο της σελίδας που ελέγχεται, μπορεί να χρειαστεί να επιλέξετε διαφορετικό χρώμα φόντου στις ρυθμίσεις του Firefox.

3. Σημειώσεις

• Εάν έχουν χρησιμοποιηθεί μέθοδοι αντικατάστασης εικόνας για γραφικά με πληροφοριακό χαρακτήρα, πρέπει να ελεγχθεί εάν η ιδιότητα CSS display:none; χρησιμοποιείται για την απόκρυψη του κειμένου. Για παράδειγμα, έχει χρησιμοποιηθεί. Σε αυτήν την περίπτωση, το εναλλακτικό κείμενο δεν είναι προσβάσιμο στους χρήστες κοινών συσκευών ανάγνωσης οθόνης. Το σημείο ελέγχου 1.1.1a και/ή το σημείο ελέγχου 1.1.1b πρέπει να αξιολογηθούν αναλόγως.

2. Αξιολόγηση

Δεν ικανοποιείται πλήρως

• Το λογότυπο του ιστότοπου εξαφανίζεται με προσαρμοσμένα χρώματα.

Υποτίμηση του συνολικού αποτελέσματος

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

Διατύπωση A11y WCAG 2.0

1.4.3 Αντίθεση

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

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

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

Διαφοροποίηση από άλλα σημεία ελέγχου

Αυτό το σημείο ελέγχου δηλ. Κριτήριο επιτυχίας 1.4.3(c) Ορατό περιεχόμενο με προσαρμοσμένα χρώματα αφορά τη χρηστικότητα των γραφικών παρασκηνίου για χρήστες με χαμηλή όραση. Η διαθεσιμότητα εναλλακτικών κειμένων για γραφικά φόντου, δηλαδή η χρηστικότητα για τυφλούς χρήστες, είναι το αντικείμενο των σημείων ελέγχου 1.1.1a "Εναλλακτικά κείμενα για στοιχεία ελέγχου" και 1.1.1b "Εναλλακτικά κείμενα για γραφικά και αντικείμενα".

Ταξινόμηση του σημείου ελέγχου σύμφωνα με το WCAG 2.0

Κατευθυντήρια γραμμή

• Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background

Κριτήριο επιτυχίας

• 1.4.3 Contrast (Minimum) (Level AA)
  "Although this Success Criterion only applies to text, similar issues occur for data presented in charts or graphs. Good color contrast should also be provided for data presented in these forms." (Understanding SC 1.4.3 )

Τεχνικές Γενικές τεχνικές

• G140 Separating information and structure from presentation so that Web pages can be presented different ways without losing information
• G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text

Αποτυχίες

• F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
• F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa

Πρέπει γενικά να αποφεύγετε τα γραφικά με διάφανο φόντο;

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

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

Τα στοιχεία λίστας είναι σημαντικά ενημερωτικά γραφικά. Μπορείτε να τα συμπεριλάβετε ως γραφικά φόντου;

Όταν αλλάζει το φόντο, τα στοιχεία λίστας που είναι ενσωματωμένα στο φόντο εξαφανίζονται. Αυτά τα γραφικά είναι σίγουρα επίσης σημαντικά.

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

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