Lead translating organization: Foundation for Research and Technology-Hellas (FORTH) - Institute of Computer Science
N. Plastira 100, Vassilika Vouton, GR-700 13 Heraklion, Crete, Hellas (Greece), http://www.ics.forth.gr
Αυτή είναι μια εξουσιοδοτημένη μετάφραση ενός εγγράφου του W3C. Για την κατασκευή και δημοσίευση της παρούσας επίσημης μετάφρασης ακολουθήθηκε η διαδικασία που περιγράφεται στο έγγραφο Policy for W3C Authorized Translations. Στην περίπτωση διαφωνιών, η έγκυρη έκδοση του εγγράφου είναι το πρωτότυπο έγγραφο στα αγγλικά.
Πνευματικά δικαιώματα (Copyright) © 2008 Κοινοπραξία του Παγκόσμιου Ιστού (W3C®) Τεχνολογικό Ίδρυμα Μασαχουσέτης (MIT), Ευρωπαϊκή Κοινοπραξία Έρευνας για την Πληροφορική και τα Μαθηματικά (ERCIM), Keio, Με την επιφύλαξη παντός δικαιώματος. Ισχύουν οι κανόνες περί ευθύνης (liability), εμπορικών σημάτων (trademark) και χρήσης εγγράφων (document use) του W3C.
Το έγγραφο "Τεχνικές για το WCAG 2.0" παρέχει πληροφορίες προς τους προγραμματιστές περιεχομένου Ιστού, οι οποίοι έχουν ως στόχο την ικανοποίηση των κριτηρίων επιτυχίας που περιέχονται στις Οδηγίες για την προσβασιμότητα του περιεχομένου του Ιστού 2.0. Οι τεχνικές είναι συγκεκριμένες πρακτικές σύνταξης που μπορεί να χρησιμοποιηθούν για την υποστήριξη των κριτηρίων επιτυχίας του WCAG 2.0. Το παρόν έγγραφο παρέχει "Γενικές τεχνικές" που περιγράφουν βασικές πρακτικές, οι οποίες εφαρμόζονται σε οποιαδήποτε τεχνολογία και τεχνικές συγκεκριμένης τεχνολογίας που παρέχουν πληροφορίες που εφαρμόζονται σε συγκεκριμένες τεχνολογίες. Η Κοινοπραξία του Παγκόσμιου Ιστού απλώς καταγράφει τεχνικές για μη αποκλειστικές τεχνολογίες. Η Ομάδα εργασίας του WCAG ευελπιστεί στην παροχή παρόμοιων τεχνικών από προμηθευτές άλλων τεχνολογιών, για την περιγραφή του τρόπου συμμόρφωσης με το WCAG 2.0 χρησιμοποιώντας αυτές τις τεχνολογίες. Η χρήση των τεχνικών που παρέχονται στον παρόν καθιστά ευκολότερη για το περιεχόμενο Ιστού την επίδειξη συμμόρφωσης με τα κριτήρια επιτυχίας του WCAG 2.0, σε σχέση με την μη χρήση αυτών των τεχνολογιών.
Εκτός των τεχνικών που παρέχονται στο παρόν έγγραφο, ενδέχεται να υπάρχουν άλλες τεχνικές που να μπορούν να χρησιμοποιθούν για την υλοποίηση της συμμόρφωσης με το WCAG 2.0. Η ομάδα εργασίας του WCAG ενθαρρύνει την υποβολή αυτών των τεχνικών, έτσι ώστε να μελετηθεί η συμπερίληψή τους στο παρόν έγγραφο, προκειμένου το σύνολο των τεχνικών που διατηρούνται από την ομάδα εργασίας του WCAG να είναι όσο το δυνατόν πιο περιεκτικό. Υποβάλετε τεχνικές προς μελέτη με χρήση της "φόρμας υποβολής τεχνικών" "(Techniques Submission Form)."
Το παρόν έγγραφο αποτελεί μέρος μιας σειράς εγγράφων που έχουν εκδοθεί από την Πρωτοβουλία Προσβασιμότητας στον Ιστό (Web Accessibility Initiative, WAI) της W3C για την υποστήριξη των οδηγιών WCAG 2.0. Το παρόν έγγραφο δημοσιεύθηκε ως ένα σημείωμα της ομάδας εργασίας ταυτόχρονα με τη δημοσίευση του WCAG 2.0 ως μια Σύσταση της W3C. Σε αντίθεση με το WCAG 2.0, αναμένεται ότι οι πληροφορίες στην "Κατανόηση του WCAG 2.0" θα ενημερώνονται ανά διαστήματα. Βλέπε την "Επισκόπηση των Οδηγιών για την Προσβασιμότητα του Περιεχομένου του Ιστού" για μια εισαγωγή στο WCAG, με την υποστήριξη τεχνικών εγγράφων και εκπαιδευτικού υλικού.
Στην ενότητα αυτή περιγράφεται η κατάσταση του παρόντος εγγράφου κατά την έκδοσή του. Άλλα έγγραφα ενδέχεται να υπερισχύουν αυτού του εγγράφου. Μια λίστα με τις τρέχουσες εκδόσεις του W3C και την πιο πρόσφατη αναθεώρηση της παρούσας τεχνικής έκθεσης παρέχεται στο ευρετήριο τεχνικών εκθέσεων της W3C (W3C technical reports index) στη διεύθυνση http://www.w3.org/TR/.
Αυτό είναι ένα σημείωμα της ομάδας εργασίας, "Τεχνικές για το WCAG 2.0". Αυτές οι τεχνικές δημιουργούνται από την Ομάδα εργασίας των Οδηγιών για την Προσβασιμότητα του Περιεχομένου του Ιστού (Web Content Accessibility Guidelines Working Group) με σκοπό την παροχή οδηγιών σχετικά με τον τρόπο συμμόρφωσης με τη Σύσταση για τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 2.0. Γίνεται παραπομπή στις τεχνικές από τα "Κατανόηση του WCAG 2.0" και "Πώς ικανοποιείται το WCAG 2.0". Να σημειωθεί ότι τα περιεχόμενα του παρόντος εγγράφου είναι πληροφοριακού χαρακτήρα (παρέχουν οδηγίες) και όχι κανονιστικά (δεν ορίζουν απαιτήσεις για τη συμμόρφωση με το WCAG 2.0).
Η ομάδα εργασίας ζητά οποιαδήποτε σχόλια επί της πρωτότυπης έκδοσης να διατυπωθούν χρησιμοποιώντας την ηλεκτρονική φόρμα σχολίων (online comment form) που παρέχεται. Εάν αυτό δεν είναι εφικτό, τα σχόλια μπορούν επίσης να αποστέλλονται στη διεύθυνση public-comments-wcag20@w3.org. Τα αρχεία για τη λίστα δημόσιων σχολίων (archives for the public comments list) είναι διαθέσιμα στο κοινό. Σχόλια που παραλαμβάνονται στο παρόν έγγραφο μπορούν να απευθύνονται σε μελλοντικές εκδόσεις του παρόντος εγγράφου ή με άλλο τρόπο. Η ομάδα εργασίας δεν σκοπεύει να παράσχει επίσημες απαντήσεις σε σχόλια. Τα αρχεία των συζητήσεων της λίστας αλληλογραφίας της ομάδας εργασίας WCAG (WCAG WG mailing list discussions) είναι διαθέσιμα στο κοινό και μελλοντικές εργασίες που αναλαμβάνει η ομάδα εργασίας μπορεί να ανταποκρίνονται σε σχόλια που έχουν παραληφθεί στο παρόν έγγραφο.
Εκτιμάται ιδιαίτερα υλικό από το κοινό για τη βοήθεια κατά την τεκμηρίωση τεχνικών. Χρησιμοποιείτε τη φόρμα υποβολής τεχνικών (Techniques Submission Form) για την υποβολή τεχνικών.
Το παρόν έγγραφο έχει δημιουργηθεί ως μέρος της Πρωτοβουλίας Προσβασιμότητας στον Ιστό (Web Accessibility Initiative) (WAI). Οι στόχοι της Ομάδας Εργασίας WCAG εξετάζονται στο καταστατικό της ομάδας εργασίας WCAG (WCAG Working Group charter). Η Oμάδα Εργασίας WCAG αποτελεί τμήμα της Τεχνικής Δραστηριότητας WAI (WAI Technical Activity).
Η δημοσίευση ως Σημείωμα της ομάδας εργασίας δεν συνεπάγεται ότι έχει την έγκριση από τα Μέλη της Ομάδας W3C. Το παρόν αποτελεί πρόχειρο έγγραφο, το οποίο μπορεί να ενημερωθεί, να αντικατασταθεί ή να καταργηθεί από άλλα έγγραφα, οποιαδήποτε στιγμή. Το παρόν έγγραφο θα πρέπει να αναφέρεται ως έργο που βρίσκεται σε εξέλιξη.
Το παρόν έγγραφο είναι αποτέλεσμα του έργου μιας ομάδας, η οποία εργάστηκε σύμφωνα με την πολιτική περί ευρεσιτεχνιών του W3C της 5ης Φεβρουαρίου του 2004 (5 February 2004 W3C Patent Policy). Το W3C διατηρεί μια δημόσια λίστα των περιγραφών ευρεσιτεχνιών (public list of any patent disclosures) που έχει δημιουργηθεί σε συνδυασμό με τα παραδοτέα της ομάδας. Αυτή η σελίδα περιέχει επίσης οδηγίες για την περιγραφή των ευρεσιτεχνιών. Ένα άτομο που έχει πραγματική γνώση του διπλώματος ευρεσιτεχνίας, το οποίο το άτομο πιστεύει ότι περιέχει ουσιαστικές αξιώσεις (Essential Claim(s)) οφείλει να αποκαλύψει τις πληροφορίες σύμφωνα με την ενότητα 6 της πολιτικής του W3C περί διπλωμάτων ευρεσιτεχνίας (section 6 of the W3C Patent Policy).
Το παρόν έγγραφο αποτελεί μέρος μιας σειράς εγγράφων που έχουν εκδοθεί από την Πρωτοβουλία Προσβασιμότητας στον Ιστό (Web Accessibility Initiative, WAI) της W3C για την υποστήριξη των οδηγιών WCAG 2.0 [WCAG20]. Περιλαμβάνει μια ποικιλία τεχνικών που περιλαμβάνουν συγκεκριμένες πρακτικές σύνταξης και παραδείγματα ανάπτυξης περισσότερο προσβάσιμου περιεχομένου Ιστού. Επίσης, παραθέτει αποτυχίες που περιγράφουν κοινά λάθη που θεωρούνται αποτυχίες των Κριτηρίων Επιτυχίας του WCAG 2.0.
Το παρόν δεν είναι εισαγωγικό έγγραφο. Είναι μια αναλυτική τεχνική περιγραφή τεχνικών που μπορούν να χρησιμοποιηθούν για την αντιμετώπιση των απαιτήσεων στο WCAG 2.0. Δείτε την Επισκόπηση των Οδηγιών για την Προσβασιμότητα του Περιεχομένου του Ιστού (Web Content Accessibility Guidelines (WCAG) Overview) για μια εισαγωγή στο WCAG, τα υποστηρικτικά τεχνικά έγγραφα και το εκπαιδευτικό υλικό.
Προκειμένου το σύνολο τεχνικών που διατηρείται από την ομάδα εργασίας του WCAG να είναι όσο το δυνατόν πιο περιεκτικό, η ομάδα εργασίας του WCAG ενθαρρύνει την υποβολή νέων τεχνικών, έτσι ώστε να μελετηθεί η συμπερίληψή τους στο παρόν έγγραφο. Υποβάλετε τεχνικές προς μελέτη με χρήση της "Φόρμας Υποβολής Τεχνικών" ("Techniques Submission Form").
Αντί για τεχνικές συγκεκριμένης τεχνολογίας στο WCAG 2.0, οι ίδιες οι οδηγίες και τα κριτήρια επιτυχίας έχουν συνταχθεί με τρόπο ουδέτερης τεχνολογίας. Προκειμένου να παρέχονται οδηγίες και παραδείγματα για την τήρηση των οδηγιών χρησιμοποιώντας συγκεκριμένες τεχνολογίες (για παράδειγμα HTML), η ομάδα εργασίας έχει προσδιορίσει επαρκείς τεχνικές για κάθε Κριτήριο Επιτυχίας που είναι επαρκείς για την κάλυψη αυτού του Κριτηρίου Επιτυχίας. Η λίστα επαρκών τεχνικών βρίσκεται στην "Κατανόηση του WCAG 2.0" (και επίσης στο "Πώς ικανοποιείται το WCAG 2.0"). Έτσι είναι δυνατή η ενημέρωση της λίστας καθώς ανακαλύπτονται νέες τεχνικές και καθώς οι τεχνολογίες Ιστού και οι υποστηρικτικές τεχνολογίες προοδεύουν.
Να σημειωθεί ότι όλες οι τεχνικές είναι πληροφοριακού χαρακτήρα (informative). Οι "επαρκείς τεχνικές" θεωρούνται επαρκείς από την ομάδα εργασίας του WCAG για την κάλυψη των Κριτηρίων Επιτυχίας. Ωστόσο, δεν είναι απαραίτητη η χρήση αυτών των συγκεκριμένων τεχνικών. Εάν χρησιμοποιούνται τεχνικές άλλες από εκείνες που παρατίθενται από την ομάδα εργασίας, τότε θα χρειαστεί κάποια άλλη μέθοδος καθιέρωσης της ικανότητας της τεχνικής για την κάλυψη των κριτηρίων επιτυχίας.
Τα περισσότερα κριτήρια επιτυχίας έχουν πολλαπλές επαρκείς τεχνικές. Οποιεσδήποτε από τις καταχωρημένες επαρκείς τεχνικές μπορούν να χρησιμοποιηθούν για την κάλυψη του Κριτηρίου Επιτυχίας. Ενδέχεται να υπάρχουν άλλες τεχνικές οι οποίες δεν τεκμηριώνονται από την ομάδα εργασίας, που θα μπορούσαν επίσης να καλύψουν το κριτήριο επιτυχίας. Καθώς προσδιορίζονται νέες επαρκείς τεχνικές, θα προστίθενται στη λίστα.
Επιπλέον των επαρκών τεχνικών, υπάρχει ένας αριθμός συμβουλευτικών τεχνικών που μπορούν να βελτιώσουν την προσβασιμότητα, αλλά δεν θεωρούνται επαρκείς τεχνικές καθώς δεν είναι επαρκείς για την κάλυψη των πλήρων απαιτήσεων των κριτηρίων επιτυχίας, δεν είναι ελέγξιμες ή/και είναι καλές και αποτελεσματικές τεχνικές σε ορισμένες περιπτώσεις, αλλά όχι αποτελεσματικές ή χρήσιμες σε άλλες. Αυτές παρατίθενται ως συμβουλευτικές τεχνικές και βρίσκονται ακριβώς κάτω από τις επαρκείς τεχνικές. Οι συγγραφείς ενθαρρύνονται να χρησιμοποιούν αυτές τις τεχνικές όποτε είναι κατάλληλες για την αύξηση της προσβασιμότητας στις Ιστοσελίδες τους.
Η παρακάτω λίστα περιλαμβάνει συνδέσμους προς μια σειρά τεχνικών εγγράφων στην αγγλική.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού παράκαμψης μπλοκ υλικού που επαναλαμβάνονται σε πολλαπλές Ιστοσελίδες, με απευθείας παράκαμψη στο κύριο περιεχόμενο της Ιστοσελίδας. Το πρώτο αλληλεπιδραστικό στοιχείο στην Ιστοσελίδα είναι ένας σύνδεσμος προς την αρχή του κύριου περιεχομένου. Η ενεργοποίηση του συνδέσμου ορίζει την επισήμανση πέραν του υπόλοιπου περιεχομένου στο κύριο περιεχόμενο. Η παρούσα τεχνική είναι περισσότερο χρήσιμη όταν μια Ιστοσελίδα έχει μία περιοχή κύριου περιεχομένου, αντί για ένα σύνολο περιοχών περιεχομένου που είναι εξίσου σημαντικές.
Σημείωση: Ορατοί σύνδεσμοι είναι απαραίτητοι για όσους πλοηγούνται με πληκτρολόγιο, συμπεριλαμβανομένων χρηστών εναλλαγής, εκείνους που χρησιμοποιούν τεχνικές που παράγουν αργά πατήματα πλήκτρων, χρήστες λογισμικού μεγέθυνσης οθόνης, χρήστες προγραμμάτων ανάγνωσης οθόνης που εργάζονται με συναδέλφους με όραση, χρήστες μόνο πληκτρολογίου και εκείνους που πλοηγούνται χρησιμοποιώντας λογισμικό αναγνώρισης φωνής.
Μια ηλεκτρονική εφημερίδα περιέχει πολλές ενότητες πληροφοριών: μια λειτουργία αναζήτησης, ένα εταιρικό banner, πλευρικές γραμμές, μικρές ιστορίες, τρόποι επικοινωνίας με την εφημερίδα κ.λπ. Το κύριο θέμα βρίσκεται στο κέντρο της σελίδας. Ο πρώτος σύνδεσμος που βρίσκει ο χρήστης όταν μετακινείται με το πλήκτρο tab στη σελίδα έχει τίτλο "Μετάβαση σε κεντρικό θέμα". Η ενεργοποίηση του συνδέσμου μετακινεί την οπτική επισήμανση στο θέμα. Νέo πάτημα του πλήκτρου tab μεταφέρει τον χρήστη στον πρώτο σύνδεσμο στο κεντρικό θέμα.
Μια ιστοσελίδα περιλαμβάνει ποικιλία τεχνικών πλοήγησης σε κάθε σελίδα: ένα στοιχείο ιχνηλάτησης, ένα εργαλείο αναζήτησης, έναν χάρτη ιστότοπου και μια λίστα σχετικών πόρων. Ο πρώτος σύνδεσμος στη σελίδα έχει τίτλο "Μετάβαση στο κύριο περιεχόμενο". Ο χρήστης ενεργοποιεί τον σύνδεσμο για παράκαμψη των εργαλείων πλοήγησης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το πρώτο στοιχείο ελέγχου με δυνατότητα επισήμανσης στην Ιστοσελίδα είναι σύνδεσμος.
Ελέγξτε ότι η περιγραφή του συνδέσμου ενημερώνει ότι πραγματοποιεί σύνδεση στο κύριο περιεχόμενο.
Ελέγξτε ότι ο σύνδεσμος είναι είτε πάντα ορατός ή ορατός όταν έχει επισήμανση πληκτρολογίου.
Ελέγξτε ότι η ενεργοποίηση του συνδέσμου μετακινεί την επισήμανση στο κύριο περιεχόμενο.
Ελέγξτε ότι μετά την ενεργοποίηση του συνδέσμου, η επισήμανση πληκτρολογίου μετακινείται στο κύριο περιεχόμενο.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Κάθε τεχνολογία που περιλαμβάνει περιεχόμενο σε κίνηση ή κύλιση.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπους παύσης της κίνησης ή κύλισης του περιεχομένου. Εάν ο χρήστης πρέπει να παύσει την κίνηση, για να μειώσει την απόσπαση της προσοχής του ή την αύξηση του διαθέσιμου χρόνου για ανάγνωση, μπορεί να το κάνει και μετά να επανεκκινήσει το περιεχόμενο, όπως απαιτείται. Αυτός ο μηχανισμός μπορεί να παρασχεθεί είτε μέσω αλληλεπιδραστικών στοιχείων ελέγχου που συμμορφώνονται με το WCAG ή μέσω συντομεύσεων πληκτρολογίου. Οι συντομεύσεις πληκτρολογίου, εάν χρησιμοποιούνται, είναι τεκμηριωμένες.
Ένας ιστότοπος περιέχει ένα κυλιόμενο banner ειδήσεων στην κορυφή της σελίδας. Οι χρήστες που χρειάζονται περισσότερο χρόνο για να το διαβάσουν, μπορούν να πατήσουν το κουμπί Escape για παύση της κύλισης. Η κύλιση ξαναξεκινά με νέο πάτημα του πλήκτρου escape.
Μια ιστοσελίδα περιέχει σύνδεσμο με ετικέτα "Πώς να δέσετε ένα παπούτσι" που συνδέεται με κινούμενο σχέδιο Flash. Το κείμενο ακριβώς πριν τον σύνδεσμο ενημερώνει τον χρήστη ότι το πάτημα του πλήκτρου διαστήματος μπορεί να παύσει το κινούμενο σχέδιο και να το ξαναξεκινήσει.
Σε μια σελίδα με περιεχόμενο σε κίνηση ή κύλιση,
Χρησιμοποιήστε τον μηχανισμό που παρέχεται στην Ιστοσελίδα ή από τον πράκτορα χρήστη για την παύση του περιεχομένου σε κίνηση ή κύλιση.
Ελέγξτε ότι η κίνηση ή η κύλιση σταμάτησε και δεν ξαναξεκινά από μόνη της.
Χρησιμοποιήστε τον μηχανισμό που παρέχεται για να ξαναξεκινήσει το κινούμενο περιεχόμενο.
Ελέγξτε ότι η κίνηση ή η κύλιση ξαναξεκίνησε από το σημείο όπου είχε σταματήσει.
Τα #2 και #4 είναι αληθή.
Αυτή η τεχνική εφαρμόζεται σε όλες τις τεχνολογίες ή μεθόδους που υποστηρίζουν την εκτέλεση δραστηριότητας που δεν απαιτεί προγραμματισμένη αλληλεπίδραση για τη λειτουργία της.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή στους χρήστες όλου του απαραίτητου χρόνου που χρειάζονται για την ολοκλήρωση μιας δραστηριότητας. Αυτή η τεχνική αφορά στην παροχή συγκεκριμένης δραστηριότητας που δεν απαιτεί προγραμματισμένη αλληλεπίδραση. Δίδεται στους χρήστες όσος χρόνος τους είναι απαραίτητος για την αλληλεπίδραση με τη δραστηριότητα.
Μια αλληλεπιδραστική εξέταση για ένα μάθημα παρέχει όλες τις ερωτήσεις σε μια Ιστοσελίδα. Οι χρήστες μπορούν να αξιοποιήσουν όσο χρόνο χρειάζονται για την ολοκλήρωσή της.
Σε ένα αλληλεπιδραστικό παιχνίδι, οι χρήστες αξιοποιούν όσο χρόνο θέλουν στη σειρά τους αντί της υποχρέωσης να ολοκληρώσουν την κίνησή τους εντός περιορισμένου χρονικού διαστήματος.
Σε ηλεκτρονική δημοπρασία, κάθε συμμετέχων μπορεί να υποβάλει μόνο μία προσφορά αντί για πολλαπλές ανταγωνιστικές προσφορές στη βάση του χρόνου. Η κατάθεση προσφορών είναι ανοικτή για μια ολόκληρη ημέρα, παρέχοντας επαρκή χρόνο σε οποιονδήποτε για τη συμπλήρωση της απλής φόρμας συμμετοχής. Μόλις κλείσει η κατάθεση προσφορών, η καλύτερη κερδίζει.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Καθορίστε εάν υπάρχουν προγραμματισμένες αλληλεπιδράσεις.
Το #1 είναι ψευδές.
Οποιαδήποτε τεχνολογία που υποστηρίζει ήχο και βίντεο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας δεύτερης έκδοσης περιεχομένου βίντεο που παρέχει εκτεταμένες ηχητικές περιγραφές. Μία από τις δυσκολίες σχετικά με τη δημιουργία παραδοσιακών ηχητικών περιγραφών, είναι το γεγονός ότι ο αφηγητής χρειάζεται ορισμένες φορές να παρέχει πολλές πληροφορίες κατά τη διάρκεια πολύ σύντομων παύσεων στον διάλογο. Η εκτεταμένη ηχητική περιγραφή προσωρινά παύει τον ήχο και το βίντεο προκειμένου να επιτρέψει την παράδοση σημαντικών πληροφοριών όταν οι παύσεις στον διάλογο είναι ανεπαρκείς για ικανοποιητική περιγραφή.
Η παροχή μιας δεύτερης έκδοσης της ταινίας με εκτεταμένες ηχητικές περιγραφές θα καταστήσει το περιεχόμενο προσβάσιμο για άτομα με τύφλωση που χρειάζεται να ακούνε όχι μόνο τον διάλογο, αλλά και το περιβάλλον επίσης και άλλες πτυχές του βίντεο που δεν επικοινωνούν μόνο από τον διάλογο των χαρακτήρων και για το οποίο δεν υπάρχει επαρκής χρόνος κατά τη διάρκεια του φυσικού διαλόγου.
Λόγω του ότι διαταράσσει την παρακολούθηση αυτών που δεν χρειάζονται την πρόσθετη περιγραφή, παρέχονται συχνά τεχνικές που σας επιτρέπουν να (απ)ενεργοποιήσετε τη δυνατότητα. Εναλλακτικά, είναι δυνατή η παροχή εκδόσεων με ή χωρίς την πρόσθετη περιγραφή.
Σε μια εναλλακτική έκδοση ηλεκτρονικά διαθέσιμου βίντεο μιας οικογένειας που διαφεύγει μέσα από ένα φλεγόμενο κτίριο, υπάρχει συνεχής διάλογος μεταξύ του ανδρόγυνου σχετικά με το πού βρίσκονται τα παιδιά. Εν τω μεταξύ, στο παρασκήνιο, ένας τοίχος γκρεμίζεται και αποτελεί σημαντική πληροφορία για την ιστορία καθώς θα φράξει την έξοδό τους από αυτό το τμήμα του κτιρίου. Το κομμάτι βίντεο διακόπτεται (επαναλαμβάνεται το ίδιο καρέ) ενώ ο αφηγητής παρέχει λεπτομέρειες σχετικά με την πτώση του τοίχου και το βίντεο συνεχίζει.
Μια εκπαιδευτική ταινία έχει επεξηγηματικό κείμενο που εκτελείται σχεδόν συνέχεια σε όλη τη διάρκειά της. Μια εναλλακτική έκδοση είναι διαθέσιμη για άτομα με δυσκολίες στην παρακολούθηση του βίντεο. Η εναλλακτική έκδοση "παγώνει" το βίντεο και παρέχει ηχητική περιγραφή των βασικών πληροφοριών.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Άνοιγμα της έκδοσης της ταινίας που περιλαμβάνει τις εκτεταμένες ηχητικές περιγραφές.
Ελέγξτε ότι το βίντεο διακόπτεται για εκτεταμένες ηχητικές περιγραφές όπου δεν υπάρχει επαρκής χώρος για τη συμπερίληψη της απαραίτητης αφήγησης μεταξύ του φυσικού διαλόγου.
Ελέγξτε ότι οι απαραίτητες πληροφορίες βρίσκονται στην ηχητική περιγραφή.
Εάν οι εναλλακτικές εκδόσεις βρίσκονται σε ξεχωριστή σελίδα, ελέγξτε τη διαθεσιμότητα των συνδέσμων που επιτρέπουν στον χρήστη να λάβει τις άλλες εκδόσεις.
Οι έλεγχοι #2, #3 και #4 είναι αληθείς.
Εφαρμόζεται σε όλες τις τεχνολογίες που παρουσιάζουν οπτικοακουστικές πληροφορίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε χρήστες που δεν μπορούν να ακούσουν, την πρόσβαση σε εκπομπές συγχρονισμένων μέσων πραγματικού χρόνου. Είναι πιο δύσκολο να δημιουργηθούν ακριβείς επεξηγήσεις πραγματικού χρόνου, διότι υπάρχει λίγος χρόνος για τη διόρθωση σφαλμάτων ή για δεύτερη ακρόαση ή για επιβεβαίωση με τρίτο άτομο ότι οι λέξεις αναπαράγονται με ακρίβεια. Είναι επίσης πιο δύσκολη η απλοποίηση ή η παράφραση πληροφοριών διότι κυλούν πολύ γρήγορα.
Υπάρχουν τεχνικές καταχώρησης κειμένου με πληκτρολόγηση σε πραγματικό χρόνο που κάνουν χρήση τεχνολογιών στενογραφίας και ταχείας δακτυλογράφησης. Η επανεκφώνηση ομιλίας σε κείμενο (κατά την οποία ένα άτομο ακούει μια ομιλία και έπειτα την επανεκφωνεί πολύ προσεκτικά σε έναν υπολογιστή που είναι εκπαιδευμένος στην ομιλία αυτού του ατόμου) χρησιμοποιείται σήμερα για υπηρεσίες διασύνδεσης τηλεφωνικών κλήσεων και μπορεί να χρησιμοποιηθεί στο μέλλον για δημιουργία επεξηγήσεων. Τέλος, είναι δυνατή η μετατροπή ομιλίας σε κείμενο με διορθώσεις.
Παράδειγμα 1: Ένα τηλεοπτικό στούντιο χρησιμοποιεί υπηρεσία επεξηγήσεων σε πραγματικό χρόνο για τη δημιουργία επεξηγήσεων για το βραδινό ηλεκτρονικό δελτίο ειδήσεων .
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι γίνεται χρήση διαδικασίας και πολιτικής που διασφαλίζουν ότι οι επεξηγήσεις παραδίδονται σε πραγματικό χρόνο
Ελέγξτε ότι το #1 είναι αληθές.
Τεχνολογίες προγραμματισμού που έχουν τυποποιημένα συστατικά στοιχεία, προγραμματισμένα να έρχονται σε διεπαφή με τα API προσβασιμότητας
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στην υποστηρικτική τεχνολογία να κατανοήσει το περιεχόμενο Ιστού, έτσι ώστε να μπορεί να μεταφέρει ισοδύναμες πληροφορίες στον χρήστη μέσω μιας εναλλακτικής διεπαφής χρήστη.
Μερικές φορές, το περιεχόμενο δεν δημιουργείται με χρήση γλώσσας επισημείωσης, αλλά γλώσσας ή εργαλείων προγραμματισμού Σε πολλές περιπτώσεις, αυτές οι τεχνολογίες έχουν συστατικά στοιχεία διεπαφής που είναι ήδη προγραμματισμένα για να έρχονται σε διεπαφή με API προσβασιμότητας. Εάν ένας συγγραφέας χρησιμοποιεί αυτά τα συστατικά στοιχεία και συμπληρώνει τις ιδιότητες (π.χ. όνομα κ.λπ.), τα συστατικά στοιχεία διεπαφής χρήστη που θα προκύψουν στο περιεχόμενο θα είναι προσβάσιμα από υποστηρικτική τεχνολογία.
Ωστόσο, εάν ένας συγγραφέας θέλει να δημιουργήσει ένα νέο συστατικό στοιχείο διεπαφής χρήστη και δεν μπορεί να χρησιμοποιήσει τυποποιημένα συστατικά στοιχεία, τότε πρέπει να είναι σίγουρος για να προσθέσει ο ίδιος τις προβλέψεις προσβασιμότητας - και να τις εφαρμόσει με τρόπο συμβατό με το API προσβασιμότητας.
Ύστερα από την ολοκλήρωση, το προσαρμοσμένο συστατικό στοιχείο θα πρέπει να ελέγχεται για υποστήριξη προσβασιμότητας.
Μια Ιστοσελίδα χρησιμοποιεί java για τη δημιουργία ενός applet. Μια ομάδα συγγραφέων θέλει να δημιουργήσει έναν ολόκληρο νέο τύπο συστατικού στοιχείου διεπαφής, άρα δεν μπορεί να χρησιμοποιήσει υπάρχοντα αντικείμενα Java. Χρησιμοποιούν κλάσεις Java swing για τη δημιουργία του συστατικού στοιχείου διότι οι κλάσεις Java swing έχουν ήδη προβλέψεις για σύνδεση με διαφορετικά API προσβασιμότητας. Χρησιμοποιώντας τις κλάσεις Java swing, μπορούν να δημιουργήσουν ένα συστατικό στοιχείο διεπαφής που προβάλλει το όνομα και το ρόλο του, μπορεί να ρυθμιστεί από AT και ειδοποιεί την AT για τυχόν αλλαγές.
Μια Ιστοσελίδα χρησιμοποιεί ένα αυθεντικό στοιχείο ελέγχου ActiveX που είναι γραμμένο στη γλώσσα προγραμματισμού C++. Το στοιχείο ελέγχου είναι γραμμένο για να υποστηρίξει ρητά το API Microsoft Active Accessibility (MSAA) για την προβολή πληροφοριών σχετικά με εντολές αποδοχής. Το στοιχείο ελέγχου στη συνέχεια αλληλεπιδρά απευθείας με την υποστηρικτική τεχνολογία που εκτελεί τον πράκτορα χρήστη σε συστήματα που υποστηρίζουν MSAA.
Αποδώστε το περιεχόμενο χρησιμοποιώντας προσβάσιμο πράκτορα χρήστη.
Χρησιμοποιήστε ένα εργαλείο προσβασιμότητας που έχει σχεδιαστεί για το API προσβασιμότητας του πράκτορα χρήστη, για να αξιολογήσει κάθε συστατικό στοιχείο διεπαφής χρήστη.
Ελέγξτε ότι το εργαλείο βρίσκει το όνομα και το ρόλο κάθε συστατικού στοιχείου διεπαφής χρήστη.
Αλλάξτε τις τιμές στο συστατικό στοιχείο.
Ελέγξτε ότι το εργαλείο προσβασιμότητας έχει ειδοποιηθεί.
Ελέγξτε ότι το συστατικό στοιχείο λειτουργεί με υποστηρικτικές τεχνολογίες.
Οι έλεγχοι #3, #5 και #6 είναι αληθείς για κάθε συστατικό στοιχείο διεπαφής χρήστη.
Τεχνολογίες που υποστηρίζουν περιεχόμενο που αναβοσβήνει.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να ελαχιστοποιηθεί η απόσπαση που προκαλείται από το περιεχόμενο που αναβοσβήνει και να δοθεί η δυνατότητα στους χρήστες να επισημάνουν το υπόλοιπο περιεχόμενο στη σελίδα.
Είναι δυνατή η δημιουργία περιεχομένου που αναβοσβήνει με χρήση ποικιλίας τεχνολογιών, πολλές από τις οποίες περιλαμβάνουν επιλογές για δημιουργία συνεχούς βρόχου περιεχομένου που αναβοσβήνει ή διαφορετικό προσδιορισμό του χρόνου απεικόνισης του περιεχομένου που αναβοσβήνει. Ο περιορισμός του αναβοσβησίματος του περιεχομένου σας στα πέντε δευτερόλεπτα ελαχιστοποιεί την απόσπαση της προσοχής που προκαλείται από αυτό. Αυτό θα ωφελήσει άτομα με συγκεκριμένα είδη μαθησιακών δυσκολιών και άτομα με περιορισμένη όραση.
Μια κινούμενη εικόνα χρησιμοποιείται για επισήμανση αντικειμένων σε έκπτωση. Εντός της λίστας των αντικειμένων προς αγορά, χρησιμοποιείται η εικόνα μιας κόκκινης ετικέτας ακολουθούμενη από τη φράση "Εκπτώσεις" για να υποδειχθούν τα αντικείμενα που προσφέρονται σε μειωμένη τιμή. Η εικόνα της κόκκινης ετικέτας αναβοσβήνει κατά τη φόρτωση της σελίδας και σταματά εντός πέντε δευτερολέπτων,
Βρείτε όλα τα αντικείμενα που αναβοσβήνουν.
Για κάθε αντικείμενο που αναβοσβήνει, καθορίστε εάν το διάστημα μεταξύ της έναρξης και της λήξης του αναβοσβησίματος είναι μικρότερο από πέντε δευτερόλεπτα.
Το #2 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή πληροφοριών σε χρήστες σχετικά με αυτό που θα συμβεί όταν μια αλλαγή ενός στοιχείου ελέγχου μιας φόρμας έχει ως αποτέλεσμα αλλαγή στο περιβάλλον. Καθώς η αλλαγή της τιμής ενός στοιχείου ελέγχου φόρμας κατά κανόνα δεν έχει ως αποτέλεσμα αλλαγή στο περιβάλλον, είναι σημαντικό οι συγγραφείς να παρέχουν οδηγίες που ενημερώνουν τον χρήστη για τη συμπεριφορά εκ των προτέρων. Όπου αυτό είναι εφικτό, μια καλή ιδέα είναι ο συσχετισμός μέσω προγραμματισμού των οδηγιών που περιγράφουν την αλλαγή με το ίδιο το στοιχείο ελέγχου φόρμας.
Τα παρακάτω είναι ορισμένα παραδείγματα του τρόπου παροχής οδηγιών σε διαφορετικές περιστάσεις.
Παροχή οδηγιών στην Ιστοσελίδα με σειρά ανάγνωσης που προηγείται του στοιχείου διεπαφής χρήστη το οποίο προκαλεί αλλαγή του περιβάλλοντος μέσω αλλαγής της ρύθμισης.
Για διαδικασία πολλαπλών βημάτων όπου χρήστες πρέπει να συμπληρώνουν συγκεκριμένα βήματα προκειμένου να προσεγγίσουν το στοιχείο διεπαφής χρήστη όπου οι αλλαγές ρύθμισης θα προκαλούσαν μια αλλαγή περιβάλλοντος, η παροχή της οδηγίας πρέπει να είναι μέρος της διαδικασίας πριν από το βήμα όπου θα συναντούσαν την αλλαγή του περιβάλλοντος.
Στην περίπτωση ενός ενδοδικτύου όπου η εκπαίδευση χρηστών απαιτείται πριν από τη χρήση μιας εφαρμογής Ιστού όπου τα στοιχεία διεπαφής χρήστη θα προκαλούσαν αλλαγές στο περιβάλλον όταν αλλάζουν οι ρυθμίσεις, παρέχονται οδηγίες ως μέρος της εκπαίδευσης.
Μια σειρά ραδιοπλήκτρων στην κορυφή μιας σελίδας περιλαμβάνουν επιλογές για γερμανικά, γαλλικά και ισπανικά. Οδηγίες στον χρήστη ότι η γλώσσα θα αλλάξει με τον ορισμό μιας επιλογής, προηγούνται των κουμπιών.
Μια ηλεκτρονική έρευνα 50 ερωτήσεων εμφανίζει μία ερώτηση κάθε φορά. Οδηγίες εμφανίζονται στην αρχή της έρευνας εξηγώντας ότι οι χρήστες θα μεταφερθούν στην επόμενη ερώτηση της έρευνας με την επιλογή μίας απάντησης σε κάθε ερώτηση.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εντοπίστε περιεχόμενο όπου αλλαγή στη ρύθμιση ενός στοιχείου ελέγχου φόρμας έχει ως αποτέλεσμα αλλαγή στο περιβάλλον
Ελέγξτε ότι πριν την ενεργοποίηση των στοιχείων ελέγχου, υπάρχει διαθέσιμη μια εξήγηση αυτού που θα συμβεί όταν αλλάξει το στοιχείο ελέγχου φόρμας
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν χρώμα και κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι όταν χρησιμοποιούνται διαφορές χρώματος για τη μεταφορά πληροφοριών, όπως σε απαιτούμενα πεδία φόρμας, οι πληροφορίες που μεταφέρονται με τις διαφορές χρώματος, μεταφέρονται επίσης ρητά σε κείμενο.
Το πρόγραμμα για τις συνεδρίες σε ένα τεχνολογικό συνέδριο οργανώνεται σε τρία τμήματα. Οι συνεδρίες για το τμήμα 1 απεικονίζονται πάνω σε μπλε παρασκήνιο. Οι συνεδρίες για το τμήμα 2 απεικονίζονται πάνω σε κίτρινο παρασκήνιο. Οι συνεδρίες για το τμήμα 3 απεικονίζονται πάνω σε πράσινο παρασκήνιο. Μετά το όνομα κάθε συνεδρίας ακολουθεί ένας κωδικός του τμήματος σε κείμενο: Τ1 για το τμήμα 1, Τ2 για το τμήμα 2 και Τ3 για το τμήμα 3.
Το πρόγραμμα για τις συνεδρίες σε ένα τεχνολογικό συνέδριο οργανώνεται σε τρία τμήματα. Δίπλα από τον τίτλο κάθε συνεδρίας υπάρχει ένα έγχρωμο εικονίδιο που δείχνει το τμήμα στο οποίο ανήκει: τα μπλε εικονίδια αντιπροσωπεύουν το τμήμα 1, τα κίτρινα το τμήμα 2 και τα πράσινα το τμήμα 3. Κάθε εικονίδιο είναι συσχετισμένο με ένα εναλλακτικό κειμένου που αναλόγως λέει "Τμήμα 1", "Τμήμα 2" ή "Τμήμα 3".
Μια φόρμα περιέχει αρκετά απαιτούμενα πεδία. Οι ετικέτες για τα απαιτούμενα πεδία εμφανίζονται σε κόκκινο. Επιπρόσθετα, στο τέλος κάθε ετικέτας υπάρχει ένας χαρακτήρας αστερίσκου, *. Οι οδηγίες για τη συμπλήρωση της φόρμας υποδεικνύουν ότι "όλα τα απαιτούμενα πεδία εμφανίζονται με κόκκινο και σημειώνονται με αστερίσκο*" και ακολουθούνται από παράδειγμα.
Σημείωση: Οι αστερίσκοι ενδέχεται να μην μπορούν να διαβαστούν από όλα τα προγράμματα ανάγνωσης (σε όλες τις λειτουργίες ανάγνωσης) και μπορεί να είναι δύσκολο για χρήστες με χαμηλή όραση λόγω της απόδοσής τους σε μικρότερο μέγεθος σε σχέση με το τυπικό κείμενο. Είναι σημαντικό για τους συγγραφείς να συμπεριλάβουν το κείμενο που υποδεικνύει ότι χρησιμοποιείται αστερίσκος και να εξετάσουν την αύξηση του μεγέθους του αστερίσκου που παρουσιάζεται.
Μια ηλεκτρονική αίτηση δανείου εξηγεί ότι τα πράσινα κουμπιά προχωρούν τη διαδικασία και τα κόκκινα την ακυρώνουν. Μια φόρμα περιέχει ένα πράσινο κουμπί με το κείμενο Μετάβαση. Οι οδηγίες λένε "Πιέστε το κουμπί Μετάβαση για να υποβάλετε τα αποτελέσματά σας και προχωρήστε στο επόμενο βήμα."
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε στοιχείο όπου χρησιμοποιείται διαφορά χρώματος για τη μεταφορά πληροφοριών:
Ελέγξτε ότι οι πληροφορίες που μεταφέρονται είναι επίσης διαθέσιμες σε κείμενο και ότι το κείμενο δεν είναι περιεχόμενο υπό συνθήκη.
Ελέγξτε ότι το #1 είναι αληθές.
Εφαρμόζεται σε κάθε τεχνολογία
Αυτή η τεχνική σχετίζεται με:
Σκοπός του ελέγχου για παραβάσεις των γενικών και κόκκινων ορίων φλας, είναι να επιτρέψει σε άτομα που υποφέρουν από φωτοευαίσθητες κρίσεις να βλέπουν ιστοσελίδες χωρίς να τους εμφανίζεται περιεχόμενο που ίσως τους προκαλέσει κρίση. Αν και είναι δυνατή η παροχή προειδοποιήσεων, κάποια άτομα μπορεί να τις χάσουν και τα παιδιά ίσως να μην είναι σε θέση τις διαβάσουν ή να τις καταλάβουν. Με αυτή την τεχνική, ελέγχεται όλο το υλικό και εάν παραβιάζει το όριο φλας ή κόκκινου φλας, είτε δεν τοποθετείται στον ιστότοπο ή τροποποιείται, έτσι ώστε να μην παραβιάζει τα όρια.
Σημείωμα 1:Υπάρχουν ορισμένοι απλοί έλεγχοι που μπορούν να εκτελεστούν για συγκεκριμένους τύπους φλας. Για παράδειγμα:
Εάν το υλικό αναβοσβήνει 3 φορές το δευτερόλεπτο ή λιγότερο, τότε μπορεί να χρησιμοποιηθεί ο απλός έλεγχος στην τεχνική G19: Διασφάλιση ότι δεν υπάρχει συστατικό στοιχείο του περιεχομένου που αναβοσβήνει περισσότερες από τρεις φορές σε κάθε περίοδο του 1 δευτερολέπτου (Ensuring that no component of the content flashes more than three times in any 1-second period).
Εάν το υλικό αναβοσβήνει μόνο σε ένα μέρος της οθόνης τη φορά και είναι αρκετά μικρό, τότε μπορεί να χρησιμοποιηθεί ο απλός έλεγχος στην τεχνική G176: Διατήρηση της περιοχής φλας αρκετά μικρής (Keeping the flashing area small enough).
Σημείωμα 2:Για όλους τους τύπους, ένα εργαλείο είναι απαραίτητο για την παρακολούθηση όλων των παραγόντων και την εφαρμογή αυτών στο βίντεο σε μια χρονικά συνεχόμενη βάση.
Μια κινούμενη εικόνα κεραυνού παρουσιάζει έξι αστραπές Τα φλας είναι τόσο γρήγορα και μεγάλα που το γενικό όριο φλας παραβιάζεται όταν ελέγχεται με ένα εργαλείο ανάλυσης φλας. Η κινούμενη εικόνα τροποποιείται για να δημιουργηθεί μια μικρή παύση μετά από κάθε ζευγάρι αστραπών. Μετά τις αλλαγές, η κινούμενη εικόνα δεν παραβαίνει το γενικό όριο φλας.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε να δείτε ότι το περιεχόμενο δεν παραβαίνει το γενικό όριο ή/και το όριο κόκκινου φλας
χρησιμοποιήστε ένα εργαλείο για να καθορίσετε ότι δεν πραγματοποιείται υπέρβαση ούτε του γενικού ορίου φλας, ούτε του ορίου κόκκινου φλας
Ελέγξτε ότι το #1 είναι αληθές.
Κάθε τεχνολογία με οπτικά δεδομένα εξόδου
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να εξασφαλίσει ότι οι χρήστες μπορούν να διαβάσουν κείμενο που τους παρουσιάζεται πάνω σε παρασκήνιο. Αυτή η τεχνική ξεπερνά την τεχνική αντίθεσης 4,5:1 για την παροχή υψηλότερου επιπέδου αντίθεσης, για να διευκολύνει άτομα με περιορισμένη όραση να διαβάσουν.
Εάν το παρασκήνιο είναι ένα συμπαγές χρώμα (όλο μαύρο ή όλο λευκό), τότε η αναλογία αντίθεσης του κειμένου μπορεί να διατηρηθεί διασφαλίζοντας ότι κάθε γράμμα του κειμένου έχει 7:1 αναλογία αντίθεσης με το παρασκήνιο.
Εάν η σχετική φωτεινότητα του παρασκηνίου ή των γραμμάτων ποικίλλει (ή ακολουθούν πρότυπο), τότε το παρασκήνιο γύρω από τα γράμματα μπορεί να επιλεγεί ή να σκιαστεί έτσι ώστε τα γράμματα να διατηρήσουν αναλογία αντίθεσης 7:1 με το παρασκήνιο πίσω τους ακόμα και αν δεν έχουν την ίδια αναλογία αντίθεσης με όλο το παρασκήνιο.
Η αναλογία αντίθεσης μπορεί συχνά να διατηρηθεί με αλλαγή της σχετικής φωτεινότητας των γραμμάτων καθώς η σχετική φωτεινότητα του παρασκηνίου αλλάζει σε όλη τη σελίδα.
Μια άλλη μέθοδος είναι η ύπαρξη ενός φωτεινού περιγράμματος (halo) γύρω από το κείμενο που παρέχει την απαραίτητη αναλογία αντίθεσης εάν η εικόνα ή το χρώμα παρασκηνίου δεν διαφέρουν επαρκώς σε σχετική φωτεινότητα.
Επιλέγεται μαύρο παρασκήνιο έτσι ώστε να είναι δυνατή η χρήση γραμμάτων σε ανοικτό χρώμα που να ταιριάζουν με το λογότυπο της εταιρείας.
Έχει τοποθετηθεί κείμενο πάνω από μια εικόνα των χώρων (campus) του κολλεγίου. Εφόσον εμφανίζεται μια μεγάλη ποικιλία χρωμάτων και βαθμών σκοτεινότητας στην εικόνα, η περιοχή πίσω από το κείμενο παίρνει ένα θολό λευκό χρώμα, τέτοιο που η εικόνα είναι πολύ αχνή και ο μέγιστος βαθμός σκοτεινότητας είναι και πάλι αρκετά φωτεινός για τη διατήρηση της αναλογίας αντίθεσης 7:1 με το μαύρο κείμενο γραμμένο πάνω στην εικόνα
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανάλυση αντίθεσης - Εφαρμογή (Contrast Analyser - Application)
Ανάλυση αναλογίας αντίθεσης - ηλεκτρονική υπηρεσία (Contrast Ratio Analyser - online service)
Ανάλυση χρωματικής αντίθεσης - επέκταση για Firefox (Colour Contrast Analyser - Firefox Extension)
Χρώματα στην ανάλυση χρωματικής αντίθεσης Ιστού (Colors On the Web Color Contrast Analyzer)
Λίστα εργαλείων χρωματικής αντίθεσης (List of color contrast tools)
Μετρήστε τη σχετική φωτεινότητα για κάθε γράμμα (εκτός εάν είναι όλα ομοιόμορφα) χρησιμοποιώντας τον τύπο:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B όπου τα R, G και B καθορίζονται ως εξής:
εάν RsRGB <= 0.03928 τότε R = RsRGB/12.92, διαφορετικά R = ((RsRGB+0.055)/1.055) ^ 2.4
εάν GsRGB <= 0.03928 τότε G = GsRGB/12.92, διαφορετικά G = ((GsRGB+0.055)/1.055) ^ 2.4
εάν BsRGB <= 0.03928 τότε B = BsRGB/12.92, διαφορετικά B = ((BsRGB+0.055)/1.055) ^ 2.4
και τα RsRGB, GsRGB και BsRGB καθορίζονται ως εξής:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Ο χαρακτήρας "^" είναι ο τελεστής ύψωσης σε δύναμη.
Σημείωση: Για aliased γράμματα, χρησιμοποιήστε την τιμή της σχετικής φωτεινότητας που εντοπίζεται στα δύο pixel μέσα από την άκρη του γράμματος.
Μετρήστε τη σχετική φωτεινότητα των pixel παρασκηνίου ακριβώς μετά το γράμμα χρησιμοποιώντας τον ίδιο τύπο.
Μετρήστε την αναλογία αντίθεσης χρησιμοποιώντας τον ακόλουθο τύπο.
(L1 + 0.05) / (L2 + 0.05), όπου
Το L1 είναι η σχετική φωτεινότητα (relative luminance) του πιο ανοικτού από τα χρώματα προσκηνίου ή παρασκηνίου και
L2 είναι η σχετική φωτεινότητα (relative luminance) του πιο σκούρου από τα χρώματα προσκηνίου ή παρασκηνίου.
Ελέγξτε ότι η αναλογία αντίθεσης είναι ίση ή μεγαλύτερη από 7:1
Το #4 είναι αληθές
Κάθε τεχνολογία που παράγει οπτικά δεδομένα εξόδου
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να εξασφαλίσει ότι οι χρήστες μπορούν να διαβάσουν κείμενο που τους παρουσιάζεται πάνω σε παρασκήνιο. Για το κριτήριο επιτυχίας 1.4.3, αυτή η τεχνική περιγράφει την ελάχιστη αναλογία αντίθεσης για κείμενο που είναι μικρότερο από 18 στιγμές (όχι σε έντονη γραφή) και μικρότερο από 14 στιγμές (έντονη γραφή). Για το κριτήριο επιτυχίας 1.4.5, αυτή η τεχνική καθιστά πιο ήπια την απαίτηση της αναλογίας αντίθεσης 7:1 για κείμενο που είναι τουλάχιστον 18 στιγμές (όχι σε έντονη γραφή) ή τουλάχιστον 14 στιγμές (έντονη γραφή).
Εάν το παρασκήνιο είναι ένα συμπαγές χρώμα (όλο μαύρο ή όλο λευκό), τότε η σχετική φωτεινότητα του κειμένου μπορεί να διατηρηθεί διασφαλίζοντας ότι κάθε γράμμα του κειμένου έχει αναλογία αντίθεσης 4,5:1 με το παρασκήνιο.
Εάν η σχετική φωτεινότητα του παρασκηνίου ή των γραμμάτων ποικίλλει (ή ακολουθούν πρότυπο), τότε το παρασκήνιο γύρω από τα γράμματα μπορεί να επιλεγεί ή να σκιαστεί έτσι ώστε τα γράμματα να διατηρήσουν την αναλογία αντίθεσης 4,5:1 με το παρασκήνιο πίσω τους ακόμα και αν δεν έχουν την ίδια αναλογία αντίθεσης με όλο το παρασκήνιο.
Η αναλογία αντίθεσης μπορεί συχνά να διατηρηθεί με αλλαγή της σχετικής φωτεινότητας των γραμμάτων καθώς η σχετική φωτεινότητα του παρασκηνίου αλλάζει σε όλη τη σελίδα.
Μια άλλη μέθοδος είναι η ύπαρξη ενός φωτεινού περιγράμματος (halo) γύρω από το κείμενο που παρέχει την απαραίτητη αναλογία αντίθεσης εάν η εικόνα ή το χρώμα παρασκηνίου δεν διαφέρει επαρκώς σε σχετική φωτεινότητα.
Επιλέγεται μαύρο παρασκήνιο έτσι ώστε να είναι δυνατή η χρήση γραμμάτων σε ανοικτό χρώμα που να ταιριάζουν με το εταιρικό λογότυπο.
Έχει τοποθετηθεί κείμενο πάνω μια από εικόνα των χώρων (campus) του κολλεγίου. Εφόσον εμφανίζεται μια μεγάλη ποικιλία χρωμάτων και βαθμών σκοτεινότητας στην εικόνα, η περιοχή πίσω από το κείμενο παίρνει ένα θολό λευκό χρώμα, τέτοιο που η εικόνα είναι πολύ αχνή και ο μέγιστος βαθμός σκοτεινότητας είναι και πάλι αρκετά φωτεινός για τη διατήρηση της αναλογίας αντίθεσης 4,5:1 με το μαύρο κείμενο γραμμένο πάνω στην εικόνα
Δείτε επίσης τα δείγματα αντίθεσης σε σχετικούς πόρους.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανάλυση αντίθεσης - Εφαρμογή (Contrast Analyser - Application)
Ανάλυση αναλογίας αντίθεσης - ηλεκτρονική υπηρεσία (Contrast Ratio Analyser - online service)
Ανάλυση χρωματικής αντίθεσης - επέκταση για Firefox (Colour Contrast Analyser - Firefox Extension)
Χρώματα στην ανάλυση χρωματικής αντίθεσης Ιστού (Colors On the Web Color Contrast Analyzer)
Λίστα εργαλείων χρωματικής αντίθεσης (List of color contrast tools)
(καμία δεν εμπεριέχεται στη λίστα)
Μετρήστε τη σχετική φωτεινότητα για κάθε γράμμα (εκτός εάν είναι όλα ομοιόμορφα) χρησιμοποιώντας τον τύπο:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B όπου τα R, G και B καθορίζονται ως εξής:
εάν RsRGB <= 0.03928 τότε R = RsRGB/12.92, διαφορετικά R = ((RsRGB+0.055)/1.055) ^ 2.4
εάν GsRGB <= 0.03928 τότε G = GsRGB/12.92, διαφορετικά G = ((GsRGB+0.055)/1.055) ^ 2.4
εάν BsRGB <= 0.03928 τότε B = BsRGB/12.92, διαφορετικά B = ((BsRGB+0.055)/1.055) ^ 2.4
και τα RsRGB, GsRGB και BsRGB καθορίζονται ως εξής:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Ο χαρακτήρας "^" είναι ο τελεστής ύψωσης σε δύναμη.
Σημείωση: Για aliased γράμματα, χρησιμοποιήστε τη σχετική φωτεινότητα που εντοπίζεται στα δύο pixel μέσα από την άκρη του γράμματος.
Μετρήστε τη σχετική φωτεινότητα των pixel παρασκηνίου ακριβώς μετά το γράμμα χρησιμοποιώντας τον ίδιο τύπο.
Μετρήστε την αναλογία αντίθεσης χρησιμοποιώντας τον ακόλουθο τύπο.
(L1 + 0.05) / (L2 + 0.05), όπου
Το L1 είναι η σχετική φωτεινότητα (relative luminance) του πιο ανοικτού από τα χρώματα προσκηνίου ή παρασκηνίου και
L2 είναι η σχετική φωτεινότητα (relative luminance) του πιο σκούρου από τα χρώματα προσκηνίου ή παρασκηνίου.
Ελέγξτε ότι η αναλογία αντίθεσης είναι ίση ή μεγαλύτερη από 4,5:1
Το #4 είναι αληθές.
Εφαρμόζεται σε κάθε τεχνολογία
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφύγει το αναβοσβήσιμο σε ρυθμούς που είναι γνωστό ότι προκαλούν κρίσεις εάν τα φλας είναι φωτεινά και αρκετά μεγάλα. Εφόσον μερικοί χρήστες μπορούν να χρησιμοποιούν μεγεθυντές οθόνης, αυτή η τεχνική περιορίζει το αναβοσβήσιμο του περιεχομένου κάθε μεγέθους σε όχι περισσότερα από τρία φλας σε κάθε περίοδο του 1 δευτερολέπτου.
Σημείωση 1:Αυτή η τεχνική είναι πιο αυστηρή από τα κριτήρια επιτυχίας επιπέδου 1, αλλά είναι ευκολότερο να δοκιμαστεί και να χρησιμοποιηθεί για την ικανοποίηση των Κριτηρίων Επιτυχίας επιπέδου 1 διότι όλα τα όρια αποτυχίας στα κριτήρια επιτυχίας επιπέδου 1 περιλαμβάνουν 3,5 ή περισσότερα φλας εντός ενός δευτερολέπτου. Το μεγαλύτερο μέρος του περιεχομένου δεν αναβοσβήνει καθόλου και ακόμα και το μέρος του που αναβοσβήνει, δεν το κάνει τόσο γρήγορα παρά μόνο σε σπάνιες περιπτώσεις. Συνεπώς, προκειμένου να αποφευχθεί η ανάγκη διενέργειας πιο περίπλοκων δοκιμών που καθορίζονται από τα κριτήρια επιτυχίας, θα μπορούσε κάποιος να ακολουθήσει αυτή την τεχνική για να διασφαλίσει ότι το περιεχόμενο αναβοσβήνει μία, δύο ή το πολύ τρεις φορές σε κάθε περίοδο του 1 δευτερολέπτου.
Σημείωση 2:Όσον αφορά στα 3,5 φλας: εάν υπάρχουν επτά μεταβάσεις από σκοτεινό σε φωτεινό ή από φωτεινό σε σκοτεινό, αυτό σημαίνει 3,5 φλας, το οποίο είναι μεγαλύτερο από τα επιτρεπόμενα τρία φλας (έξι μεταβάσεις).
Παράδειγμα 3,5 φλας ή επτά μεταβάσεων:
ΕΝΑΡΞΗ ΜΕ ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ ή
ΕΝΑΡΞΗ ΜΕ ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ-ΦΩΤΕΙΝΟ-ΣΚΟΤΕΙΝΟ
Το περιεχόμενο έχει φλας από αστραπές. Το περιεχόμενο έχει σχεδιαστεί έτσι ώστε η αστραπή να εμφανίζεται (φλας) μόνο δύο ή τρεις φορές χωρίς παύση ανάμεσα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι δεν υπάρχουν περισσότερα από τρία φλας σε κάθε περίοδο του 1 δευτερολέπτου.
Εάν υπάρχουν τρία φλας, ελέγξτε ότι η κατάσταση Φωτεινό/Σκοτεινό στο τέλος της περιόδου του 1 δευτερολέπτου είναι ίδια με την αρχή.
Τόσο το βήμα 1, όσο και το βήμα 2 είναι αληθή.
Όλες οι τεχνολογίες που υποστηρίζουν αλληλεπιδραστική λειτουργία.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι οι χρήστες πληκτρολογίου δεν παγιδεύονται σε υποσύνολο του περιεχομένου, από το οποίο η έξοδος είναι δυνατή μόνο με χρήση ποντικιού ή συσκευής κατάδειξης. Ένα κοινό παράδειγμα είναι το περιεχόμενο που αποδίδεται από πρόσθετες εφαρμογές (plug-ins). Οι πρόσθετες λειτουργίες είναι πράκτορες χρήστη που αποδίδουν το περιεχόμενο εντός του κεντρικού παραθύρου του πράκτορα χρήστη και αποκρίνονται σε όλες τις ενέργειες του χρήστη που πραγματοποιούνται ενώ η επισήμανση βρίσκεται στην πρόσθετη εφαρμογή. Εάν η πρόσθετη εφαρμογή δεν παρέχει μηχανισμό πληκτρολογίου για επιστροφή της επισήμανσης στο γονικό παράθυρο, οι χρήστες που πρέπει να χρησιμοποιούν, μπορεί να παγιδευτούν στο περιεχόμενο της πρόσθετης λειτουργίας.
Αυτό το πρόβλημα μπορεί να αποφευχθεί με τη χρήση ενός από τους ακόλουθους μηχανισμούς για την παροχή στους χρήστες ενός τρόπου διαφυγής από το υποσύνολο του περιεχομένου:
Διασφάλιση ότι η λειτουργία πληκτρολογίου για προώθηση της επισήμανσης εντός περιεχομένου (κοινώς το πλήκτρο tab) εκτελεί έξοδο από το υποσύνολο του περιεχομένου αφού φτάσει στην τελική θέση πλοήγησης.
Παροχή λειτουργίας πληκτρολογίου για μετακίνηση της επισήμανσης εκτός του υποσυνόλου του περιεχομένου. Βεβαιωθείτε ότι έχετε τεκμηριώσει το χαρακτηριστικό με προσβάσιμο τρόπο εντός του υποσυνόλου.
Εάν η τεχνολογία που χρησιμοποιείται στο υποσύνολο του περιεχομένου παρέχει εγγενώς μια εντολή πληκτρολογίου "μετακίνηση σε γονικό", τεκμηριώστε την εντολή αυτή πριν ο χρήστης μπει στην πρόσθετη εφαρμογή, ώστε να γνωρίζει πώς θα βγει.
Εάν ο συγγραφέας χρησιμοποιεί μια τεχνολογία που επιτρέπει σε χρήστες να καταχωρούν υπο-περιεχόμενο από το πληκτρολόγιο και δεν επιτρέπει σε χρήστες την έξοδο του υπο-περιεχομένου από το πληκτρολόγιο εξ ορισμού (π.χ. δεν είναι χαρακτηριστικό τεχνολογίας περιεχομένου Ιστού ή των πρακτόρων χρήστη αυτής), τότε προκειμένου αυτή η τεχνική να υλοποιηθεί, ο συγγραφέας θα πρέπει είτε να δημιουργήσει μια τέτοια δυνατότητα μέσα στο περιεχόμενό του ή να μην κάνει χρήση της τεχνολογίας.
Μόλις ένας χρήστης μετακινηθεί με το πλήκτρο tab σε ένα applet, το applet διαχειρίζεται τα επιπλέον πατήματα του tab αποτρέποντας το άτομο από το να βγει μέσω του πλήκτρου tab. Ωστόσο, το applet είναι σχεδιασμένο έτσι ώστε να επιστρέφει την επισήμανση πληκτρολογίου πίσω στο γονικό παράθυρο όταν το άτομο τελειώσει την μετακίνηση στην ακολουθία tab μέσα στο applet.
Μια σελίδα που περιλαμβάνει περιεχόμενο που δεν έχει υποστήριξη προσβασιμότητας, περιέχει οδηγίες για τον τρόπο επιστροφής της επισήμανσης στο περιεχόμενο με υποστήριξη προσβασιμότητας μέσω του πληκτρολογίου. Οι οδηγίες προηγούνται του περιεχομένου χωρίς υποστήριξη προσβασιμότητας.
Οι πληροφορίες βοήθειας που διατίθενται από το περιεχόμενο και δεν διαθέτουν υποστήριξης προσβασιμότητας τεκμηριώνουν τον τρόπο επιστροφής της επισήμανσης στο περιεχόμενο υποστήριξης προσβασιμότητας μέσω πληκτρολογίου και οι πληροφορίες βοήθειας μπορούν να είναι προσβάσιμες μέσω του πληκτρολογίου.
Οι πληροφορίες βοήθειας που διατίθενται για την Ιστοσελίδα τεκμηριώνουν τον τρόπο μεταφοράς της επισήμανσης από το περιεχόμενο που δεν διαθέτει υποστήριξη προσβασιμότητας στο περιεχόμενο που διαθέτει υποστήριξη προσβασιμότητας μέσω πληκτρολογίου και οι πληροφορίες βοήθειας μπορούν να είναι προσβάσιμες μέσω του πληκτρολογίου.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
μετακινηθείτε μέσα στο περιεχόμενο με το πλήκτρο tab από την αρχή μέχρι το τέλος.
ελέγξτε εάν η επισήμανση πληκτρολογίου είναι παγιδευμένη σε κάποιο σημείο του περιεχομένου, με τρόπο που το άτομο δεν μπορεί να βγει από οποιοδήποτε μέρος του περιεχομένου και να συνεχίσει στο υπόλοιπο.
Το #2 είναι ψευδές
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Το JAWS 5.0 και νεότερα περιλαμβάνουν τις ακόλουθες πληκτρολογήσεις:
alt+leftArrow: ανάγνωση προηγούμενης πρότασης
alt+rightArrow: ανάγνωση επόμενης πρότασης
alt+NumPad 5: ανάγνωση τρέχουσας πρότασης
Ctrl+NumPad5: ανάγνωση τρέχουσας παραγράφου
Το Window-Eyes 5.5 έχει ειδικές συντομεύσεις (hotkeys) για την ανάγνωση της τρέχουσας πρότασης και της τρέχουσας παραγράφου.
Για περιήγηση στο διαδίκτυο με το WindowEyes, πρέπει να βρίσκεστε σε κατάσταση περιήγησης. Τα ειδικά πλήκτρα τρέχουσας πρότασης και τρέχουσας παραγράφου δεν λειτουργούν στην κατάσταση περιήγησης στην έκδοση 6.1.
Οι προεπιλεγμένες εργοστασιακές ρυθμίσεις για την ανάγνωση του περιβάλλοντος του συνδέσμου, έχουν ως εξής:
Ρυθμίσεις επιφάνειας εργασίας:
Χαρακτήρας = CTRL-NUMPAD-LEFT ARROW
Λέξη = CTRL-NUMPAD-RIGHT ARROW
Γραμμή = CTRL-NUMPAD-CENTER
Πρόταση = Μη διαθέσιμο στην κατάσταση περιήγησης
(Η εντολή "Επόμενη πρόταση" δεν ορίζεται εξ ορισμού στην κατάσταση επιφάνειας εργασίας, αλλά η επόμενη γραμμή είναι το κάτω (DOWN) βέλος.)
Επόμενη παράγραφος = P
Προηγούμενη παράγραφος = Shift P
Τρέχουσα παράγραφος = Μη διαθέσιμο στην κατάσταση περιήγησης
Φορητός υπολογιστής
Χαρακτήρας = ALT-SHIFT-LESS THAN
Προηγούμενη λέξη = ALT-SHIFT-J
Λέξη = ALT-SHIFT-K
Επόμενη λέξη= ALT-SHIFT-L
Προηγούμενη πρόταση = ALT-SHIFT-7
Πρόταση = μη διαθέσιμο στην κατάσταση περιήγησης
Επόμενη πρόταση = μη διαθέσιμο στην κατάσταση περιήγησης
Παράγραφος = δεν ορίζεται σε φορητό υπολογιστή εξ ορισμού
Προηγούμενη γραμμή = ALT-SHIFT-U
Γραμμή = ALT-SHIFT-I
Επόμενη γραμμή = ALT-SHIFT-O
Σκοπός αυτής της τεχνικής είναι να προσδιορίσει τον σκοπό ενός συνδέσμου από τον σύνδεσμο και το περιβάλλον της πρότασής του. Η πρόταση που περικλείει τον σύνδεσμο παρέχει περιβάλλον για έναν κατά τα άλλα ασαφή σύνδεσμο. Η περιγραφή επιτρέπει στον χρήστη να διακρίνει αυτό το σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο. Να σημειωθεί ότι η απλή παροχή του URI του προορισμού δεν είναι γενικώς επαρκώς περιγραφική.
Σημείωση: Αυτές οι περιγραφές θα είναι περισσότερο χρήσιμες στον χρήστη εάν οι πρόσθετες πληροφορίες που απαιτούνται για την κατανόηση του συνδέσμου, προηγούνται του συνδέσμου. Εάν οι πρόσθετες πληροφορίες ακολουθούν τον σύνδεσμο, μπορεί να υπάρξει σύγχυση και δυσκολία για τους χρήστες του προγράμματος ανάγνωσης οθόνης που διαβάζουν τη σελίδα με τη σειρά (από επάνω προς τα κάτω).
Μια Ιστοσελίδα περιέχει την πρόταση "Για διαφήμιση στη σελίδα αυτή, κάντε κλικ εδώ (click here)."
Αν και η φράση-σύνδεσμος "κάντε κλικ εδώ" δεν είναι επαρκής για την κατανόηση του συνδέσμου, οι απαιτούμενες πληροφορίες προηγούνται του συνδέσμου στην ίδια πρόταση.
Μια Ιστοσελίδα περιέχει την πρόταση "Οι πρώτοι άποικοι ήρθαν στην Αμερική με το καράβι Mayflower."
Στη σύνοψη νέων που περιέχει την πρόταση "Η Smallville Times αναφέρει ότι (reports that) η σχολική επιτροπή επέλεξε ένα σχολικό ημερολόγιο για το 2007 που αρχίζει στις 27 Αυγούστου.", οι λέξεις "αναφέρει ότι" αποτελούν έναν σύνδεσμο σε ένα άρθρο στην εφημερίδα Smallville Times σχετικά με τη συνέλευση της σχολικής επιτροπής.
Σημείωση: Αν και αυτό το παράδειγμα ικανοποιεί το κριτήριο επιτυχίας, η τοποθέτηση απαιτούμενων πληροφοριών για την κατανόηση του συνδέσμου μετά τον σύνδεσμο κατ' αυτόν τον τρόπο είναι περίεργη για όσους διαβάζουν το κείμενο με ένα πρόγραμμα ανάγνωσης οθόνης.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Ελέγξτε ότι ο σύνδεσμος είναι μέρος μιας πρότασης
Ελέγξτε ότι το κείμενο του συνδέσμου μαζί με το κείμενο της εσωκλείουσας πρότασης, περιγράφει τον σκοπό του συνδέσμου
Οι παραπάνω έλεγχοι είναι αληθείς.
Εφαρμόζεται σε όλες τις τεχνολογίες που παρουσιάζουν πληροφορίες συγχρονισμένων μέσων
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε χρήστες που δεν μπορούν να ακούσουν ή να διαβάσουν γρήγορα, την πρόσβαση σε υλικό συγχρονισμένων μέσων.
Για όσους επικοινωνούν κυρίως μέσω νοηματικής γλώσσας, μερικές φορές δεν είναι επιθυμητό και μερικές ούτε εφικτό να διαβάσουν και να καταλάβουν κείμενο με το ρυθμό που αυτό παρουσιάζεται σε επεξηγήσεις. Για τους τελευταίους, είναι σημαντική η παροχή παρουσίασης των ηχητικών πληροφοριών στη νοηματική γλώσσα.
Ένας καθολικά συμβατός τρόπος για αυτό είναι απλά η ενσωμάτωση βίντεο του διερμηνέα νοηματικής γλώσσας στη ροή βίντεο. Αυτός ο τρόπος έχει το μειονέκτημα της παροχής εικόνας χαμηλότερης ανάλυσης που δεν μεγεθύνεται εύκολα χωρίς παράλληλα μεγέθυνση όλης της εικόνας.
Σημείωση 1:Εάν η ροή βίντεο είναι πολύ μικρή, η παρουσία του διερμηνέα νοηματικής γλώσσας θα είναι περιορισμένη. Κατά τη δημιουργία μιας ροής βίντεο που περιλαμβάνει βίντεο ενός διερμηνέα νοηματικής γλώσσας, βεβαιωθείτε ότι υπάρχει μηχανισμός αναπαραγωγής της ροής βίντεο σε πλήρη οθόνη στην τεχνολογία περιεχομένου υποστήριξης προσβασιμότητας. Διαφορετικά, βεβαιωθείτε ότι το τμήμα διερμηνέα στο βίντεο είναι ρυθμιζόμενο ως προς το μέγεθος που θα είχε, εάν ολόκληρη η ροή βίντεο ήταν σε πλήρη οθόνη.
Σημείωση 2:Εφόσον η νοηματική γλώσσα δεν αποτελεί συνήθως μια έκδοση στη νοηματική της έντυπης γλώσσας, ο συγγραφέας πρέπει να αποφασίσει ποια νοηματική γλώσσα θα συμπεριλάβει. Συνήθως χρησιμοποιείται η νοηματική γλώσσα του πρωταρχικού κοινού. Εάν προορίζεται για πολλαπλά κοινά, μπορούν να χρησιμοποιηθούν πολλαπλές νοηματικές γλώσσες. Ανατρέξτε στις συμβουλευτικές τεχνικές για πολλαπλές νοηματικές γλώσσες.
Παράδειγμα 1: Τηλεοπτικός σταθμός παρέχει διερμηνέα νοηματικής γλώσσας στη γωνία του ηλεκτρονικού δελτίου ειδήσεων σε βίντεο.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Οδηγίες για την παραγωγή βιβλίων νοηματικής
Η "Παρουσίαση της νοηματικής γλώσσας" ("Sign Language presentation") δίνει μια εκτεταμένη επισκόπηση των θεμάτων προς επεξεργασία κατά την κινηματογράφηση διερμηνέων νοηματικής γλώσσας. Περιλαμβάνει σχολιασμό της μεταφοράς γραπτών και προφορικών αρχικών κειμένων στη νοηματική γλώσσα
Τεχνικές κινηματογράφησης σχολιάζονται στο κεφάλαιο 12, "Κινηματογραφώντας του ομιλητές νοηματικής" (chapter 12, “Filming the Signer(s)”).
Χρήσιμες πληροφορίες για την απεικόνιση του διερμηνέα νοηματικής γλώσσας σε σχέση με το αρχικό περιεχόμενο συγχρονισμένων μέσων παρέχεται στο κεφάλαιο 13 "Επεξεργασία" (Chapter 13, "Editing")
Σημείωση: Αυτές οι τεχνικές ίσως πρέπει να προσαρμοστούν για παρουσιάσεις Ιστού.
Αναθέστε σε κάποιον με ακοή και εξοικείωση με τη χρησιμοποιούμενη νοηματική γλώσσα να παρακολουθήσει το πρόγραμμα
Ελέγξτε εάν υπάρχει διερμηνέας νοηματικής γλώσσας στην οθόνη.
Ελέγξτε ότι οι διάλογοι και σημαντικοί ήχοι μεταφέρονται από τον ορατό διερμηνέα στην οθόνη.
Τα #2 και #3 είναι αληθή
Όλες οι τεχνολογίες που περιλαμβάνουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστεί ο ορισμός μιας λέξης, φράσης ή σύντμησης διαθέσιμος μέσω της παροχής του ορισμού είτε εντός της ίδιας Ιστοσελίδας, είτε σε διαφορετική Ιστοσελίδα και δημιουργώντας έναν σύνδεσμο μεταξύ του στοιχείου και του ορισμού του.
Οι σύνδεσμοι αποτελούν μια δραστική επιλογή για την παροχή πρόσβασης στον ορισμό της λέξης, φράσης ή σύντμησης. Ένας χρήστης μπορεί να χρησιμοποιήσει τον ορισμό γρήγορα και εύκολα, και στη συνέχεια να επιστρέψει στη θέση του στο περιεχόμενο μέσω του κουμπιού "Πίσω" του πράκτορα χρήστη.
Τεχνικοί όροι και συντμήσεις σε άρθρο για αθλητικούς τραυματισμούς συνδέονται με ορισμούς σε ιατρικό λεξικό.
Ένα εγχειρίδιο περιέχει ένα γλωσσάρι με τις νέες λέξεις που εμφανίζονται σε κάθε κεφάλαιο. Η πρώτη εμφάνιση κάθε μίας από αυτές τις λέξεις συνδέεται με τον ορισμό της στο γλωσσάρι.
Παρέχεται ένα γενικό γλωσσάρι συντμήσεων. Όλες οι εμφανίσεις συντμήσεων συνδέονται απευθείας με τον κατάλληλο ορισμό στο γλωσσάρι.
Η λέξη τεχνική γλώσσα (jargon) συνδέεται στον ορισμό της στο γλωσσάρι του WCAG2.
Η λέξη "modulo" είναι τεχνική γλώσσα που χρησιμοποιείται σε περιεχόμενο Ιστού για μαθηματικούς. Περιλαμβάνεται ορισμός της λέξης "modulo" στην Ιστοσελίδα. Κάθε εμφάνιση της λέξης "modulo" συνδέεται με τον ορισμό της.
Ένας ιαπωνικός ιδιωματισμός συνδέεται με τον ορισμό του. Αυτό το παράδειγμα χρησιμοποιεί έναν σύνδεσμο εντός της σελίδας για μετάβαση στον ορισμό της ιδιωματικής έκφρασης.
Παράδειγμα κώδικα:
<p>....<a href="#definition">ã•ã˜ã‚’投ã’ã‚‹</a>....</p>
<h3>脚注:</h3>
<dl>
<dt id="definition" name="definition">ã•ã˜ã‚’投ã’ã‚‹</dt>
<dd>ã©ã†ã™ã‚‹ã“ã¨ã‚‚ã§ããªããªã‚Šã€ã‚ãらã‚ã‚‹ã“ã¨ã€‚</dd>
</dl>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη, φράση ή σύντμηση προς απόδοση ορισμού:
Ελέγξτε ότι τουλάχιστον η πρώτη εμφάνιση του στοιχείου είναι σύνδεσμος.
Ελέγξτε ότι κάθε σύνδεσμος μεταβαίνει στον ορισμό του στοιχείου.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Κάθε τεχνολογία
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στους συγγραφείς να συμπεριλάβουν ήχο πίσω από ομιλία χωρίς να δυσκολεύουν υπερβολικά τα άτομα με προβλήματα ακοής για την κατανόηση της ομιλίας. Η επιβεβαίωση ότι η ομιλία στο προσκήνιο είναι 20 db πιο δυνατή από τον ήχο παρασκηνίου, κάνει την ομιλία 4 φορές πιο δυνατή από τον ήχο παρασκηνίου Για πληροφορίες σχετικά με τα ντεσιμπέλ (dB), ανατρέξτε στην ενότητα "Σχετικά με τα decibel" (About Decibels).
Ο αφηγητής περιγράφει μια σκηνή συγκρούσεων. Η ένταση του ήχου της σκηνής των συγκρούσεων προσαρμόζεται ώστε να είναι 20 db χαμηλότερα από την ένταση του ήχου του εκφωνητή πριν γίνει η μίξη της σκηνής με τον αφηγητή.
Αυτό το παράδειγμα επιδεικνύει μια φωνή με μουσική στο παρασκήνιο, όπου η φωνή είναι κατά 20 DB πιο δυνατή από το παρασκήνιο. Η φωνή (προσκήνιο) καταγράφεται στα -17,52 ντεσιμπέλ (μέσο RMS) και η μουσική (παρασκήνιο) στα -37,52 ντεσιμπέλ, με αποτέλεσμα το προσκήνιο να είναι κατά 20 ντεσιμπέλ πιο δυνατό από το παρασκήνιο.
Μεταγραφή του ηχητικού παραδείγματος (ικανοποιητική αντίθεση):
"Συνήθως το προσκήνιο αναφέρεται σε μια φωνή που μιλά και θα πρέπει να είναι κατανοητή. Η φωνή ομιλίας μου τώρα είναι κατά 20 ντεσιμπέλ ισχυρότερη του παρασκηνίου, που είναι μουσική. Αυτό είναι ένα παράδειγμα του τρόπου με τον οποίο θα πρέπει να γίνει."
Το παραπάνω ηχητικό παράδειγμα απεικονίζεται παρακάτω σε ένα στιγμιότυπο του αρχείου στο πρόγραμμα επεξεργασίας ήχου. Επισημαίνεται ένα τμήμα που περιέχει προσκήνιο και παρασκήνιο. Είναι μία αρκετά μεγαλύτερη κυματομορφή από το τμήμα που περιέχει μόνο παρασκήνιο.
Αυτό το παράδειγμα επιδεικνύει μια φωνή με μουσική στο παρασκήνιο, όπου η φωνή είναι κατά 20 DB πιο δυνατή από το παρασκήνιο. Η φωνή (προσκήνιο) καταγράφεται στα -18 ντεσιμπέλ και η μουσική (παρασκήνιο) στα -16 ντεσιμπέλ περίπου, με αποτέλεσμα το προσκήνιο να είναι κατά 2 ντεσιμπέλ πιο δυνατό από το παρασκήνιο.
Μεταγραφή του ηχητικού παραδείγματος (μη ικανοποιητική αντίθεση):
"Αυτό είναι ένα παράδειγμα μιας φωνής που δεν είναι αρκετά δυνατή σε σχέση με το παρασκήνιο. Η φωνή η οποία είναι το προσκήνιο, είναι μόλις 2 ντεσιμπέλ περίπου ισχυρότερη του παρασκηνίου. Επομένως, είναι δύσκολη η κατανόηση για ένα άτομο με βαρηκοΐα. Είναι δύσκολο να διακριθεί μία λέξη από την επόμενη. Αυτό είναι ένα παράδειγμα για το τι πρέπει να αποφύγετε."
Το επισημασμένο τμήμα περιέχει προσκήνιο και παρασκήνιο. Η κυματομορφή είναι περίπου του ίδιου μεγέθους με το τμήμα που περιέχει μόνο παρασκήνιο, το οποίο σημαίνει ότι το παρασκήνιο είναι πολύ ισχυρό σε σύγκριση με τη φωνή προσκηνίου.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Σχετικά με τα ντεσιμπέλ (About Decibels) του Gregg Vanderheiden
Πρόγραμμα εκμάθησης δημιουργίας / αντίθεσης ήχου (Audio creation / contrast tutorial)
Εντοπίστε υψηλές τιμές περιεχομένου παρασκηνίου μεταξύ της ομιλίας προσκηνίου
Μέτρηση της έντασης ήχου σε dB(A) SPL
Μέτρηση της έντασης ήχου της ομιλίας προσκηνίου σε dB(A) SPL
Αφαίρεση των τιμών
Ελέγξτε ότι το αποτέλεσμα είναι 20 ή μεγαλύτερο.
Το #5 είναι αληθές
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι η σειρά του περιεχομένου που παρουσιάζεται στις υποστηρικτικές τεχνολογίες επιτρέπει στον χρήστη να το καταλάβει. Μερικές τεχνικές επιτρέπουν την οπτική απόδοση του περιεχομένου σε μια ακολουθία με νόημα ακόμα και αν η υποκείμενη σειρά του περιεχομένου προκαλεί σύγχυση.
Για παράδειγμα, όταν αναμειγνύονται γλώσσες διαφορετικής κατευθυντικότητας σε HTML, ο αλγόριθμος διπλής κατεύθυνσης τοποθετεί τη στίξη σε λάθος σημείο. Το περιεχόμενο με σωστή σειρά διατηρεί τη στίξη στο σωστό σημείο της ροής του περιεχομένου και χρησιμοποιεί την επισημείωση για να παρακάμψει τον αλγόριθμο διπλής κατεύθυνσης, αντί της μετακίνησης της στίξης στη ροή του περιεχομένου, με αποτέλεσμα η προεπιλεγμένη απόδοση να την τοποθετεί σωστά.
Όταν αποδίδονται οπτικά, οι χαρακτήρες λευκού διαστήματος, όπως οι διάστημα ή στηλοθέτης, ίσως δεν εμφανίζονται ως μέρος του περιεχομένου. Ωστόσο, όταν εισάγονται στο περιεχόμενο για τον έλεγχο της οπτικής μορφοποίησης, μπορεί να παρεμβληθούν στο νόημα του περιεχομένου.
Σε μεγαλύτερο βαθμό ευαισθησίας, ο έλεγχος της τοποθέτησης των μπλοκ περιεχομένου σε έγγραφο HTML χρησιμοποιώντας πίνακες διάταξης μπορεί να επιφέρει απόδοση στην οποία οι σχετικές πληροφορίες τοποθετούνται μαζί οπτικά, αλλά διακρίνονται στη ροή του περιεχομένου. Εφόσον οι πίνακες διάταξης διαβάζονται γραμμή-γραμμή, εάν η επεξήγηση ενός σχεδίου τοποθετείται στη γραμμή που ακολουθεί το σχέδιο, ίσως να είναι αδύνατη η συσχέτιση της επεξήγησης με την εικόνα.
Μια ιστοσελίδα από έκθεση μουσείου έχει μια γραμμή πλοήγησης που περιέχει μια μεγάλη λίστα συνδέσεων. Η σελίδα περιέχει επίσης την εικόνα ενός πίνακα της έκθεσης, επικεφαλίδα του πίνακα και λεπτομερή περιγραφή του πίνακα. Οι σύνδεσμοι στη γραμμή πλοήγησης σχηματίζουν μια ακολουθία με νόημα. Η επικεφαλίδα, η εικόνα και το κείμενο της περιγραφής σχηματίζουν επίσης μια ακολουθία με νόημα. Το CSS χρησιμοποιείται για την τοποθέτηση των στοιχείων στη σελίδα.
Παράδειγμα κώδικα:
Επισημείωση:
<h1>My Museum Page</h1>
<ul id="nav">
<li><a href="#">Link 1</a></li>
...
<li><a href="#">Link 10</a></li>
</ul>
<div id="description">
<h2>Mona Lisa</h2>
<p>
<img src="img.png" alt="Mona Lisa">
</p>
<p>...detailed description of the picture...</p>
</div>
CSS:
ul#nav
{
float: left;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #063;
}
ul#nav a
{
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #063;
}
div#description
{
margin-left: 11em;
}
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Γραμμικοποίηση περιεχομένου χρησιμοποιώντας μια τυπική προσέγγιση για την τεχνολογία (π.χ. κατάργηση στυλ διάταξης ή λειτουργία εργαλείου γραμμικοποίησης)
Ελέγξτε να δείτε εάν η σειρά του περιεχομένου αποδίδει το ίδιο νόημα με την αρχική
Ελέγξτε ότι το #2 είναι αληθές.
Αυτή η τεχνική δεν είναι συγκεκριμένης τεχνολογίας και μπορεί να χρησιμοποιηθεί σε κάθε τεχνολογία υποστηρίζει συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Με αυτή την τεχνική, παρέχεται σύνδεσμος προς το ταξινομημένο έγγραφο των επεξηγήσεων και της ηχητικής περιγραφής. Το ταξινομημένο έγγραφο θα βρίσκεται σε άλλη θέση στην ίδια Ιστοσελίδα ή σε άλλο URI. Ακριβώς δίπλα στο μη κειμενικό περιεχόμενο, υπάρχει σύνδεσμος προς το ταξινομημένο έγγραφο. Ο σύνδεσμος μπορεί να βρίσκεται ακριβώς πριν ή μετά το περιεχόμενο συγχρονισμένων μέσων. Εάν το ταξινομημένο έγγραφο βρίσκεται στην ίδια Ιστοσελίδα με το υπόλοιπο περιεχόμενο, τοποθετήστε την ένδειξη "Τέλος εγγράφου" στο τέλος, ώστε οι χρήστες να καταλάβουν το σημείο που πρέπει να διακοπεί η ανάγνωση και να επιστρέψουν στο προηγούμενο σημείο. Εάν το κουμπί "Πίσω" δεν επιστρέψει το άτομο πίσω στο σημείο από το οποίο προήλθε, τότε παρέχεται σύνδεσμος επιστροφής στο μη κειμενικό περιεχόμενο.
Κώδικας σε σελίδα με όνομα "Olympic_Sports.htm"
Παράδειγμα κώδικα:
<a name="Olympic_Wrestling"></a>
<p><a href="http://www.example.com/movies/olympic_wrestling.mov">Olympic Wrestling movie</a>,
<a href="http://www.example.com/transcripts/olympic_wrestling_transcript.htm>Olympic
Wrestling collated Transcript</a></p>
Κώδικας στη σελίδα olympic_wrestling_transcript.htm
Παράδειγμα κώδικα:
<p>Sports announcer 1: This is a great battle tonight between England's "Will Johnson" and
"Theodore Derringo" from Argentina</p>
<p>Scenery: There is a mat set out in the middle of the stadium with 500 people in the
stands...</p>
<p> ...more dialogue ...<p>
<p> ...more scenery...</p>
<p> ...etc...</p>
<p>Sports announcer 2: And that is all for tonight, thank you for joining us tonight where
Will Johnson is the new Gold Medalist.
<a href="../movies/Olympic_Sports.htm#Olympic_Wrestling>Return to Movie page</a> </p>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε εάν υπάρχει σύνδεσμος ακριβώς πριν ή μετά το μη κειμενικό περιεχόμενο
Ελέγξτε ότι πρόκειται για έγκυρο σύνδεσμο που παραπέμπει απευθείας στο ταξινομημένο έγγραφο των συγκεκριμένων συγχρονισμένων μέσων.
Ελέγξτε για τη διαθεσιμότητα συνδέσμου ή λειτουργίας επιστροφής για τον χρήστη προς την αρχική θέση του περιεχομένου συγχρονισμένων μέσων
Τα στοιχεία από #1 έως 3 είναι όλα αληθή.
Όλες οι τεχνολογίες που περιέχουν αλληλεπιδραστικά στοιχεία και καθορίζουν μια προεπιλεγμένη σειρά στηλοθέτησης για αλληλεπιδραστικά στοιχεία.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι τα αλληλεπιδραστικά στοιχεία επισημαίνονται με σειρά που συμφωνεί με τις ακολουθίες και σχέσεις στο περιεχόμενο Κατά τη σχεδίαση του περιεχομένου, τα αλληλεπιδραστικά στοιχεία, όπως σύνδεσμοι και στοιχεία ελέγχου φόρμας, τοποθετούνται στο περιεχόμενο, έτσι ώστε η σειρά στηλοθέτησης να συμφωνεί με τις ακολουθίες και τις σχέσεις στο περιεχόμενο. Κάθε τεχνολογία καθορίζει την προεπιλεγμένη σειρά στηλοθέτησης, άρα ο μηχανισμός τοποθέτησης των στοιχείων ελέγχου στο περιεχόμενο θα εξαρτάται από τη χρησιμοποιούμενη τεχνολογία.
Για παράδειγμα, σε HTML, η προεπιλεγμένη σειρά επισήμανσης ακολουθεί τη σειρά με την οποία εμφανίζονται τα στοιχεία στον κώδικα του περιεχομένου. Όταν η σειρά του κώδικα HTML ταιριάζει με την οπτική σειρά στην Ιστοσελίδα, η μετακίνηση με το πλήκτρο tab στο περιεχόμενο ακολουθεί την οπτική διάταξη του περιεχομένου. Όταν η σειρά του πηγαίου κώδικα δεν ταιριάζει με την οπτική, η σειρά στηλοθέτησης του περιεχομένου πρέπει να αντανακλά τις λογικές σχέσεις στο περιεχόμενο που εμφανίζεται οπτικά.
Μια φόρμα περιέχει δύο πεδία εισαγωγής κειμένου που πρέπει να συμπληρωθούν στη σειρά. Το πρώτο πεδίο εισαγωγής κειμένου τοποθετείται πρώτο στο περιεχόμενο, το δεύτερο πεδίο τοποθετείται δεύτερο.
Μια φόρμα περιέχει δύο, παρακείμενες ενότητες πληροφοριών. Η μία ενότητα περιέχει πληροφορίες σχετικά με έναν αιτούντα. Η άλλη ενότητα περιέχει πληροφορίες για τον/τη σύζυγο του αιτούντα. Όλα τα αλληλεπιδραστικά στοιχεία στην ενότητα του αιτούντα επισημαίνονται πριν από οποιοδήποτε στοιχείο στην ενότητα συζύγου. Τα στοιχεία σε κάθε ενότητα επισημαίνονται στη σειρά ανάγνωσης αυτής της ενότητας.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Καθορίστε τη σειρά των αλληλεπιδραστικών στοιχείων στο περιεχόμενο.
Καθορίστε τη λογική σειρά των αλληλεπιδραστικών στοιχείων.
Ελέγξτε ότι η σειρά των αλληλεπιδραστικών στοιχείων στο περιεχόμενο είναι ίδια με τη λογική σειρά.
Ελέγξτε ότι το #3 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες εκτός από την αλληλεπίδραση φωνής.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε συγγραφείς να αναπαράγουν έναν ήχο στην Ιστοσελίδα τους, αλλά να αποφύγουν το πρόβλημα με χρήστες που δεν είναι σε θέση να χρησιμοποιήσουν την εφαρμογή ανάγνωσης οθόνης λόγω παρεμβολών από τον ήχου του περιεχομένου. Επιτρέπει επίσης στον συγγραφέα να αποφύγει να τοποθετήσει στοιχεία ελέγχου στην Ιστοσελίδα για να ελέγχει τον ήχο - και το πρόβλημα που αντιμετωπίζουν οι χρήστες με εφαρμογές ανάγνωσης οθόνης κατά την εύρεση του στοιχείου ελέγχου (όταν δεν είναι σε θέση να ακούσουν τη δική τους εφαρμογή ανάγνωσης οθόνης).
Η τεχνική είναι απλή. Ο ήχος αναπαράγεται για 3 δευτερόλεπτα ή λιγότερο και διακόπτεται αυτόματα.
Παράδειγμα 1: Μια Ιστοσελίδα ανοίγει με ένα σάλπισμα τρομπέτας και στη συνέχεια σιωπά
Παράδειγμα 2: Μια αρχική σελίδα ανοίγει με τον πρόεδρο να λέει "Binfor, εκεί όπου η ποιότητα είναι η δουλειά μας." και στη συνέχεια σιωπά.
Παράδειγμα 3: Μια Ιστοσελίδα ανοίγει με οδηγίες για τον τρόπο εκκίνησης: "Για να αρχίσετε, πατήστε το πλήκτρο enter."
Παράδειγμα 4: Μια Ιστοσελίδα ανοίγει με μια προειδοποίηση και στη συνέχεια σιωπά
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία)
Φορτώστε την Ιστοσελίδα
Ελέγξτε ότι όλοι οι ήχοι που αναπαράγονται αυτόματα διακόπτονται εντός 3 δευτερολέπτων ή λιγότερο
Το #2 είναι αληθές
Κάθε τεχνολογία.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να κάνει το περιεχόμενο πιο εύκολο στη χρήση με την πιο προβλέψιμη τοποθέτηση των επαναλαμβανόμενων συστατικών στοιχείων. Αυτή η τεχνική βοηθά στη διατήρηση συνεκτικής διάταξης ή παρουσίασης μεταξύ Ιστοσελίδων με την παρουσίαση συστατικών στοιχείων που επαναλαμβάνονται σε αυτές τις μονάδες Ιστού με την ίδια σχετική σειρά κάθε φορά που εμφανίζονται. Είναι δυνατή η εισαγωγή άλλων συστατικών στοιχείων ανάμεσά τους, αλλά η σχετική σειρά τους δεν αλλάζει.
Αυτή η τεχνική εφαρμόζεται επίσης σε συστατικά στοιχεία πλοήγησης που επαναλαμβάνονται. Οι Ιστοσελίδες συχνά περιέχουν ένα μενού πλοήγησης ή άλλο συστατικό στοιχείο πλοήγησης που επιτρέπει στον χρήστη να μεταπηδήσει σε άλλες Ιστοσελίδες. Αυτή η τεχνική κάνει την τοποθέτηση συστατικών στοιχείων πλοήγησης πιο προβλέψιμη με την παρουσίαση των συνδέσμων ή των παραπομπών μέσω προγραμματισμού εντός ενός συστατικού στοιχείου πλοήγησης με την ίδια σχετική σειρά κάθε φορά που το συστατικό στοιχείο πλοήγησης επαναλαμβάνεται. Είναι δυνατή η αφαίρεση ή η εισαγωγή άλλων συνδέσμων ανάμεσα στους υπάρχοντες, για παράδειγμα, για να επιτραπεί η πλοήγηση μέσα σε υποενότητα ενός συνόλου Ιστοσελίδων, αλλά η σχετική σειρά δεν αλλάζει.
Ένας ιστότοπος έχει λογότυπο, τίτλο, φόρμα αναζήτησης και γραμμή πλοήγησης στην κορυφή της σελίδας. Τα στοιχεία αυτά εμφανίζονται με την ίδια σχετική σειρά σε κάθε σελίδα στην οποία επαναλαμβάνονται. Σε μία σελίδα λείπει η φόρμα αναζήτησης αλλά τα άλλα στοιχεία βρίσκονται στην ίδια σειρά.
Ένας ιστότοπος έχει μενού πλοήγησης στα αριστερά με συνδέσμους προς τις κύριες ενότητες του τόπου. Όταν ο χρήστης ακολουθήσει έναν σύνδεσμο σε μια άλλη ενότητα του τόπου, οι σύνδεσμοι προς τις κύριες ενότητες εμφανίζονται με την ίδια σχετική σειρά στην επόμενη σελίδα. Μερικές φορές, σύνδεσμοι αφαιρούνται και άλλοι προστίθενται, αλλά οι άλλοι σύνδεσμοι έχουν πάντα την ίδια σχετική σειρά. Για παράδειγμα, σε μια ιστοσελίδα εταιρείας που πουλά προϊόντα και παρέχει εκπαίδευση, όταν ο χρήστης μετακινηθεί από την ενότητα των προϊόντων στην ενότητα της εκπαίδευσης, οι σύνδεσμοι για κάθε προϊόν αφαιρούνται από τη λίστα πλοήγησης και προστίθενται οι σύνδεσμοι για τις προσφορές εκπαίδευσης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Δημιουργήστε λίστα των συστατικών στοιχείων που επαναλαμβάνονται σε κάθε Ιστοσελίδα ενός συνόλου Ιστοσελίδων (για παράδειγμα, σε κάθε σελίδα ενός ιστότοπου).
Ελέγξτε ότι κάθε συστατικό στοιχείο εμφανίζεται με την ίδια σχετική σειρά ως προς τα άλλα επαναλαμβανόμενα συστατικά στοιχεία σε κάθε Ιστοσελίδα όπου εμφανίζεται.
Για κάθε συστατικό στοιχείο πλοήγησης, ελέγξτε ότι οι σύνδεσμοι ή οι παραπομπές μέσω προγραμματισμού βρίσκονται πάντα στην ίδια σχετική σειρά.
Το #2 είναι αληθές.
Το #3 είναι αληθές.
Κάθε τεχνολογία που περιέχει κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει διαθέσιμο τον ορισμό μιας λέξης, φράσης ή σύντμησης μέσω της παροχής του ορισμού σε γλωσσάρι. Το γλωσσάρι είναι μια αλφαβητική λίστα των λέξεων, φράσεων και συντμήσεων με τους ορισμούς τους. Τα γλωσσάρια είναι πιο κατάλληλα όταν οι λέξεις, φράσεις και συντμήσεις που χρησιμοποιούνται στο περιεχόμενο σχετίζονται με έναν συγκεκριμένο επιστημονικό ή τεχνολογικό χώρο. 'Ενα γλωσσάρι μπορεί επίσης να παρέχει την προφορά μιας λέξης ή φράσης.
Το γλωσσάρι περιλαμβάνεται στο τέλος της Ιστοσελίδας ή εντοπίζεται μέσω ενός από τους μηχανισμούς εντοπισμού περιεχομένου εντός συνόλου Ιστοσελίδων. (Δείτε την Κατανόηση Κριτηρίου Επιτυχίας 2.4.5 (Understanding Success Criterion 2.4.5.)
Εάν το γλωσσάρι περιέχει αρκετούς ορισμούς της ίδιας λέξης, φράσης ή σύντμησης, η απλή παροχή του γλωσσάριου δεν αρκεί για την ικανοποίηση του Κριτηρίου Επιτυχίας. Πρέπει να χρησιμοποιηθεί διαφορετική τεχνική για την εύρεση του σωστού ορισμού. Αυτό είναι ιδιαίτερα σημαντικό εάν οι χρήσεις της λέξης, φράσεις ή σύντμησης δεν είναι μοναδικές εντός της Ιστοσελίδας, δηλαδή, εάν οι διαφορετικές εμφανίσεις του στοιχείου έχουν διαφορετικούς ορισμούς.
Οι χρήστες των ηλεκτρονικών forum συζητήσεων έχουν δημιουργήσει αρκετά ακρωνύμια και συντμήσεις για την επιτάχυνση της δακτυλογράφησης συζητήσεων στον υπολογιστή. Για παράδειγμα, το LOL σημαίνει "laughing out loud" (δυνατό γέλιο) και το FWIW είναι η σύντμηση της έκφρασης "for what it's worth" (για ό,τι αξίζει). Ο τόπος παρέχει μια σελίδα από γλωσσάρι που περιέχει μια λίστα με τα αναπτύγματα των πιο κοινών ακρωνυμίων και συντμήσεων.
Μια Ιστοσελίδα που αφορά μαθηματικές θεωρίες περιλαμβάνει ένα γλωσσάρι κοινών μαθηματικών όρων, συντμήσεων και ακρωνυμίων.
Ένα εγχειρίδιο περιέχει ένα γλωσσάρι με τις νέες λέξεις που εμφανίζονται σε κάθε κεφάλαιο.
Το ολλανδικό κείμενο χρησιμοποιεί τη φράση 'Hij ging met de kippen op stok' (Πήγε να κοιμηθεί με τις κότες). Το γλωσσάρι εξηγεί ότι αυτή η φράση σημαίνει 'Hij ging vroeg naar bed' (Έπεσε για ύπνο νωρίς).
Το αμερικάνικο μυθιστόρημα "Οι περιπέτειες του Χακ Φιν" περιλαμβάνει πολλές ιδιωματικές εκφράσεις που χρησιμοποιούνταν στις νοτιοδυτικές Ηνωμένες Πολιτείες τη δεκαετία του 1840. Σε μια ηλεκτρονική έκδοση για σπουδαστές, κάθε ιδιωματική έκφραση συνδέεται με ένα στοιχείο στο γλωσσάρι.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε ότι
Είτε το γλωσσάρι περιλαμβάνεται στη μονάδα Ιστού, είτε
Υπάρχει διαθέσιμος μηχανισμός για τον εντοπισμό του γλωσσάριου.
Ελέγξτε ότι κάθε λέξη, φράση ή σύντμηση που θα οριστεί, ορίζεται στο γλωσσάρι
Ελέγξτε ότι το γλωσσάρι περιέχει μόνο έναν ορισμό για κάθε στοιχείο.
Και οι τρεις παραπάνω έλεγχοι είναι αληθείς.
Σημείωση: Ο ορισμός συντμήσεων που χρησιμοποιούνται στο WCAG είναι: "σύντομη μορφή μιας λέξης, φράσης ή ονομασίας όπου το αρχικό ανάπτυγμα δεν απορρίφθηκε από τον οργανισμό στον οποίο αναφέρεται και όπου η σύντμηση δεν αποτελεί μέρος της γλώσσας."
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Αυτό είναι μέρος μιας σειράς τεχνικών για τον εντοπισμό περιεχομένου που είναι επαρκές για την αντιμετώπιση του Κριτηρίου Επιτυχίας 2.4.5. Ένας χάρτης ιστότοπου είναι μια Ιστοσελίδα που παρέχει συνδέσμους προς διαφορετικές ενότητες του ιστότοπου. Για να καταστήσετε διαθέσιμο τον χάρτη εντός του τόπου, τουλάχιστον κάθε σελίδα που περιέχεται στο χάρτη περιέχει σύνδεσμο προς τον χάρτη.
Ο χάρτης ιστότοπου εξυπηρετεί πολλούς σκοπούς.
Παρέχει επισκόπηση ολόκληρου ιστότοπου.
Βοηθά τους χρήστες να καταλάβουν τι περιέχει ο ιστότοπος και πώς είναι οργανωμένο το περιεχόμενο.
Προσφέρει μια εναλλακτική των περίπλοκων γραμμών πλοήγησης που μπορεί να διαφέρουν σε διαφορετικά μέρη του ιστότοπου.
Υπάρχουν διάφοροι τύποι χαρτών ιστότοπου. Ο πιο απλός και κοινός τύπος χάρτη είναι ένα σχεδιάγραμμα που δείχνει τους συνδέσμους προς κάθε ενότητα ή δευτερεύοντα τόπο. Αυτές οι προβολές σχεδιαγράμματος δεν δείχνουν τις πιο περίπλοκες σχέσεις εντός του ιστότοπου, όπως συνδέσμους μεταξύ σελίδων σε διαφορετικές ενότητες του τόπου. Οι χάρτες για μερικούς μεγάλους ιστότοπους χρησιμοποιούν επικεφαλίδες που επεκτείνονται για να εμφανίσουν πρόσθετες λεπτομέρειες σχετικά με κάθε ενότητα.
Ένας χάρτης ιστότοπου περιγράφει τα περιεχόμενα και την οργάνωση ενός ιστότοπου. Είναι σημαντικό να ενημερώνονται οι χάρτες όποτε ενημερώνεται ο ιστότοπος. Μια ιστοσελίδα που δεν συνδέεται με όλες τις ενότητες ενός ιστότοπου, ο οποίος παρουσιάζει οργάνωση διαφορετική από αυτή του ιστότοπου ή περιέχει συνδέσμους που δεν ισχύουν πλέον, δεν αποτελεί έγκυρο χάρτη ιστότοπου.
Η WAI (Πρωτοβουλία για την προσβασιμότητα στον Ιστό) παρέχει έναν χάρτη του ιστότoπού της (WAI site map), όπου εμφανίζεται μια λίστα με τις διαφορετικές ενότητες του ιστότοπου. Ο χάρτης εμφανίζει διαφορετικές ενότητες του ιστότοπου και μερικές από τις υποδομές εντός των ενοτήτων αυτών.
Ο χάρτης ιστότοπου για ένα ηλεκτρονικό περιοδικό εμφανίζει μια λίστα με όλες τις ενότητες του περιοδικού και τις υποενότητες σε κάθε ενότητα. Περιλαμβάνει επίσης τους εξής συνδέσμους: "Βοήθεια", "Επικοινωνία μαζί μας", "Πολιτική απορρήτου", "Ευκαιρίες εργασίας", "Συνδρομή" και σύνδεσμο για την αρχική σελίδα του περιοδικού.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Η σελίδα για τους γραφικούς οργανωτές (Graphic Organizers) στο Εθνικό Κέντρο Προσβάσιμου Προγράμματος (National Center for Accessible Curriculum) παρέχει μια χρήσιμη επισκόπηση των διαφορετικών ειδών γραφικών βοηθημάτων και των χρήσεών τους, συν μια περίληψη σχετικής έρευνας για την αποτελεσματικότητα των γραφικών βοηθημάτων για σπουδαστές με μαθησιακές δυσκολίες.
Γλωσσάρι χρηστικότητας: Χάρτης ιστότοπου (Usability Glossary: sitemap)
Ελέγξτε ότι ο ιστότοπος περιέχει χάρτη ιστότοπου.
Ελέγξτε ότι οι σύνδεσμοι στον χάρτη ιστότοπου οδηγούν στις αντίστοιχες ενότητες του ιστότοπου.
Για κάθε σύνδεσμο στον χάρτη ιστότοπου, ελέγξτε ότι η σελίδα στόχου περιέχει σύνδεσμο προς τον χάρτη ιστότοπου.
Για κάθε σελίδα στον ιστότοπο, ελέγξτε ότι η σελίδα μπορεί να προσπελαστεί επιλέγοντας μερικά σύνολα συνδέσμων που ξεκινούν από τον χάρτη του ιστότοπου.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Αυτό είναι μέρος μιας σειράς τεχνικών για τον εντοπισμό περιεχομένου που είναι επαρκείς για την αντιμετώπιση του Κριτηρίου Επιτυχίας 2.4.5. Ένας πίνακας περιεχομένων παρέχει συνδέσμους προς ενότητες και υποενότητες του ίδιου εγγράφου. Οι πληροφορίες στο έγγραφο οργανώνονται συνήθως ιεραρχικά και προορίζονται για ανάγνωση στη σειρά. Όπως θα μπορούσαν να υπάρχουν πολλά βιβλία σε μια βιβλιοθήκη, καθένα με τον δικό του πίνακα περιεχομένων, έτσι ένας ιστότοπος μπορεί να περιέχει πολλά έγγραφα, το καθένα με τον δικό του πίνακα περιεχομένων.
Ο πίνακας περιεχομένων εξυπηρετεί δύο σκοπούς:
Δίνει στους χρήστες μια επισκόπηση των περιεχομένων και της οργάνωσης του εγγράφου.
Επιτρέπει στους χρήστες να μεταβούν απευθείας σε μια συγκεκριμένη ενότητα ενός ηλεκτρονικού εγγράφου.
Ο πίνακας περιεχομένων κατά κανόνα περιέχει μόνο τις κύριες ενότητες του εγγράφου, αν και σε μερικές περιπτώσεις είναι επιθυμητός ένας εκτεταμένος πίνακας περιεχομένων που δίνει πιο λεπτομερή εικόνα ενός περίπλοκου εγγράφου.
Οι ενότητες του εγγράφου μπορούν να εντοπίζονται στην ίδια Ιστοσελίδα ή να χωρίζονται σε πολλαπλές Ιστοσελίδες. Ένας πίνακας περιεχομένων είναι ιδιαίτερα χρήσιμος όταν ένα έγγραφο χωρίζεται σε πολλαπλές Ιστοσελίδες.
Υπάρχει μια διάκριση μεταξύ ενός πίνακα περιεχομένων και άλλων στοιχείων πλοήγησης, όπως η γραμμή πλοήγησης ή ο χάρτης ιστότοπου. Ένας πίνακας περιεχομένων παρέχει συνδέσμους προς ενότητες του ίδιου εγγράφου. Αυτές οι ενότητες μπορούν να εντοπίζονται στην ίδια Ιστοσελίδα ή να μοιράζονται σε πολλαπλές Ιστοσελίδες. Μαζί όμως αποτελούν μια ολοκληρωμένη ιδέα. Για την καλύτερη κατανόηση, θεωρήστε ένα εκτυπωμένο βιβλίο το οποίο έχει ενότητες. Κάθε ενότητα ανήκει στο βιβλίο. Θα μπορούσαν να υπάρχουν πολλά βιβλία σε μια βιβλιοθήκη. Στο παράδειγμα αυτό, η "βιβλιοθήκη" είναι ολόκληρος ο ιστότοπος.
Οι Οδηγίες προσβασιμότητας στο περιεχόμενο Ιστού 2.0 (Web Content Accessibility Guidelines 2.0) περιέχουν έναν πίνακα περιεχομένων (table of contents) που αποτελεί μια ιεραρχική λίστα των συνδέσμων προς τις ενότητες και υποενότητες του εγγράφου. Η ιεραρχία του πίνακα περιεχομένων αντανακλά την οργάνωση των ενοτήτων και κάθε στοιχείο στον πίνακα περιεχομένων αποτελεί σύνδεσμο που μεταφέρει τον χρήστη απευθείας σε αυτή την ενότητα.
Η πρώτη σελίδα του εγγράφου "Χρήση προσβάσιμων εγγράφων PDF με το Adobe Reader 7.0: Οδηγός για άτομα με αναπηρίες" (Using Accessible PDF Documents with Adobe Reader 7.0: A Guide for People with Disabilities) περιέχει έναν πίνακα περιεχομένων με όλες τις ενότητες του οδηγού. Η έκδοση PDF του οδηγού για άτομα με αναπηρίες (PDF version of the Guide for People with Disabilities) περιέχει έναν πιο λεπτομερή πίνακα περιεχομένων για όλο το έγγραφο στη σελίδα 3.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε ότι στο έγγραφο υπάρχει πίνακας περιεχομένων ή σύνδεσμος προς τον πίνακα περιεχομένων.
Ελέγξτε ότι οι τιμές και η σειρά των καταχωρήσεων στον πίνακα περιεχομένων αντιστοιχούν στα ονόματα και τη σειρά των ενοτήτων του εγγράφου
Ελέγξτε ότι οι καταχωρήσεις στον πίνακα περιεχομένων συνδέονται με τις σωστές ενότητες του εγγράφου.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Ένα στοιχείο ιχνηλάτησης βοηθά τον χρήστη να οπτικοποιήσει τον τρόπο δόμησης του περιεχομένου και πλοήγησης πίσω στις προηγούμενες Ιστοσελίδες και μπορεί να προσδιορίσει την τρέχουσα θέση εντός μιας σειράς Ιστοσελίδων. Ένα στοιχείο ιχνηλάτησης μπορεί είτε να εμφανίσει θέσεις στη διαδρομή που πήρε ο χρήστης για να φτάσει στην Ιστοσελίδα, είτε να εμφανίσει τη θέση της τρέχουσας Ιστοσελίδας εντός της οργάνωσης του ιστότοπου.
Τα στοιχεία ιχνηλάτησης εφαρμόζονται με χρήση συνδέσμων προς Ιστοσελίδες που προσπελάστηκαν στη διαδικασία πλοήγησης στην τρέχουσα Ιστοσελίδα. Τοποθετούνται στην ίδια θέση εντός κάθε Ιστοσελίδα στο σύνολο.
Μπορεί να είναι χρήσιμο για τους χρήστες να διαχωριστούν τα στοιχεία στην πορεία ιχνηλάτησης με ορατό διαχωριστικό. Παραδείγματα διαχωριστικών είναι τα ">", "|", "/" και "::".
Ένας προγραμματιστής εκτελεί αναζήτηση εντός του ιστότοπου ενός κατασκευαστή εργαλείων συγγραφής για να βρεί πώς δημιουργούνται υπερσύνδεσμοι. Τα αποτελέσματα αναζήτησης τον φέρνουν σε μια Ιστοσελίδα με συγκεκριμένες οδηγίες για τη δημιουργία υπερσυνδέσμων με χρήση εργαλείου συγγραφής. Περιέχει τους ακόλουθους συνδέσμους για τη δημιουργία στοιχείου ιχνηλάτησης:
Παράδειγμα κώδικα:
Home :: Developer Center :: How To Center
Σε αυτό το παράδειγμα, το στοιχείο ιχνηλάτησης δεν περιέχει τον τίτλο της τρέχουσας Ιστοσελίδας, "Πώς δημιουργούνται υπερσύνδεσμοι". Αυτές οι πληροφορίες είναι διαθέσιμες ως τίτλος της Ιστοσελίδας.
Ο ιστότοπος με τα έργα ενός φωτογράφου έχει οργανωθεί σε διαφορετικές συλλογές (galleries) και κάθε μία χωρίζεται περαιτέρω σε κατηγορίες. Ένας χρήστης που εκτελεί πλοήγηση στον ιστότοπο για μια Ιστοσελίδα που περιέχει μια φωτογραφία ενός πιγκουίνου Gentoo, θα δει το παρακάτω στοιχείο ιχνηλάτησης στην κορυφή της Ιστοσελίδας:
Παράδειγμα κώδικα:
Home / Galleries / Antarctica / Penguins / Gentoo Penguin
Όλα τα στοιχεία εκτός του "Gentoo Penguin" εφαρμόζονται ως σύνδεσμοι. Η τρέχουσα θέση, Gentoo Penguin, περιλαμβάνεται στο στοιχείο ιχνηλάτησης αλλά δεν εφαρμόζεται ως σύνδεσμος.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Όταν εφαρμόζονται στοιχεία ιχνηλάτησης σε σύνολο Ιστοσελίδων:
Μεταβείτε σε μια Ιστοσελίδα.
Ελέγξτε ότι εμφανίζεται ένα στοιχείο ιχνηλάτησης.
Ελέγξτε ότι το στοιχείο ιχνηλάτησης εμφανίζει τη σωστή ακολουθία πλοήγησης για προσπέλαση της τρέχουσας θέσης ή τη σωστή ιεραρχική διαδρομή στην τρέχουσα θέση εντός της δομής του ιστότοπου.
Για ένα στοιχείο ιχνηλάτησης που δεν περιλαμβάνει την τρέχουσα θέση:
Ελέγξτε ότι όλα τα στοιχεία στο στοιχείο ιχνηλάτησης εφαρμόζονται ως σύνδεσμοι.
Για ένα στοιχείο ιχνηλάτησης που περιλαμβάνει την τρέχουσα θέση:
Ελέγξτε ότι όλα τα στοιχεία εκτός από την τρέχουσα θέση, εφαρμόζονται ως σύνδεσμοι.
Ελέγξτε ότι η τρέχουσα θέση δεν εφαρμόζεται ως σύνδεσμος.
Ελέγξτε ότι όλοι οι σύνδεσμοι εκτελούν πλοήγηση στη σωστή Ιστοσελίδα όπως καθορίζεται στο στοιχείο ιχνηλάτησης.
Για όλες τις Ιστοσελίδες στο σύνολο με χρήση στοιχείων ιχνηλάτησης,
Οι έλεγχοι #2, #3 και #6 είναι αληθείς.
Είτε ο έλεγχος #4, είτε ο #5 είναι αληθής.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική παρέχει μια περιγραφική ετικέτα για περιεχόμενο μόνο ζωντανού ήχου και μόνο ζωντανού βίντεο. Αυτή η ετικέτα μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια εναλλακτική λύση για μέσα βάσει χρόνου για ήχο ή μια εναλλακτική λύση για μέσα βάσει χρόνου ή με ηχητική περιγραφή του βίντεο. Ωστόσο, αυτές οι εναλλακτικές δεν αποτελούν μέρος της τεχνικής αυτής. Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι ο χρήστης μπορεί να καθορίσει ποιο είναι το μη κειμενικό περιεχόμενο - ακόμα και αν δεν μπορεί να έχει πρόσβαση σε αυτό. ΣΗΜΕΙΩΣΗ: Ακόμα και αν πλήρεις εναλλακτικές είναι επίσης διαθέσιμες, είναι σημαντικό οι χρήστες να μπορούν να προσδιορίσουν το μη κειμενικό περιεχόμενο όταν τους εμφανίζεται, για να μην τους προκαλέσει σύγχυση και να μπορούν να το συσχετίσουν με την πλήρη εναλλακτική όταν τη συναντήσουν.
Μια τροφοδοσία ζωντανού βίντεο από τον αυτοκινητόδρομο της ανατολικής ακτής έχει την ακόλουθη περιγραφική ετικέτα "Ζωντανή εικόνα βίντεο από τον αυτοκινητόδρομο της ανατολικής ακτής, νότια του κόμβου I-81, με προβολή των κυκλοφοριακών συνθηκών."
Μια τροφοδοσία ζωντανού ήχου από τη Βουλή των Αντιπροσώπων της πολιτείας του Μισισιπί έχει την ακόλουθη περιγραφική ετικέτα "Ζωντανός ήχος από τα μικρόφωνα της Βουλής των Αντιπροσώπων της πολιτείας του Μισισιπί".
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
αφαιρέστε, αποκρύψτε ή καλύψτε το μη κειμενικό περιεχόμενο
εμφανίστε την/τις εναλλακτικές κειμένου
Ελέγξτε ότι ο σκοπός του μη κειμενικού περιεχομένου είναι σαφής - ακόμα και αν χαθεί το περιεχόμενο.
Το #3 είναι αληθές.
Γενική τεχνική. Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός προσβάσιμου εναλλακτικού τρόπου παρουσίασης των πληροφοριών σε μια παρουσίαση συγχρονισμένων μέσων.
Σε μια παρουσίαση συγχρονισμένων μέσων, οι πληροφορίες παρουσιάζονται με μια ποικιλία τρόπων, που περιλαμβάνει
διάλογο,
ήχους (φυσικούς και τεχνητούς),
το περιβάλλον και το παρασκήνιο,
τις ενέργειες και τις εκφράσεις ανθρώπων, ζώων κ.λπ.
κείμενο ή γραφικά,
και άλλα.
Προκειμένου να παρουσιαστούν οι ίδιες πληροφορίες με προσβάσιμο τρόπο, αυτή η τεχνική περιλαμβάνει τη δημιουργία εγγράφου που λέει την ίδια ιστορία και παρουσιάζει τις ίδιες πληροφορίες όπως τα συγχρονισμένα μέσα. Ένα τέτοιο έγγραφο συχνά ονομάζεται σενάριο. Περιλαμβάνει όλους τους σημαντικούς διαλόγους και ενέργειες, καθώς και περιγραφές του παρασκηνίου κ.λπ., που αποτελούν μέρος της ιστορίας.
Εάν χρησιμοποιήθηκε ένα πραγματικό σενάριο για τη δημιουργία συγχρονισμένων μέσων από την αρχή, μπορεί να αποτελέσει μια πολύ καλή αφετηρία. Όμως, κατά την παραγωγή και την επεξεργασία, τα συγχρονισμένα μέσα αλλάζουν συνήθως σε σχέση με το σενάριο. Για την τεχνική αυτή, το αρχικό σενάριο θα διορθωθεί, ώστε να συμφωνεί με τον διάλογο και με αυτό που πραγματικά συμβαίνει στην τελική επεξεργασμένη μορφή των συγχρονισμένων μέσων.
Επιπρόσθετα, μερικοί ειδικοί τύποι συγχρονισμένων μέσων περιλαμβάνουν αλληλεπίδραση που πρέπει να εμφανιστεί σε συγκεκριμένα μέρη κατά την αναπαραγωγή των συγχρονισμένων μέσων. Μερικές φορές, αυτό μπορεί να έχει ως αποτέλεσμα την εκτέλεση ενέργειας (π.χ. αγορά προϊόντος, αποστολή, ολοκλήρωση ενέργειας κ.λπ.). Μερικές φορές, μπορεί να αλλάξει την πορεία των συγχρονισμένων μέσων (π.χ. τα συγχρονισμένα μέσα έχουν πολλαπλές διαδρομές που καθορίζονται από τα δεδομένα εισόδου του χρήστη). Σε αυτές τις περιπτώσεις, θα χρησιμοποιηθούν σύνδεσμοι ή άλλοι μηχανισμοί στην εναλλακτική λύση για μέσα βάσει χρόνου για να επιτραπεί σε άτομα που χρησιμοποιούν την εναλλακτική να μπορούν να έχουν τις ίδιες επιλογές και δυνατότητες όπως τα άτομα που χρησιμοποιούν τα συγχρονισμένα μέσα.
Μια εκπαιδευτική ταινία δείχνει στους υπαλλήλους τη χρήση ενός νέου κομματιού του εξοπλισμού. Ένα άτομο μιλά σε όλη την ταινία ενώ παράλληλα κάνει την επίδειξη. Το σενάριο που χρησιμοποιήθηκε για τη δημιουργία της εκπαιδευτικής ταινίας αποτελεί το σημείο αφετηρίας. Έπειτα, γίνεται η επεξεργασία και διόρθωση για να ταιριάζει με τον διάλογο κ.λπ. Η ταινία και η εναλλακτική λύση για μέσα βάσει χρόνου που προκύπτει καθίστανται διαθέσιμες στον εταιρικό ιστότοπο. Οι υπάλληλοι μπορούν να χρησιμοποιήσουν τον ένα ή και τους δύο τρόπους, για να μάθουν να χρησιμοποιούν τη μηχανή.
Δημιουργείται ένα αλληλεπιδραστικό περιβάλλον αγορών και επιτρέπει στους χρήστες να κινηθούν μέσα στο εικονικό κατάστημα και να ψωνίσουν. Μια εναλλακτική λύση μέσων βάσει χρόνου επιτρέπει στους χρήστες να έχουν πρόσβαση στο κατάστημα με κείμενο μέσω συνδέσμων για την επιλογή των διαδρομών και την αγορά αντικειμένων, αντί της μεταφοράς τους μέσα σε ένα εικονικό καλάθι αγορών.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Προβάλετε την παρουσίαση συγχρονισμένων μέσων ενώ παράλληλα αναφερθείτε στην εναλλακτική λύση για μέσα βάσει χρόνου
Ελέγξτε ότι ο διάλογος στην εναλλακτική λύση για μέσα βάσει χρόνου συμφωνεί με τον διάλογο στην παρουσίαση συγχρονισμένων μέσων
Ελέγξτε ότι η εναλλακτική λύση μέσων βάσει χρόνου φέρει περιγραφές ήχων.
Ελέγξτε ότι η εναλλακτική λύση μέσων βάσει χρόνου φέρει περιγραφές ρύθμισης και αλλαγών ρύθμισης
Ελέγξτε ότι η εναλλακτική λύση μέσων βάσει χρόνου φέρει περιγραφές ενεργειών και εκφράσεων όλων των "δρώντων" (άτομα, ζώα κ.λπ).
Εάν οι εναλλακτικές εκδόσεις βρίσκονται σε ξεχωριστή σελίδα, ελέγξτε τη διαθεσιμότητα των συνδέσμων που επιτρέπουν στον χρήστη να λάβει τις άλλες εκδόσεις.
Τα #2, 3, 4, 5 είναι αληθή.
Όλες οι τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή του ορισμού λέξεων, φράσεων, τεχνικής γλώσσας ή αναπτυγμάτων από συντμήσεις με την προσθήκη μηχανισμού πρόσβασης σε ηλεκτρονικό λεξικό στην Ιστοσελίδα. Αυτή η τεχνική χρησιμοποιεί υπάρχοντες πόρους στον Ιστό για την παροχή του ορισμού, αντί της αίτησης προς τον συγγραφέα να δημιουργήσει γλωσσάρι ή άλλο μηχανισμό εντός του ιστότοπου. Με την παροχή πρόσβασης μέσα από την Ιστοσελίδα, ένας χρήστης μπορεί εύκολα να εντοπίσει τον επιθυμητό ορισμό. Αυτή η τεχνική μπορεί να χρησιμοποιηθεί μόνο εάν το ηλεκτρονικό λεξικό επιστρέφει τον σωστό ορισμό.
Ένας ιστότοπος που περιγράφει τον τρόπο λειτουργίας ενός υπολογιστή θα περιλάβει μια φόρμα αναζήτησης σε κάθε Ιστοσελίδα. Η αναζήτηση θα εκτελεστεί σε ηλεκτρονικό λεξικό όρων, ακρωνυμίων και συντμήσεων για υπολογιστές. Εφόσον πρόκειται για ειδικό λεξικό για όρους υπολογιστών, το ανάπτυγμα του ακρωνυμίου που βρίσκεται πρέπει να είναι πιο ακριβές σε σχέση με ένα γενικό λεξικό.
Ένα ηλεκτρονικό μάθημα αγγλικής γραμματικής παρέχει μια παράγραφο κειμένου που εισάγει νέες λέξεις του λεξιλογίου. Κάθε λέξη του λεξιλογίου αποτελεί σύνδεσμο προς ένα ηλεκτρονικό λεξικό για την εύρεση του ορισμού της λέξης. Η ενεργοποίηση ενός συνδέσμου θα ανοίξει ένα νέο παράθυρο προς τον ιστότοπο του ηλεκτρονικού λεξικού με τον ορισμό της συγκεκριμένης λέξης.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη, φράση ή σύντμηση προς απόδοση ορισμού:
Ελέγξτε ότι υπάρχει μηχανισμός εντός της Ιστοσελίδας για την αναζήτηση λέξης, φράσης ή σύντμησης μέσω του ηλεκτρονικού λεξικού.
Ελέγξτε ότι το αποτέλεσμα της αναζήτησης του λεξικού για τη λέξη, φράση ή σύντμηση βρίσκει τον σωστό ορισμό.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Σημείωση: Ο ορισμός συντμήσεων που χρησιμοποιούνται στο WCAG είναι: "σύντομη μορφή μιας λέξης, φράσης ή ονομασίας όπου το αρχικό ανάπτυγμα δεν απορρίφθηκε από τον οργανισμό στον οποίο αναφέρεται και όπου η σύντμηση δεν αποτελεί μέρος της γλώσσας."
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή βοήθειας περιβάλλοντος για χρήστες, καθώς καταχωρούν δεδομένα σε φόρμες με την παροχή τουλάχιστον ενός συνδέσμου προς τις πληροφορίες βοήθειας σε κάθε Ιστοσελίδα. Ο σύνδεσμος στοχοθετεί μια σελίδα βοήθειας με πληροφορίες ειδικά για αυτή την Ιστοσελίδα. Μια άλλη προσέγγιση είναι η παροχή συνδέσμου βοήθειας για κάθε αλληλεπιδραστικό στοιχείο ελέγχου. Η τοποθέτηση αυτού του συνδέσμου ακριβώς πριν ή μετά το στοιχείο ελέγχου επιτρέπει στους χρήστες την εύκολη μετάβασή τους σε αυτό με το πλήκτρο tab εάν αντιμετωπίζουν προβλήματα στο στοιχείο ελέγχου. Η εμφάνιση των πληροφοριών βοήθειας σε νέο παράθυρο εφαρμογής περιήγησης διασφαλίζει ότι κάθε δεδομένο που έχει ήδη καταχωρηθεί στη φόρμα δεν θα χαθεί. ΣΗΜΕΙΩΣΗ: Ο σύνδεσμος δεν είναι το μόνο μέσο για την παροχή βοήθειας.
Το παρακάτω παράδειγμα δείχνει ένα στοιχείο ετικέτας που περιλαμβάνει έναν σύνδεσμο βοήθειας. Η συμπερίληψη του συνδέσμου βοήθειας εντός του στοιχείου ετικέτας επιτρέπει σε χρήστες της εφαρμογής ανάγνωσης οθόνης να έχουν πρόσβαση στον σύνδεσμο βοήθειας κατά την αλληλεπίδραση με το στοιχείο ελέγχου της φόρμας εισαγωγής δεδομένων.
Παράδειγμα κώδικα:
<form action="test.html">
<label for="test">Test control
<a href="help.html" target="_blank">Help</a></label>
<input type="text" name="test" id="test" />
</form>
Προσδιορίστε μια Ιστοσελίδα που περιέχει φόρμες.
Καθορίστε εάν υπάρχει τουλάχιστον ένας σύνδεσμος προς πληροφορίες βοήθειας ειδικά για τη συμπλήρωση της φόρμας σε αυτή την Ιστοσελίδα ή άλλο πόρο.
Καθορίστε εάν υπάρχουν άλλοι σύνδεσμοι είτε πριν, είτε μετά από κάθε αλληλεπιδραστικό στοιχείο ελέγχου προς πληροφορίες βοήθειας ειδικά για αυτό το στοιχείο ελέγχου.
Είτε το #2, είτε το #3 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου για σύνδεση με απομονωμένες εκτεταμένες περιγραφές σε τεχνολογίες που δεν έχουν άμεσα ενσωματωμένο το χαρακτηριστικό εκτεταμένων περιγραφών (π.χ. longdesc) ή σε περιπτώσεις που είναι γνωστό ότι το χαρακτηριστικό δεν υποστηρίζεται.
Με αυτή την τεχνική, η εκτεταμένη περιγραφή παρέχεται σε άλλη θέση από το μη κειμενικό περιεχόμενο. Αυτή θα μπορούσε να είναι μια άλλη θέση εντός του ίδιου URI ή άλλου URI. Παρέχεται σύνδεσμος προς αυτή την εκτεταμένη περιγραφή που βρίσκεται ακριβώς δίπλα στο μη κειμενικό περιεχόμενο. Ο σύνδεσμος μπορεί να βρίσκεται ακριβώς πριν ή μετά το μη κειμενικό περιεχόμενο. Εάν η περιγραφή βρίσκεται μαζί με άλλο κείμενο, τοποθετήστε την ένδειξη "Τέλος περιγραφής" στο τέλος, ώστε οι χρήστες να καταλάβουν το σημείο που πρέπει να διακοπεί η ανάγνωση και να επιστρέψουν στο κύριο περιεχόμενο. Εάν το κουμπί "Πίσω" δεν επιστρέψει το άτομο πίσω στο σημείο από το οποίο προήλθε, τότε παρέχεται σύνδεσμος επιστροφής στο μη κειμενικό περιεχόμενο.
Αυτή η τεχνική χρησιμοποιούταν συχνά σε HTML πριν την προσθήκη της "longdesc" στην προδιαγραφή. Στη γλώσσα HTML, ονομαζόταν "Σύνδεσμος D" διότι εφαρμοζόταν συνήθως με την τοποθέτηση ενός D δίπλα σε εικόνες και τη χρήση του D ως συνδέσμου προς την εκτεταμένη περιγραφή. Αυτή η τεχνική δεν είναι συγκεκριμένης τεχνολογίας και μπορεί να χρησιμοποιηθεί σε κάθε τεχνολογία που υποστηρίζει συνδέσμους.
Σε μια ιστοσελίδα, υπάρχει ένα γράφημα ράβδων που εμφανίζει τις πωλήσεις των τριών κορυφαίων πωλητών.
Το σύντομο εναλλακτικό κειμένου λέει "Γράφημα πωλήσεων Οκτωβρίου για τους τρεις καλύτερους πωλητές."
Αμέσως μετά το μη κειμενικό περιεχόμενο υπάρχει μια μικρή εικόνα υποδηλώνοντας μια εκτεταμένη περιγραφή. Το εναλλακτικό κειμένου για την εικόνα είναι "Εκτεταμένη περιγραφή γραφήματος". Η εικόνα παραπέμπει στο κάτω μέρος της σελίδας όπου υπάρχει μια ενότητα με τίτλο "Περιγραφή γραφημάτων στη σελίδα". Ο σύνδεσμος αναφέρεται σε αυτή τη συγκεκριμένη περιγραφή: "Οι πωλήσεις Οκτωβρίου δείχνουν προβάδισμα της Μαίρης με 400 μονάδες. Ακολουθεί από κοντά ο Μάικ με 389. Ο Κρις συμπληρώνει την κορυφαία τριάδα με 350. [τέλος περιγραφής]"
Σε μια ιστοσελίδα, υπάρχει ένα γράφημα ράβδων που εμφανίζει τις πωλήσεις των τριών κορυφαίων πωλητών.
Το σύντομο εναλλακτικό κειμένου λέει "Γράφημα πωλήσεων Οκτωβρίου για τους τρεις καλύτερους πωλητές."
Αμέσως μετά το μη κειμενικό περιεχόμενο υπάρχει μια μικρή εικόνα υποδηλώνοντας μια εκτεταμένη περιγραφή. Το εναλλακτικό κειμένου για την εικόνα είναι "Εκτεταμένη περιγραφή γραφήματος". Η εικόνα συνδέεται με άλλη σελίδα με τίτλο "Περιγραφή γραφημάτων σε αναφορά πωλήσεων Οκτωβρίου". Ο σύνδεσμος περιγραφής αναφέρεται σε αυτή τη συγκεκριμένη περιγραφή: "Οι πωλήσεις Οκτωβρίου δείχνουν προβάδισμα της Μαίρης με 400 μονάδες. Ακολουθεί από κοντά ο Μάικ με 389. Ο Κρις συμπληρώνει την κορυφαία τριάδα με 350. Τέλος περιγραφής <link>
Πίσω στο γράφημα πωλήσεων </link>
]"
Υπάρχει ένα γράφημα. Η επεξήγηση εικόνας ακριβώς κάτω από το γράφημα λειτουργεί ως σύνδεσμος προς την εκτεταμένη περιγραφή. Η παράμετρος "Τίτλος" του συνδέσμου καθιστά σαφές ότι πρόκειται για σύνδεσμο προς εκτεταμένη περιγραφή.
Υπάρχει η μαγνητοφώνηση μιας ομιλίας του Martin Luther King. Δίπλα-δίπλα εμφανίζονται σύνδεσμοι προς το αρχείο ήχου και τη μεταγραφή.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
ελέγξτε εάν υπάρχει σύνδεσμος ακριβώς πριν ή μετά το μη κειμενικό περιεχόμενο
ελέγξτε ότι ο σύνδεσμος είναι έγκυρος και παραπέμπει απευθείας στην εκτεταμένη περιγραφή του συγκεκριμένου μη κειμενικού περιεχομένου.
ελέγξτε ότι η εκτεταμένη περιγραφή μεταφέρει τις ίδιες πληροφορίες όπως και το μη κειμενικό περιεχόμενο
ελέγξτε για τη διαθεσιμότητα συνδέσμου ή λειτουργίας επιστροφής για τον χρήστη προς την αρχική θέση του μη κειμενικού περιεχομένου
Και τα 4 παραπάνω στοιχεία είναι αληθή
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας εκτεταμένης περιγραφής χωρίς ο χρήστης να πρέπει να μεταπηδήσει σε άλλη θέση της περιγραφής. Επιτρέπει επίσης σε όλους τους χρήστες να δουν την περιγραφή που μπορεί να είναι χρήσιμη σε οποιονδήποτε ίσως χάσει κάποια χαρακτηριστικά στο μη κειμενικό περιεχόμενο.
Με αυτή την τεχνική, η εκτεταμένη περιγραφή παρέχεται ως μέρος της βασικής παρουσίασης (δηλ. όλοι τη λαμβάνουν). Η περιγραφή βρίσκεται δίπλα στο μη κειμενικό περιεχόμενο αλλά δεν χρειάζεται να είναι το αμέσως επόμενο στοιχείο. Για παράδειγμα, ίσως υπάρχει επεξήγηση κάτω από γράφημα με την εκτεταμένη περιγραφή να παρέχεται στην ακόλουθη παράγραφο.
Η θέση αυτής της εκτεταμένης περιγραφής παρέχεται τότε εντός του σύντομου εναλλακτικού κειμένου, έτσι ώστε ο χρήστης να γνωρίζει που να την αναζητήσει εάν δεν μπορεί να δει το μη κειμενικό περιεχόμενο.
Σε μια ιστοσελίδα, υπάρχει ένα γράφημα ράβδων που εμφανίζει τις πωλήσεις των τριών κορυφαίων πωλητών.
Το σύντομο εναλλακτικό κειμένου λέει: "Γράφημα πωλήσεων Οκτωβρίου για τρεις κορυφαίους πωλητές Λεπτομέρειες σε κείμενο αμέσως μετά το γράφημα:"
Το ακόλουθο βρίσκεται στην παράγραφο ακριβώς κάτω από το γράφημα. "Οι πωλήσεις Οκτωβρίου δείχνουν προβάδισμα της Μαίρης με 400 μονάδες. Ακολουθεί από κοντά ο Μάικ με 389. Ο Κρις συμπληρώνει την κορυφαία τριάδα με 350"
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
ελέγξτε ότι το σύντομο εναλλακτικό κειμένου περιλαμβάνει τη θέση της εκτεταμένης περιγραφής
ελέγξτε ότι η εκτεταμένη περιγραφή βρίσκεται κοντά στο μη κειμενικό περιεχόμενο τότο οπτικά, όσο και αναφορικά με τη γραμμική σειρά ανάγνωσης
ελέγξτε ότι η εκτεταμένη περιγραφή μεταφέρει τις ίδιες πληροφορίες όπως και το μη κειμενικό περιεχόμενο
Και τα 3 παραπάνω στοιχεία είναι αληθή
Περιεχόμενο που ενημερώνεται μόνο του αυτόματα.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι οι χρήστες μπορούν να αναβάλουν αυτόματες ενημερώσεις περιεχομένου ή άλλες μη επείγουσες διακοπές. Αυτό επιτυγχάνεται είτε μέσω μιας προτίμησης, είτε μέσω ειδοποίησης στους χρήστες για επικείμενη ενημέρωση και παροχή της δυνατότητας ακύρωσής της. Εάν παρέχεται προτίμηση, η αυτόματη ενημέρωση περιεχομένου μπορεί να απενεργοποιηθεί ως προεπιλογή και οι χρήστες μπορούν να καθορίσουν τη συχνότητα των αυτόματων ενημερώσεων περιεχομένου εάν επιλέξουν την ενεργοποίηση της ρύθμισης.
Μια ιστοσελίδα παρέχει τιμές μετοχών και ενημερώνεται αυτόματα ανά διαστήματα. Η σελίδα παρέχει μια σύντομη φόρμα με ένα πεδίο "Συχνότητα ανανέωσης δεδομένων (λεπτά):" άρα, οι χρήστες μπορούν να προσαρμόσουν τη συχνότητα της ενημέρωσης.
Βρείτε σελίδες με περιεχόμενο που ενημερώνεται αυτόματα.
Για κάθε αυτόματη ενημέρωση, αναζητήστε ένα μηχανισμό για προσαρμογή του συγχρονισμού των ενημερώσεων.
Ελέγξτε ότι η αυτόματη ενημέρωση είναι απενεργοποιημένη ως προεπιλογή ή ότι ο χρήστης έχει προειδοποιηθεί πριν εμφανιστεί μια αυτόματη ενημέρωση και του έχει δοθεί η δυνατότητα ακύρωσής της.
Το #3 είναι αληθές.
Κάθε τεχνολογία ή συνδυασμός τεχνολογιών που υποστηρίζουν αυτόματες ενημερώσεις.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στον χρήστη να ελέγξει εάν και πότε ενημερώνεται το περιεχόμενο, προκειμένου να αποφευχθεί σύγχυση ή αποπροσανατολισμός λόγω αυτόματων ανανεώσεων που προκαλούν αλλαγή περιεχομένου. Οι χρήστες εφαρμογών ανάγνωσης οθόνης μπορεί να μπερδευτούν από τις αυτόματες ενημερώσεις καθώς δεν είναι πάντα σαφές τι ακριβώς συμβαίνει. Όταν ανανεώνεται μια σελίδα, ο "εικονικός δρομέας" της εφαρμογής ανάγνωσης οθόνης, που σημειώνει την τρέχουσα θέση του χρήστη στη σελίδα, μετακινείται στην κορυφή της σελίδας. Άτομα που χρησιμοποιούν λογισμικό μεγέθυνσης οθόνης και άτομα με μαθησιακές δυσκολίες μπορεί επίσης να αποπροσανατολιστούν όταν οι σελίδες ανανεώνονται αυτόματα.
Κάποιο περιεχόμενο συχνά ενημερώνεται με νέα δεδομένα ή πληροφορίες. Μερικοί προγραμματιστές επιβάλλουν τις αυτόματες ενημερώσεις μέσω της εισαγωγής κώδικα στο περιεχόμενο που προκαλεί την υποβολή αίτησης από το περιεχόμενο για νέο αντίγραφο του ιδίου από τον διακομιστή. Αυτές οι ενημερώσεις και η συχνότητά τους δεν βρίσκονται πάντα υπό τον έλεγχο του χρήστη. Αντί της αυτόματης ενεργοποίησης ενημερώσεων, οι συγγραφείς προσπαθούν να παράσχουν έναν μηχανισμό που επιτρέπει στον χρήστη να υποβάλει αίτηση για ενημέρωση του περιεχομένου, όπως απαιτείται.
Σε HTML, ο προγραμματιστής μπορεί να παράσχει ένα κουμπί ή σύνδεσμο που επιτρέπει στον χρήστη να ενημερώσει το περιεχόμενο. Για παράδειγμα, σε μια σελίδα με ειδήσεις στη διεύθυνση http://www.example.com/news.jsp
Παράδειγμα κώδικα:
<a href="news.jsp">Update this page</a>
Σε μια διεπαφή Ιστού για ηλεκτρονικό ταχυδρομείο (Webmail), ο προγραμματιστής μπορεί να παράσχει ένα κουμπί ή σύνδεσμο για τη λήψη των νέων εισερχόμενων μηνυμάτων αντί της αυτόματης ενημέρωσης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Το έγγραφο "Λήξεις χρόνου σύνδεσης και ανανεώσεις σελίδας" (Time outs and page refreshes), από το Κέντρο Πρόσβασης Ιστού (Web Access Centre) του "Βασιλικού Εθνικού Ινστιτούτου Τυφλών" (RNIB), παρέχει τεκμηρίωση και τεχνικές.
Βρείτε μηχανισμούς για ενημέρωση του περιεχομένου (εάν υπάρχει τέτοιος μηχανισμός).
Για κάθε τέτοιο μηχανισμό, ελέγξτε εάν επιτρέπει στον χρήστη να υποβάλει αίτηση για ενημέρωση.
Για κάθε τέτοιο μηχανισμό, ελέγξτε εάν μπορεί να προκαλέσει αυτόματη ενημέρωση.
Εάν το #2 είναι αληθές, τότε το #3 είναι ψευδές.
Εφαρμόζεται σε κάθε τεχνολογία που έχει ηχητικό πλαίσιο και οπτικό περιεχόμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ηχητικής (φωνητικής) έκδοσης πληροφοριών με οπτικό τρόπο, ώστε άτομα που δεν μπορούν να δουν να είναι σε θέση να καταλαβαίνουν καλύτερα οπτικοακουστικό υλικό.
Εφόσον οι περισσότεροι πράκτορες χρήστη σήμερα δεν μπορούν να συγχωνεύσουν πολλαπλά ηχητικά κομμάτια, αυτή η τεχνική προσθέτει τις πρόσθετες ηχητικές πληροφορίες σε συγχρονισμένα μέσα παρέχοντας μια επιλογή η οποία επιτρέπει σε χρήστες να αντικαταστήσουν το ηχητικό κομμάτι με ένα νέο αντίγραφο του αρχικού ηχητικού κομματιού, στο οποίο έχει προστεθεί πρόσθετη ηχητική περιγραφή. Αυτές οι πρόσθετες πληροφορίες επικεντρώνονται σε ενέργειες, χαρακτήρες, αλλαγές σκηνών και κείμενο επί της οθόνης (όχι επεξηγήσεις) που είναι σημαντικό για την κατανόηση του περιεχομένου.
Εφόσον δεν είναι χρήσιμο αυτές οι νέες πληροφορίες να επικαλύπτουν σημαντικές ηχητικές πληροφορίες του αρχικού ηχητικού κομματιού (ή να επικαλύπτονται από δυνατά ηχητικά εφέ), οι νέες πληροφορίες προστίθενται κατά τη διάρκεια παύσεων του διαλόγου και των ηχητικών εφέ. Αυτό περιορίζει την ποσότητα των συμπληρωματικών πληροφοριών που μπορούν να προστεθούν στο πρόγραμμα.
Το ηχητικό κομμάτι με την ηχητική περιγραφή (των οπτικών πληροφοριών) μπορεί να είναι είτε ένα εναλλακτικό ηχητικό κομμάτι που μπορεί να επιλέξει ο χρήστης, είτε το τυποποιημένο ηχητικό κομμάτι που ακούει ο καθένας.
Μια ταξιδιωτική ταινία για τα βορειοανατολικά έχει πρόσθετη ηχητική περιγραφή που προστέθηκε στα κενά του διαλόγου για να μπορούν οι ακροατές με τύφλωση να γνωρίζουν ποιο πρόσωπο μιλά ανά πάσα στιγμή.
Ένα βίντεο δείχνει έναν τρυποκάρυδο να σκαλίζει μια φωλιά σε ένα δέντρο. Ένα κουμπί εντός του περιεχομένου επιτρέπει σε χρήστες να ενεργοποιήσουν ή απενεργοποιήσουν το κομμάτι της ηχητικής περιγραφής.
Σε μια διάλεξη προστίθεται ηχητική περιγραφή όποτε ο εκπαιδευτής λέει "και αυτό είναι το πιο σημαντικό." Οι ηχητικές περιγραφές επιτρέπουν στους ακροατές που δεν μπορούν να δουν το βίντεο, να γνωρίζουν τι είναι "αυτό".
Ένα αρχείο ταινίας με δύο ηχητικά κομμάτια, ένα από τα οποία περιλαμβάνει ηχητική περιγραφή. Οι χρήστες μπορούν να επιλέξουν οποιοδήποτε κατά την ακρόαση της ταινίας επιλέγοντας το κατάλληλο κομμάτι στο δικό τους πρόγραμμα αναπαραγωγής μέσων.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το ηχητικό κομμάτι που περιλαμβάνει ηχητικές περιγραφές μπορεί να ενεργοποιηθεί μέσω ενός στοιχείου ελέγχου εντός του ίδιου του περιεχομένου ή μέσω επιλογής μιας προτίμησης στο πρόγραμμα αναπαραγωγής μέσων.
Ακούστε συγχρονισμένα μέσα
Ελέγξτε εάν τα κενά στον διάλογο χρησιμοποιούνται για τη μεταφορά σημαντικών πληροφοριών σχετικά με το οπτικό περιεχόμενο
Οι έλεγχοι #1 και #3 είναι αληθείς.
Τεχνολογίες που υποστηρίζουν συνδέσμους, ηχητικές μορφές.
Αυτή η τεχνική σχετίζεται με:
Μερικοί χρήστες που αντιμετωπίζουν δυσκολίες στην αποκωδικοποίηση λέξεων σε γραπτό κείμενο, βρίσκουν πολύ χρήσιμο να ακούνε δυνατά την ανάγνωση του κειμένου. Είναι δυνατή η παροχή τώρα αυτής της υπηρεσίας με χρήση είτε ηχογραφημένης ανθρώπινης ομιλίας, είτε συνθετικής ομιλίας. Για παράδειγμα, υπάρχει ένας αριθμός προϊόντων που οι συγγραφείς μπορούν να χρησιμοποιήσουν για να μετατρέψουν το κείμενο σε συνθετική ομιλία και στη συνέχεια να αποθηκεύσουν τη φωνητική έκδοση ως αρχείο ήχου. Στη συνέχεια, είναι δυνατή η παροχή συνδέσμου προς τη φωνητική έκδοση εντός του περιεχομένου. Το κόστος εξαρτάται μερικώς από την ποιότητα της φωνής που χρησιμοποιείται και από τη συχνότητα αλλαγής του κειμένου.
Φωνητικές εκδόσεις περιεχομένου σύντομου κειμένου και στατικού κειμένου
Αυτή η μέθοδος είναι αποτελεσματική για κείμενα μικρού μεγέθους και για μεγαλύτερα έγγραφα που δεν αλλάζουν συχνά.
Ηχογραφήστε κάποιον που διαβάζει δυνατά το κείμενο ή χρησιμοποιήστε ένα εργαλείο που μετατρέπει μεμονωμένα έγγραφα ή επιλεγμένα αποσπάσματα σε συνθετική ομιλία. Επιλέξτε την πιο καθαρή, ελκυστική φωνή εάν έχετε δυνατότητα επιλογής.
Αποθηκεύστε τη φωνητική έκδοση ως αρχείο ήχου. Χρησιμοποιήστε μια μορφή ήχου που είναι ευρέως διαθέσιμη και υποστηρίζεται από τις εφαρμογές αναπαραγωγής μέσων.
Ορίστε σύνδεσμο προς την ηχητική έκδοση.
Προσδιορίστε τη μορφή ήχου (για παράδειγμα, .MP3, .WAV, .AU, κ.λπ.).
Ορίστε σύνδεσμο προς την εφαρμογή αναπαραγωγής μέσων που υποστηρίζει τη μορφή.
Φωνητικές εκδόσεις του κειμένου που αλλάζει
Οι μέθοδοι διακομιστή ίσως είναι καλύτερες όταν οι σελίδες αλλάζουν συχνά ή όταν η επιλογή χρήστη καθορίζει το κειμενικό περιεχόμενο. Μερικά εργαλεία διακομιστή επιτρέπουν σε χρήστες να επιλέξουν οποιοδήποτε κείμενο τους ενδιαφέρει και θέλουν να ακούσουν. Κατά κανόνα, ο χρήστης πατά ένα κουμπί που ξεκινά την μετατροπή από κείμενο σε ομιλία και διαβάζει δυνατά το κείμενο.
Ο ιστότοπος μιας δημοτικής υπηρεσίας στέγασης έχει ένα κουμπί για κάθε σελίδα με ετικέτα "Διαβάστε δυνατά αυτή τη σελίδα." Ο χρήστης επιλέγει το κουμπί και η σελίδα εκφωνείται με συνθετική ομιλία.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε εάν είναι διαθέσιμη μια φωνητική έκδοση του περιεχομένου.
Ελέγξτε ότι το #1 είναι αληθές.
Περιεχόμενο που περιλαμβάνει φόρμες.
Αυτή η τεχνική σχετίζεται με:
Ο σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού που επιτρέπει στους χρήστες να υποβάλουν ρητά αίτηση για αλλαγές στο περιβάλλον. Εφόσον η επιδιωκόμενη χρήση ενός κουμπιού υποβολής είναι η δημιουργία μιας αίτησης HTTP για υποβολή δεδομένων που καταχωρήθηκαν σε φόρμα, αποτελεί ένα κατάλληλο στοιχείο ελέγχου προς χρήση για να προκληθεί αλλαγή στο περιβάλλον και συνιστά μια πρακτική που δεν προκαλεί σύγχυση τους χρήστες.
Παράδειγμα 1: Ένα κουμπί υποβολής χρησιμοποιείται για κάθε φόρμα που προκαλεί αλλαγή στο περιβάλλον.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε όλες τις φόρμες στο περιεχόμενο
Για κάθε φόρμα, ελέγξτε ότι διαθέτει κουμπί υποβολής
Το #2 είναι αληθές
Εφαρμόζεται σε όλες τις τεχνολογίες συγχρονισμένων μέσων που επιτρέπουν συγχρονισμό πολλαπλών ροών βίντεο
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτή της τεχνικής είναι να επιτρέψει σε χρήστες που δεν μπορούν να ακούσουν ή να διαβάσουν κείμενο γρήγορα, την πρόσβαση σε υλικό συγχρονισμένων μέσων χωρίς να επηρεάζεται η παρουσίαση του υλικού για όλους τους θεατές.
Για όσους επικοινωνούν κυρίως μέσω νοηματικής γλώσσας, μερικές φορές δεν είναι επιθυμητό και μερικές ούτε εφικτό να διαβάσουν και να καταλάβουν κείμενο με το ρυθμό που αυτό παρουσιάζεται σε επεξηγήσεις. Για τους τελευταίους, είναι σημαντική η παροχή παρουσίασης των ηχητικών πληροφοριών στη νοηματική γλώσσα.
Αυτή η τεχνική επιτυγχάνει το παραπάνω παρέχοντας τη διερμηνεία στη νοηματική γλώσσα ως ξεχωριστή ροή βίντεο που είναι συγχρονισμένη με την αρχική ροή βίντεο Ανάλογα με την εφαρμογή αναπαραγωγής, η δευτερεύουσα ροή βίντεο μπορεί να τεθεί σε επικάλυψη του αρχικού βίντεο ή να απεικονιστεί σε ξεχωριστό παράθυρο. Επίσης, είναι ίσως δυνατή η μεγέθυνση του διερμηνέα της νοηματικής γλώσσας ξεχωριστά από το αρχικό βίντεο, προκειμένου να διευκολυνθεί η ανάγνωση των κινήσεων των χεριών, του σώματος και του προσώπου του ομιλητή της νοηματικής.
ΣΗΜΕΙΩΣΗ: Εφόσον η νοηματική γλώσσα δεν αποτελεί συνήθως μια έκδοση στη νοηματική της έντυπης γλώσσας, ο συγγραφέας πρέπει να αποφασίσει ποια νοηματική γλώσσα θα συμπεριλάβει. Συνήθως χρησιμοποιείται η νοηματική γλώσσα του πρωταρχικού κοινού. Εάν προορίζεται για πολλαπλά κοινά, μπορούν να χρησιμοποιηθούν πολλαπλές γλώσσες. Δείτε τη συμβουλευτική τεχνική για πολλαπλές νοηματικές γλώσσες.
Παράδειγμα 1: Ένα πανεπιστήμιο παρέχει συγχρονισμένη ροή βίντεο του διερμηνέα νοηματικής γλώσσας που μπορεί να απεικονιστεί, κατόπιν επιλογής του θεατή, μαζί με οποιοδήποτε από τα εκπαιδευτικά προγράμματά του.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Οδηγίες για την παραγωγή βιβλίων νοηματικής
Η "Παρουσίαση της νοηματικής γλώσσας" ("Sign Language presentation") δίνει μια εκτεταμένη επισκόπηση των θεμάτων προς επεξεργασία κατά την κινηματογράφηση διερμηνέων νοηματικής γλώσσας. Περιλαμβάνει σχολιασμό της μεταφοράς γραπτών και προφορικών αρχικών κειμένων στη νοηματική γλώσσα
Τεχνικές κινηματογράφησης σχολιάζονται στο κεφάλαιο 12, "Κινηματογραφώντας τους ομιλητές νοηματικής" (chapter 12, “Filming the Signer(s)”).
Χρήσιμες πληροφορίες για την απεικόνιση του διερμηνέα νοηματικής γλώσσας σε σχέση με το αρχικό περιεχόμενο συγχρονισμένων μέσων παρέχεται στο κεφάλαιο 13 "Επεξεργασία" (Chapter 13, "Editing")
Σημείωση: Αυτές οι τεχνικές ίσως πρέπει να προσαρμοστούν για παρουσιάσεις Ιστού.
(καμία)
Ενεργοποιήστε την απεικόνιση του παραθύρου νοηματικής γλώσσας στην εφαρμογή αναπαραγωγής.
Αναθέστε σε κάποιον με ακοή και εξοικείωση με τη χρησιμοποιούμενη νοηματική γλώσσα να παρακολουθήσει το πρόγραμμα
Ελέγξτε εάν υπάρχει διερμηνέας νοηματικής γλώσσας στην οθόνη ή σε ξεχωριστό παράθυρο.
Ελέγξτε ότι οι διάλογοι και σημαντικοί ήχοι μεταφέρονται από τον διερμηνέα και συγχρονίζονται με τον ήχο.
Τα #3 και #4 είναι αληθή
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή χρήσιμων πληροφοριών μέσω του εναλλακτικού κειμένου ακόμα και αν δεν είναι δυνατή η παροχή της πλήρους λειτουργίας του μη κειμενικού περιεχομένου.
Μερικές φορές, ένα εναλλακτικό κειμένου δεν μπορεί να εξυπηρετήσει τους ίδιους σκοπούς με το αρχικό μη κειμενικό περιεχόμενο (για παράδειγμα, ένα applet με σκοπό την ανάπτυξη δεξιοτήτων ταχείας στόχευσης σε δύο διαστάσεις και συντονισμού ματιού-χεριού.) Η τεχνική αυτή χρησιμοποιείται σε αυτές τις περιπτώσεις. Με αυτή την τεχνική παρέχεται μια περιγραφή του σκοπού του μη κειμενικού περιεχομένου.
Ένα applet ανάπτυξης συντονισμού ματιού-χεριού έχει το ακόλουθο εναλλακτικό κειμένου "Applet που χρησιμοποιεί το ποντίκι και κινούμενους στόχους για την ανάπτυξη του συντονισμού ματιού-χεριού"
Ένα applet κάμερας με έναν στρογγυλό δίσκο όπου πιέζετε στις άκρες για να ελέγξετε μια απομακρυσμένη κάμερα και ένα κυλιόμενο μέρος στη μέση για ζουμ, έχει το ακόλουθο εναλλακτικό κειμένου "Έλεγχος στόχευσης και ζουμ απομακρυσμένης βιντεοκάμερας".
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
αφαιρέστε, αποκρύψτε ή καλύψτε το μη κειμενικό περιεχόμενο
αντικαταστήστε το με το εναλλακτικό κειμένου
ελέγξτε ότι ο σκοπός του μη κειμενικού περιεχομένου είναι σαφής - ακόμα και αν χαθεί η λειτουργία
Το #3 είναι αληθές.
Περιεχόμενο που περιλαμβάνει υποχρεωτικά πεδία στην εισαγωγή δεδομένων χρήστη
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η ειδοποίηση του χρήστη όταν δεν έχει συμπληρωθεί, ενώ θα έπρεπε, ένα πεδίο. Όταν οι χρήστες δεν εισάγουν δεδομένα για οποιοδήποτε υποχρεωτικό πεδίο, οι πληροφορίες παρέχονται σε κείμενο για να επιτρέψουν στους χρήστες να προσδιορίσουν ποια πεδία έχουν παραλειφθεί. Μία προσέγγιση είναι η χρήση επικύρωσης στην πλευρά του πελάτη και η παροχή ενός πλαισίου ειδοποίησης που θα προσδιορίζει τα υποχρεωτικά πεδία που παραλείφθηκαν. Μια άλλη προσέγγιση, με χρήση επικύρωσης στην πλευρά του διακομιστή, είναι η επανεμφάνιση της φόρμας (με όσα δεδομένα καταχωρήθηκαν προηγουμένως), είτε με περιγραφή κειμένου στη θέση του υποχρεωτικού πεδίου που έχει παραλειφθεί, είτε με περιγραφή κειμένου που προσδιορίζει τα υποχρεωτικά πεδία που παραλείφθηκαν.
Ένας χρήστης προσπαθεί να υποβάλει μια φόρμα αλλά αμέλησε να εισάγει δεδομένα ή να ορίσει μια επιλογή σε ένα ή περισσότερα από τα υποχρεωτικά πεδία. Χρησιμοποιώντας επικύρωση στην πλευρά του πελάτη, εντοπίζεται η παράλειψη και εμφανίζεται ένα πλαίσιο διαλόγου ειδοποίησης που ενημερώνει τον χρήστη ότι υπάρχουν υποχρεωτικά πεδία που δεν έχουν συμπληρωθεί. Οι ετικέτες των πεδίων με αυτό το πρόβλημα αλλάζουν για τον προσδιορισμό του προβληματικού πεδίου και εισάγονται στο έγγραφο σύνδεσμοι προς τα προβληματικά πεδία μετά το κουμπί υποβολής, έτσι ώστε ο χρήστης να μετακινηθεί προς αυτά μετά την εξαφάνιση της ειδοποίησης.
Ένας χρήστης προσπαθεί να υποβάλει μια φόρμα αλλά αμέλησε να εισάγει δεδομένα ή να ορίσει μια επιλογή σε ένα ή περισσότερα από τα υποχρεωτικά πεδία. Χρησιμοποιώντας την επικύρωση στην πλευρά του διακομιστή, εντοπίζεται η παράλειψη και η φόρμα επανεμφανίζεται με ένα μήνυμα κειμένου στην κορυφή, το οποίο ενημερώνει ποια υποχρεωτικά πεδία παραλείφθηκαν. Κάθε υποχρεωτικό πεδίο που παραλείφθηκε προσδιορίζεται με χρήση ετικέτας κειμένου, έτσι ώστε ο χρήστης να μην χρειάζεται να επιστρέψει στη λίστα στην κορυφή της φόρμας για να βρει τα πεδία που παραλείφθηκαν.
Ένας χρήστης συμπληρώνει μια φόρμα που περιέχει υποχρεωτικά πεδία. Οι ετικέτες των πεδίων υποδεικνύουν εάν είναι υποχρεωτικά ή όχι. Ο χρήστης μετακινείται με το πλήκτρο tab σε ένα υποχρεωτικό πεδίο και βγαίνει από το πεδίο χωρίς να εισάγει δεδομένα ή να ορίσει μια επιλογή. Ένα αρχείο εντολών στην πλευρά του πελάτη τροποποιεί την ετικέτα του πεδίου για να υποδείξει ότι είναι σφάλμα εάν μείνει κενό αυτό το πεδίο.
Σημείωση: Ορισμένα προγράμματα ανάγνωσης οθόνης ενδέχεται να μην παρατηρήσουν και ανακοινώσουν την αλλαγή της ετικέτας, έτσι, οι χρήστες αυτών ενδέχεται να μην γνωρίζουν για το σφάλμα.
Συμπληρώστε μια φόρμα, αφήνοντας εκουσίως κενά ένα ή περισσότερα απαιτούμενα (υποχρεωτικά) πεδία και υποβάλετέ τη.
Ελέγξτε ότι παρέχεται μήνυμα κειμένου που προσδιορίζει το/τα υποχρεωτικά πεδία που δεν έχουν συμπληρωθεί.
Το #2 είναι αληθές
Περιεχόμενο που συλλέγει δεδομένα εισόδου του χρήστη όπου την είσοδο πρέπει να αποτελεί ένα περιορισμένο σύνολο τιμών.
Αυτή η τεχνική σχετίζεται με:
Όταν οι χρήστες καταχωρούν δεδομένα εισόδου που έχουν επικυρωθεί και εντοπίζονται σφάλματα, πρέπει να περιγραφεί η φύση του σφάλματος στον χρήστη με τρόπο στον οποίο μπορούν να έχουν πρόσβαση. Μια προσέγγιση είναι η εμφάνιση ενός πλαισίου διαλόγου που περιγράφει πεδία με σφάλματα όταν ο χρήστης προσπαθεί να υποβάλει τη φόρμα. Μια άλλη προσέγγιση, εάν η επικύρωση πραγματοποιηθεί στον διακομιστή, είναι η επιστροφή της φόρμας (με τα δεδομένα του χρήστη ακόμα στα πεδία) και μια περιγραφή κειμένου στην κορυφή της σελίδας που υποδεικνύει ότι υπήρξε πρόβλημα επικύρωσης, περιγράφει τη φύση του προβλήματος και παρέχει τρόπους εύκολου εντοπισμού του/των πεδίων με το πρόβλημα. Το τμήμα "σε κείμενο" του Κριτηρίου Επιτυχίας υπογραμμίζει ότι δεν αρκεί μόνο να υποδειχθεί ότι υπάρχει πεδίο με σφάλμα τοποθετώντας έναν αστερίσκο στην ετικέτα ή κάνοντας την ετικέτα κόκκινη. Πρέπει να παρασχεθεί περιγραφή κειμένου του προβλήματος.
Όταν η είσοδος πρέπει να είναι μία τιμή από ένα σύνολο επιτρεπόμενων τιμών, η περιγραφή κειμένου πρέπει να υποδεικνύει αυτό το γεγονός. Πρέπει να περιλαμβάνει τη λίστα τιμών εάν είναι εφικτό ή να προτείνει την επιτρεπόμενη τιμή που είναι πλησιέστερη στην τιμή που καταχωρήθηκε.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας. Πριν ο χρήστης υποβάλει τη φόρμα, εμφανίζεται ένα πλαίσιο διαλόγου που περιγράφει τη φύση του σφάλματος, έτσι ώστε ο χρήστης να μπορεί να το διορθώσει.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας και υποβάλλει τη φόρμα. Ο διακομιστής επιστρέφει τη φόρμα με τα δεδομένα του χρήστη ακόμα στα πεδία και υποδεικνύει σε κείμενο με σαφήνεια στην κορυφή της σελίδας ότι υπάρχουν σφάλματα στα δεδομένα εισόδου. Το κείμενο περιγράφει τη φύση του/των σφαλμάτων και υποδεικνύει σαφώς ποιο πεδίο είχε πρόβλημα, ώστε ο χρήσης να μπορέσει να εκτελέσει πλοήγηση για διόρθωση του προβλήματος.
Καταχωρήστε άκυρα δεδομένα σε ένα πεδίο φόρμας.
Ελέγξτε ότι παρέχονται πληροφορίες σε κείμενο σχετικά με το πρόβλημα.
Το #2 είναι αληθές.
Περιεχόμενο που αποδέχεται δεδομένα εισόδου χρήστη, με περιορισμούς στη μορφή, την τιμή ή/και τον τύπο των δεδομένων εισόδου.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή βοήθειας στη διόρθωση σφαλμάτων εισόδου όπου οι πληροφορίες που παρέχονται από τον χρήστη δεν γίνονται αποδεκτές ως έγκυρες. Όταν οι χρήστες εισάγουν επικυρωμένα δεδομένα και εντοπιστούν σφάλματα εισόδου, παρέχονται πληροφορίες σχετικά με τη φύση και τη θέση του σφάλματος εισόδου σε κείμενο για να διευκολυνθεί ο προσδιορισμός του σφάλματος από τον χρήστη. Μία προσέγγιση είναι η χρήση επικύρωσης στην πλευρά του πελάτη και η παροχή ενός πλαισίου διαλόγου ειδοποίησης που περιγράφει το σφάλμα αμέσως μετά την καταχώρηση άκυρων δεδομένων στο πεδίο. Μια άλλη προσέγγιση, με χρήση επικύρωσης στην πλευρά του διακομιστή, είναι η επανεμφάνιση της φόρμας (με όσα δεδομένα καταχωρήθηκαν προηγουμένως) και μιας περιγραφής κειμένου στην κορυφή της σελίδας που υποδεικνύει ότι υπήρξε πρόβλημα επικύρωσης, περιγράφει τη φύση του προβλήματος και παρέχει τρόπους εύκολου εντοπισμού του/των πεδίων με το πρόβλημα.
Όπως και αν παρέχεται η περιγραφή κειμένου, πρέπει να γίνει ένα από τα παρακάτω για να βοηθηθεί ο χρήστης:
Παροχή παραδειγμάτων της σωστής καταχώρησης δεδομένων για το πεδίο,
Περιγραφή της σωστής καταχώρησης δεδομένων για το πεδίο,
Εμφάνιση τιμών της σωστής καταχώρησης δεδομένων που μοιάζουν με την καταχώρηση δεδομένων του χρήστη, με οδηγίες προς τον χρήστη για τον τρόπο εισαγωγής μίας από τις σωστές τιμές εάν ο χρήστης επιλέξει να κάνει κάτι τέτοιο.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας. Πριν ο χρήστης βγει από το πεδίο, εμφανίζεται ένα πλαίσιο διαλόγου ειδοποίησης που περιγράφει τη φύση του σφάλματος, έτσι ώστε ο χρήστης να μπορεί να το διορθώσει.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας και υποβάλλει τη φόρμα. Ο διακομιστής επιστρέφει τη φόρμα με τα δεδομένα του χρήστη ακόμα στα πεδία και υποδεικνύει σε κείμενο με σαφήνεια στην κορυφή της σελίδας ότι υπάρχουν σφάλματα εισόδου. Το κείμενο περιγράφει τη φύση του/των σφαλμάτων και υποδεικνύει σαφώς ποιο πεδίο είχε πρόβλημα, ώστε ο χρήσης να μπορέσει να εκτελέσει πλοήγηση για διόρθωση του προβλήματος.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας και προσπαθεί να υποβάλει τη φόρμα. Η δημιουργία αρχείου εντολών στην πλευρά του πελάτη εντοπίζει το σφάλμα, ακυρώνει την υποβολή και τροποποιεί το έγγραφο για την παροχή περιγραφής κειμένου μετά το κουμπί υποβολής περιγράφοντας το σφάλμα, με συνδέσμους προς το/τα πεδία με το σφάλμα. Το αρχείο εντολών τροποποιεί ακόμα τις ετικέτες των πεδίων με τα προβλήματα για να τα υπογραμμίσει.
Συμπληρώστε μια φόρμα, εισάγετε σκοπίμως δεδομένα εισόδου χρήστη που δεν συμφωνούν με την απαιτούμενη μορφή ή τιμές
Ελέγξτε ότι παρέχεται μια περιγραφή κειμένου που προσδιορίζει το πεδίο με το σφάλμα και παρέχει μερικές πληροφορίες σχετικά με τη φύση της άκυρης καταχώρΗσης και τον τρόπο διόρθωσής της.
Το #2 είναι αληθές
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Ο σκοπός αυτής της τεχνικής είναι η παροχή μιας σύνοψης σύνθετου περιεχομένου. Η περίληψη παρέχεται επιπλέον του αρχικού περιεχομένου.
Οι χρήστες με αναπηρίες που δυσκολεύονται να αποκωδικοποιήσουν λέξεις και προτάσεις είναι πιθανόν να έχουν πρόβλημα στην ανάγνωση και κατανόηση περίπλοκου κειμένου. Αυτή η τεχνική παρέχει μια σύντομη πρόταση των πιο σημαντικών ιδεών και πληροφοριών στο περιεχόμενο. Η περίληψη διαβάζεται πιο εύκολα διότι χρησιμοποιεί πιο σύντομες προτάσεις και πιο συνηθισμένες λέξεις από το αρχικό.
Πρέπει να ακολουθούνται τα παρακάτω βήματα για την προετοιμασία της περίληψης.
Προσδιορίστε τις πιο σημαντικές ιδέες και πληροφορίες στο περιεχόμενο.
Γράψτε μία ή περισσότερες παραγράφους που χρησιμοποιούν πιο σύντομες προτάσεις και πιο συνηθισμένες λέξεις για να εκφράσετε τις ίδιες ιδέες και πληροφορίες. (Ο αριθμός των παραγράφων εξαρτάται από το μήκος του αρχικού).
Μετρήστε την αναγνωσιμότητα της περίληψης.
Επεξεργαστείτε την περίληψη. Εξετάστε τη δυνατότητα κατάτμησης των μακρύτερων προτάσεων στα δύο ή αντικατάστασης πολυσύλλαβων ή ανοικείων λέξεων με πιο σύντομους, πιο συνηθισμένους όρους.
Επαναλάβετε τα βήματα 3 και 4, όπως είναι απαραίτητο.
Ένα άρθρο περιγράφει μια τεχνολογική καινοτομία. Το πρώτο στοιχείο μετά τον τίτλο του άρθρου είναι μια ενότητα με την επικεφαλίδα, "Περίληψη". Το μέσο μήκος των προτάσεων στην περίληψη είναι 16 λέξεις (σε σύγκριση με τις 23 για τις προτάσεις στο άρθρο) και χρησιμοποιούνται σύντομες, συνηθισμένες λέξεις αντί της τεχνικής γλώσσας του άρθρου. Εφαρμόζεται ένας τύπος αναγνωσιμότητας. Η περίληψη απαιτεί ικανότητα ανάγνωσης χαμηλότερη του επιπέδου κατώτερης δευτεροβάθμιας εκπαίδευσης.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε περίληψη που παρέχεται ως συμπληρωματικό περιεχόμενο:
Μετρήστε την αναγνωσιμότητα της περίληψης.
Ελέγξτε ότι η περίληψη απαιτεί ικανότητα ανάγνωσης χαμηλότερη του επιπέδου κατώτερης δευτεροβάθμιας εκπαίδευσης.
Το #2 είναι αληθές.
Κάθε τεχνολογία ήχου-βίντεο όπου υπάρχουν πράκτορες χρήστη που υποστηρίζουν κλειστές επεξηγήσεις.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου σε άτομα με περιορισμένη ακοή ή διαφορετικά αντιμετωπίζουν δυσκολία να ακούσουν τον διάλογο σε υλικό συγχρονισμένων μέσων, να είναι σε θέση να προβάλουν το υλικό και να δουν τον διάλογο και τους ήχους - χωρίς να απαιτείται από άτομα χωρίς κώφωση να παρακολουθούν τις επεξηγήσεις. Με αυτή την τεχνική, όλος ο διάλογος και οι σημαντικοί ήχοι ενσωματώνονται ως κείμενο με τρόπο που καθιστά το κείμενο μη ορατό εκτός εάν το ζητήσει ο χρήστης. Ως αποτέλεσμα, είναι ορατά μόνο όταν χρειάζεται. Αυτό απαιτεί ειδική υποστήριξη για επεξηγήσεις στον πράκτορα χρήστη.
ΣΗΜΕΙΩΣΗ: Οι επεξηγήσεις δεν πρέπει να συγχέονται με τους υπότιτλους. Οι υπότιτλοι παρέχουν κείμενο μόνο του διαλόγου και δεν περιλαμβάνουν σημαντικούς ήχους.
Παράδειγμα 1: Για να διασφαλιστεί ότι χρήστες με κώφωση μπορούν να χρησιμοποιήσουν αλληλεπιδραστικό εκπαιδευτικό υλικό, το κολέγιο παρέχει επεξηγήσεις και οδηγίες για ενεργοποίηση επεξηγήσεων για όλα τα ηχητικά αλληλεπιδραστικά εκπαιδευτικά προγράμματα.
Παράδειγμα 2: Οι ηλεκτρονικά διαθέσιμες ταινίες μέσα από ένα σημείο πώλησης πολυμέσων (media outlet) περιλαμβάνουν όλες επεξηγήσεις και παρέχονται σε μορφή που επιτρέπει την ενσωμάτωση κλειστών επεξηγήσεων.
Παράδειγμα 3: Παρέχονται ειδικά αρχεία επεξηγήσεων με πληροφορίες συγχρονισμού για υπάρχουσα ταινία. Υπάρχουν διαθέσιμες εφαρμογές αναπαραγωγής που εμφανίζουν τις επεξηγήσεις σε ξεχωριστό παράθυρο της οθόνης, συγχρονισμένες με το παράθυρο της ταινίας.
Παράδειγμα 4: Ένα βίντεο με ένα τοπικό συμβάν έχει επεξηγήσεις που μπορούν να αναπαραχθούν πάνω από το βίντεο ή σε ξεχωριστό παράθυρο ανάλογα με τη χρησιμοποιούμενη εφαρμογή αναπαραγωγής.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Οδηγίες για τη δημιουργία επεξηγήσεων
SMIL
Δημιουργία άλλων επεξηγήσεων
Ενεργοποιήστε το χαρακτηριστικό κλειστών επεξηγήσεων στην εφαρμογή αναπαραγωγής μέσων
Προβάλλετε το περιεχόμενο συγχρονισμένων μέσων
Ελέγξτε ότι οι επεξηγήσεις (για όλους τους διαλόγους και τους σημαντικούς ήχους) είναι ορατές
Το #3 είναι αληθές
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή περιγραφικού τίτλου σε κάθε Ιστοσελίδα. Οι περιγραφικοί τίτλοι βοηθούν τους χρήστες στην εύρεση περιεχομένου, τον προσανατολισμό εντός αυτού και την πλοήγηση σε αυτό. Ένας περιγραφικός τίτλος επιτρέπει σε έναν χρήστη να προσδιορίσει εύκολα ποια Ιστοσελίδα χρησιμοποιεί και πότε η Ιστοσελίδα αλλάζει. Είναι δυνατή η χρήση του τίτλου για τον προσδιορισμό της Ιστοσελίδας χωρίς να απαιτείται από τους χρήστες να διαβάσουν ή να ερμηνεύσουν περιεχόμενο σελίδας. Οι χρήστες μπορούν να προσδιορίσουν το περιεχόμενο που χρειάζονται πιο γρήγορα όταν εμφανίζονται ακριβείς, περιγραφικοί τίτλοι σε χάρτες ιστότοπων ή λίστες με αποτελέσματα αναζήτησης. Όταν χρησιμοποιούνται περιγραφικοί τίτλοι εντός του κειμένου συνδέσμου, βοηθούν τους χρήστες να πλοηγηθούν με μεγαλύτερη ακρίβεια στο περιεχόμενο για το οποίο ενδιαφέρονται.
Ο τίτλος κάθε Ιστοσελίδας θα πρέπει:
Να προσδιορίζει το θέμα της Ιστοσελίδας
Να βγάζει νόημα όταν διαβάζεται εκτός περιβάλλοντος, για παράδειγμα, από μια εφαρμογή ανάγνωσης οθόνης ή σε έναν χάρτη ιστότοπου ή σε μια λίστα με αποτελέσματα αναζήτησης
Να είναι σύντομος
Χρήσιμο θα είναι επίσης για τον τίτλο
Να προσδιορίζει τον τόπο ή άλλο πόρο στον οποίο ανήκει η Ιστοσελίδα
Να προσδιορίζει τον τόπο ή άλλο πόρο στον οποίο ανήκει η Ιστοσελίδα
Μια Ιστοσελίδα δημοσιεύεται από μια ομάδα στο πλαίσιο μιας μεγαλύτερης οργάνωσης Ο τίτλος της Ιστοσελίδας αρχικά προσδιορίζει το θέμα της σελίδας, στη συνέχεια εμφανίζει το όνομα ομάδας που ακολουθείται από το όνομα της γονικής οργάνωσης
Παράδειγμα κώδικα:
<title>Working with us: The Small Group: The Big Organization</title>
Μια παρουσίαση συγχρονισμένων μέσων για το τσουνάμι στη νότια Ασία το 2004 με τίτλο "Το τσουνάμι του 2004".
Μια Ιστοσελίδα παρέχει οδηγίες και προτάσεις για δημιουργία κλειστών επεξηγήσεων. Η Ιστοσελίδα είναι μέρος "δευτερεύοντος τόπου" εντός ενός μεγαλύτερου. Ο τίτλος χωρίζεται σε τρία μέρη με παύλες. Το πρώτο μέρος του τίτλου προσδιορίζει την οργάνωση. Το δεύτερο μέρος προσδιορίζει τον δευτερεύοντα τόπο στον οποίο ανήκει η Ιστοσελίδα. Το τρίτο μέρος προσδιορίζει την ίδια την Ιστοσελίδα. (Για ένα λειτουργικό παράδειγμα, δείτε την ενότητα "WGBH - Ομάδα Πρόσβασης Μέσων - Συχνές ερωτήσεις για επεξηγήσεις" (WGBH – Media Access Group – Captioning FAQ).)
Ένας ιστότοπος που επιτρέπει την προβολή μόνο των τίτλων της τρέχουσας έκδοσης της Ιστοσελίδας του "Εθνικά νέα, πρώτη σελίδα". Ένας ιστότοπος που επιτρέπει εκδόσεις από διαφορετικές ημερομηνίες να προβάλλουν τίτλους της Ιστοσελίδας του, "Εθνικά νέα, πρώτη σελίδα, 17 Οκτ., 2005".
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε ότι η Ιστοσελίδα έχει έναν τίτλο
Ελέγξτε ότι ο τίτλος περιγράφει το περιεχόμενο της Ιστοσελίδας.
Ελέγξτε ότι η Ιστοσελίδα μπορεί να προσδιοριστεί χρησιμοποιώντας τον τίτλο.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Σελίδες που συλλέγουν πληροφορίες από χρήστες και περιορίζουν τη μορφή που μπορεί να χρησιμοποιήσει ο χρήστης.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να βοηθήσει τον χρήστη να αποφύγει σφάλματα δεδομένων εισόδου μέσω της ενημέρωσής του για τους περιορισμούς σχετικά με τη μορφή των δεδομένων που πρέπει να καταχωρήσει. Αυτό επιτυγχάνεται μέσω της περιγραφής χαρακτηριστικών της μορφής ή της παροχής δείγματος της μορφής που πρέπει να έχουν τα δεδομένα.
Σημείωση: Για μορφές δεδομένων με κοινές παραλλαγές, όπως ημερομηνία και ώρα, ίσως είναι χρήσιμη η παροχή επιλογής προτίμησης, έτσι ώστε οι χρήστες να μπορούν να χρησιμοποιούν τη μορφή που τους εξυπηρετεί περισσότερο.
Το ακόλουθο στοιχείο ελέγχου μορφής HTML για ημερομηνία υποδεικνύει στην ετικέτα ότι η ημερομηνία πρέπει να έχει τη μορφή ημέρα-μήνας-έτος και όχι τη μορφή μήνας-ημέρα-έτος όπως μπορεί να υποθέσουν πολλοί χρήστες στις Ηνωμένες Πολιτείες.
Παράδειγμα κώδικα:
<label for="date">Date (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />
Προσδιορίστε στοιχεία ελέγχου φόρμας που θα δεχτούν δεδομένα εισόδου χρήστη μόνο σε συγκεκριμένη μορφή..
Καθορίστε εάν κάθε ένα από τα στοιχεία ελέγχου φόρμας που προσδιορίζονται στο 1 παρέχει πληροφορίες σχετικά με την αναμενόμενη μορφή.
Το #2 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες όπου το περιεχόμενο περιλαμβάνει λειτουργία.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε άτομα που βασίζονται το πληκτρολόγιο ή σε διεπαφή πληκτρολογίου να έχουν πρόσβαση στη λειτουργία του περιεχομένου. Για να γίνει αυτό, βεβαιωθείτε ότι όλες οι ρουτίνες χειρισμού συμβάντων που ενεργοποιήθηκαν από συμβάντα UI μη πληκτρολογίου, είναι επίσης συσχετισμένα με ένα συμβάν πληκτρολογίου ή παρέχουν πλεονάζοντες μηχανισμούς πληκτρολογίου για την ολοκλήρωση της λειτουργίας που παρέχεται από άλλες λειτουργίες για συσκευή.
Παράδειγμα 1: Χαρακτηριστικό μεταφοράς και απόθεσης Μια εφαρμογή φωτογραφίας περιλαμβάνει το χαρακτηριστικό "μεταφορά και απόθεση" για να επιτρέψει στους χρήστες την επαναταξινόμηση φωτογραφιών σε ένα ηλεκτρονικό άλμπουμ για προβολή ως παρουσίαση διαφανειών. Περιλαμβάνει επίσης ένα χαρακτηριστικό που επιτρέπει στους χρήστες να επιλέξουν μια φωτογραφία και να εκτελέσουν "αποκοπή" και "επικόλληση" των στοιχείων στη λίστα στο κατάλληλο σημείο με χρήση μόνο του πληκτρολογίου.
Παράδειγμα 2: Χαρακτηριστικό επαναταξινόμησης Μια εφαρμογή Ιστού που επιτρέπει στους χρήστες να δημιουργήσουν ερωτηματολόγιο με μεταφορά και τοποθέτηση ερωτήσεων, περιλαμβάνει μια λίστα ερωτήσεων που ακολουθούνται από ένα πεδίο κειμένου που επιτρέπει στους χρήστες να επαναταξινομήσουν ερωτήσεις όπως πρέπει, μέσω της καταχώρησης του επιθυμητού αριθμού ερώτησης.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
ελέγξτε ότι είναι δυνατή η πρόσβαση σε όλες τις λειτουργίες μέσω του πληκτρολογίου μόνο
Το #1 είναι αληθές
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει τον σκοπό ενός συνδέσμου στο κείμενο του συνδέσμου. Η περιγραφή επιτρέπει στον χρήστη να ξεχωρίσει αυτό το σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο. Το URI του προορισμού δεν είναι γενικώς επαρκώς περιγραφικό.
Παράδειγμα κώδικα:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Ελέγξτε ότι το κείμενο του συνδέσμου περιγράφει τον σκοπό του συνδέσμου
Ο παραπάνω έλεγχος είναι αληθής.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός εκτεταμένου εναλλακτικού κειμένου που εξυπηρετεί τον ίδιο σκοπό και παρουσιάζει τις ίδιες πληροφορίες με το αρχικό μη κειμενικό περιεχόμενο όταν δεν επαρκεί ένα σύντομο εναλλακτικό κειμένου.
Σε συνδυασμό με το σύντομο εναλλακτικό κειμένου, η εκτεταμένη περιγραφή πρέπει να μπορεί να αντικαθιστά το μη κειμενικό περιεχόμενο. Το σύντομο εναλλακτικό κειμένου προσδιορίζει το μη κειμενικό περιεχόμενο και το εκτεταμένο εναλλακτικό παρέχει τις πληροφορίες. Εάν το μη κειμενικό περιεχόμενο αφαιρεθεί από τη σελίδα και αντικατασταθεί με τη σύντομη και την εκτεταμένη περιγραφή, η σελίδα θα παρέχει και πάλι την ίδια λειτουργία και πληροφορίες.
Οι ακόλουθες ερωτήσεις είναι χρήσιμες για να αποφασίσετε τι θα πρέπει να βρίσκεται στα εναλλακτικά κειμένου.
Γιατί βρίσκεται εδώ αυτό το μη κειμενικό περιεχόμενο;
Ποιες πληροφορίες παρουσιάζει;
Ποιον σκοπό εξυπηρετεί;
Εάν δεν μπορούσα να χρησιμοποιήσω το μη κειμενικό περιεχόμενο, ποιες λέξεις θα χρησιμοποιούσα για να μεταφέρω την ίδια λειτουργία ή/και πληροφορίες;
Ένα γράφημα των πωλήσεων Οκτωβρίου έχει ένα σύντομο εναλλακτικό κειμένου "Γράφημα πωλήσεων Οκτωβρίου" Η εκτεταμένη περιγραφή λέει "Γράφημα ράβδων που δείχνει τις πωλήσεις τον Οκτώβριο. Υπάρχουν 6 πωλητές. Η Μαρία είναι πρώτη με 349 μονάδες. Ακολουθεί η Φράνσις με 301. Έπονται ο Χουάν με 256, η Σου με 250, ο Λι με 200 και ο Μαξ με 195. Πρωταρχική χρήση αυτού του γραφήματος είναι η εμφάνιση των κορυφαίων, άρα η περιγραφή ακολουθεί τη σειρά πωλήσεων."
Ένα γράφημα γραμμών που δείχνει τις μέσες θερμοκρασίες χειμώνα για τα τελευταία 10 χρόνια περιλαμβάνει το σύντομο εναλλακτικό κειμένου "Μέσες θερμοκρασίες χειμώνα 1996-2006." Η εκτεταμένη περιγραφή περιλαμβάνει τον πίνακα δεδομένων που χρησιμοποιήθηκε για τη δημιουργία του γραφήματος γραμμών.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Αφαιρέστε, αποκρύψτε ή καλύψτε το μη κειμενικό περιεχόμενο
Απεικονίστε την εκτεταμένη περιγραφή
Ελέγξτε ότι η εκτεταμένη περιγραφή μεταφέρει τις ίδιες πληροφορίες όπως και το μη κειμενικό περιεχόμενο
Το #3 είναι αληθές.
Κάθε τεχνολογία συγχρονισμένων μέσων, ακόμα και αυτές που δεν υποστηρίζουν κλειστές επεξηγήσεις.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με κώφωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να ακούσουν τον διάλογο σε οπτικοακουστικό υλικό, να είναι σε θέση να δουν το υλικό. Με αυτή την τεχνική, όλος ο διάλογος και οι σημαντικοί ήχοι ενσωματώνονται ως κείμενο στο απόσπασμα βίντεο. Κατά συνέπεια, είναι πάντα ορατοί και δεν απαιτείται ιδιαίτερη υποστήριξη για επεξηγήσεις από τον πράκτορα χρήστη.
ΣΗΜΕΙΩΣΗ: Οι επεξηγήσεις δεν πρέπει να συγχέονται με τους υπότιτλους. Οι υπότιτλοι παρέχουν κείμενο μόνο του διαλόγου και δεν περιλαμβάνουν σημαντικούς ήχους.
Προκειμένου να διασφαλιστεί ότι μπορεί ο καθένας να δει τις δικές του ηλεκτρονικά διαθέσιμες ταινίες, ακόμα και αν οι χρήστες δεν γνωρίζουν πώς να ενεργοποιήσουν τις επεξηγήσεις στην εφαρμογή αναπαραγωγής μέσων, μια συσχέτιση βιβλιοθήκης τοποθετεί τις επεξηγήσεις απευθείας μέσα στο βίντεο
Ένας ειδησεογραφικός οργανισμός παρέχει ανοικτές επεξηγήσεις για όλο του το υλικό.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(δεν περιλαμβάνεται καμία)
Παρακολουθήστε τα συγχρονισμένα μέσα με απενεργοποιημένες τις κλειστές λεζάντες.
Ελέγξτε ότι οι λεζάντες (για όλους τους διαλόγους και τους σημαντικούς ήχους) είναι ορατές.
Το #2 είναι αληθές
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η δημιουργία εναλλακτικού κειμένου που εξυπηρετεί τον ίδιο σκοπό και παρουσιάζει τις ίδιες πληροφορίες με το αρχικό μη κειμενικό περιεχόμενο. Κατά συνέπεια, είναι δυνατή η αφαίρεση του μη κειμενικού περιεχομένου και η αντικατάστασή του με το εναλλακτικό κειμένου, χωρίς καμία απώλεια σε λειτουργίες ή πληροφορίες. Αυτό το εναλλακτικό κειμένου δεν πρέπει απαραίτητα να περιγράψει το μη κειμενικό περιεχόμενο. Πρέπει να εξυπηρετεί τον ίδιο σκοπό και να μεταφέρει τις ίδιες πληροφορίες. Αυτό μερικές φορές μπορεί να έχει ως αποτέλεσμα ένα εναλλακτικό κειμένου που μοιάζει με περιγραφή του μη κειμενικού περιεχομένου. Αλλά αυτό θα ήταν αληθές εάν αυτός ήταν και ο καλύτερος τρόπος εξυπηρέτησης του ίδιου σκοπού.
Εάν είναι εφικτό, το σύντομο εναλλακτικό κειμένου πρέπει να μεταφέρει πλήρως τον σκοπό και τις πληροφορίες; Εάν αυτό δεν είναι δυνατό σε μια σύντομη φράση ή πρόταση, τότε το σύντομο εναλλακτικό κειμένου θα πρέπει να παρέχει μια σύντομη επισκόπηση των πληροφοριών. Ένα εκτεταμένο εναλλακτικό κειμένου θα χρησιμοποιηθεί επιπρόσθετα της μεταφοράς όλων των πληροφοριών.
Το εναλλακτικό κειμένου θα πρέπει να μπορεί να αντικαθιστά το μη κειμενικό περιεχόμενο.. Εάν το μη κειμενικό περιεχόμενο αφαιρεθεί από τη σελίδα και αντικατασταθεί με το κείμενο, η σελίδα θα παρέχει και πάλι την ίδια λειτουργία και πληροφορίες. Το εναλλακτικό κειμένου θα είναι σύντομο, αλλά όσο το δυνατόν πιο πληροφοριακό.
Η εξέταση των ακόλουθων ερωτήσεων είναι μια πολύ καλή ιδέα για να αποφασίσετε ποιο κείμενο θα συμπεριλάβετε στο εναλλακτικό.
Γιατί βρίσκεται εδώ αυτό το μη κειμενικό περιεχόμενο;
Ποιες πληροφορίες παρουσιάζει;
Ποιον σκοπό εξυπηρετεί;
Εάν δεν μπορούσα να χρησιμοποιήσω το μη κειμενικό περιεχόμενο, ποιες λέξεις θα χρησιμοποιούσα για να μεταφέρω την ίδια λειτουργία ή/και πληροφορίες;
Όταν μη κειμενικό περιεχόμενο περιέχει λέξεις που είναι σημαντικές για την κατανόηση του περιεχομένου, το κείμενο alt θα πρέπει να περιλαμβάνει αυτές τις λέξεις. Εάν το κείμενο στην εικόνα είναι περισσότερο από όσο μπορεί να χωρέσει σε ένα σύντομο εναλλακτικό κειμένου, τότε θα πρέπει να περιγραφεί στο σύντομο εναλλακτικό κειμένου και ένα εκτεταμένο εναλλακτικό κειμένου θα πρέπει επίσης να παρέχεται, καθώς και το πλήρες κείμενο.
Ένα κουμπί αναζήτησης χρησιμοποιεί την εικόνα ενός μεγεθυντικού φακού. Τα εναλλακτικά κειμένου είναι "αναζήτηση" και όχι "μεγεθυντικός φακός".
Μια εικόνα δείχνει πώς δένεται ένας κόμπος με βέλη που εμφανίζουν την τοποθέτηση των σκοινιών για τη δημιουργία ενός κόμπου. Το εναλλακτικό κειμένου περιγράφει πώς δένεται ο κόμπος και όχι με τι μοιάζει η εικόνα.
Μια εικόνα δείχνει την εικόνα ενός παιχνιδιού από μπροστά. Το εναλλακτικό κειμένου περιγράφει την μπροστινή όψη του παιχνιδιού.
Ένα κινούμενο σχέδιο εμφανίζει πώς γίνεται η αλλαγή ενός ελαστικού. Ένα σύντομο εναλλακτικό κειμένου περιγράφει τι αφορά το κινούμενο σχέδιο. Ένα εκτεταμένο εναλλακτικό κειμένου περιγράφει πώς αλλάζουμε ένα λάστιχο.
Εμφανίζεται ένα λογότυπο της εταιρείας TechTron δίπλα από κάθε προϊόν σε μια λίστα που αποτελείται από αυτά και έχει ένα σύντομο εναλλακτικό κειμένου που λέει , "TechTron."
Ένα γράφημα των πωλήσεων Οκτωβρίου έχει ένα σύντομο εναλλακτικό κειμένου "Γράφημα πωλήσεων Οκτωβρίου" Έχει επίσης μια εκτεταμένη περιγραφή που παρέχει όλες τις φωτογραφίες στο γράφημα.
Μια επικεφαλίδα περιέχει μια εικόνα των λέξεων, "Η ιστορία του πολέμου" με κείμενο με στυλ. Το κείμενο alt για την εικόνα είναι "Η ιστορία του πολέμου".
Μια εικόνα μιας σειράς από βιβλία σε ένα ράφι, περιέχει διαδραστικές περιοχές που παρέχουν τα μέσα πλοήγησης σε μια Ιστοσελίδα σχετικά με το συγκεκριμένο βιβλίο. Το εναλλακτικό κειμένου "Τα διαθέσιμα βιβλία προς αγορά σε αυτήν την ενότητα. Επιλέξτε ένα βιβλίο για περισσότερες λεπτομέρειες σχετικά με αυτό το βιβλίο." περιγράφει την εικόνα και τη διαδραστική φύση.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Αφαιρέστε, αποκρύψτε ή καλύψτε το μη κειμενικό περιεχόμενο
Αντικαταστήστε το με τo εναλλακτικό κειμένου
Ελέγξτε ότι δεν έχει χαθεί τίποτα (ο σκοπός του μη κειμενικού περιεχομένου καλύπτεται από το εναλλακτικό κειμένου)
Εάν το μη κειμενικό περιεχόμενο περιέχει λέξεις που είναι σημαντικές για την κατανόηση του περιεχομένου, οι λέξεις περιλαμβάνονται στο εναλλακτικό κειμένου.
Ελέγξτε ότι το #3 είναι αληθές. Εάν το μη κειμενικό περιεχόμενο περιέχει λέξεις που είναι σημαντικές για την κατανόηση του περιεχομένου, ο έλεγχος #4 είναι επίσης αληθής.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική χρησιμοποιείται όταν το κείμενο που πρέπει να εξυπηρετήσει τον ίδιο σκοπό και να παρουσιάσει τις ίδιες πληροφορίες με το αρχικό μη κειμενικό περιεχόμενο είναι υπερβολικά μεγάλο ή όταν δεν είναι δυνατή η επίτευξη μόνο με το κείμενο. Σε αυτή την περίπτωση, η τεχνική χρησιμοποιείται για την παροχή σύντομου εναλλακτικού κειμένου που περιγράφει συνοπτικά το μη κειμενικό περιεχόμενο. (Τότε παρέχεται ένα εκτεταμένο εναλλακτικό κειμένου χρησιμοποιώντας μια άλλη τεχνική, έτσι ώστε ο συνδυασμός να εξυπηρετήσει τον ίδιο σκοπό και να παρουσιάσει τις ίδιες πληροφορίες με το αρχικό μη κειμενικό περιεχόμενο.)
Η εξέταση των ακόλουθων ερωτήσεων είναι μια πολύ καλή ιδέα για να αποφασίσετε ποιο κείμενο θα συμπεριλάβετε στο εναλλακτικό.
Γιατί βρίσκεται εδώ αυτό το μη κειμενικό περιεχόμενο;
Ποιες πληροφορίες παρουσιάζει;
Ποιον σκοπό εξυπηρετεί;
Εάν δεν μπορούσα να χρησιμοποιήσω το μη κειμενικό περιεχόμενο, ποιες λέξεις θα χρησιμοποιούσα για να μεταφέρω την ίδια λειτουργία ή/και πληροφορίες;
Ένα γράφημα των πωλήσεων Οκτωβρίου έχει ένα σύντομο εναλλακτικό κειμένου "Γράφημα πωλήσεων Οκτωβρίου" Έχει επίσης μια εκτεταμένη περιγραφή που παρέχει όλες τις φωτογραφίες στο γράφημα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε για την παρουσία συντόμου εναλλακτικού κειμένου που παρέχει μια σύντομη περιγραφή του μη κειμενικού περιεχομένου.
Ελέγξτε ότι το #1 είναι αληθές.
Όλες οι τεχνολογίες που παρουσιάζουν περιγραφή μιας απόδοσης περιεχομένου στον χρήστη.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι τα στοιχεία εντός της Ιστοσελίδας παραπέμπονται στο περιεχόμενο όχι μόνο με βάση το σχήμα, το μέγεθος, τον ήχο ή τη θέση, αλλά και με τρόπους που δεν εξαρτώνται από την αισθητική αντίληψη. Για παράδειγμα, μια παραπομπή μπορεί επίσης να περιγράφει τη λειτουργία του στοιχείου ή της ετικέτας του.
Παρέχεται σε μια φόρμα ένα στρογγυλό κουμπί για την υποβολή της και για τη μετακίνηση στο επόμενο βήμα μιας διαδικασίας. Το κουμπί έχει ετικέτα με το κείμενο "μετάβαση". Οι οδηγίες λένε, "για να υποβάλετε τη φόρμα, πατήστε το στρογγυλό κουμπί με την ετικέτα μετάβαση". Αυτό περιλαμβάνει κειμενικές αλλά και πληροφορίες σχήματος για τον εντοπισμό του κουμπιού.
Οι οδηγίες για μια Ιστοσελίδα που παρέχει ηλεκτρονική εκπαίδευση λένε, "Χρησιμοποιήστε τη λίστα των συνδέσμων στα δεξιά με την επικεφαλίδα, "Κατάλογος τάξεων" για να μεταβείτε στο επιθυμητό ηλεκτρονικό μάθημα." Αυτή η περιγραφή παρέχει τη θέση, καθώς και τα κειμενικά στοιχεία που θα βοηθήσουν στην εύρεση της σωστής λίστας συνδέσμων.
Η ακόλουθη διάταξη τοποθετεί ένα κουμπί στην κάτω δεξιά γωνία και το υποδεικνύει με βάση τη θέση. Μια ένδειξη της ετικέτας κειμένου διασαφηνίζει ποιο κουμπί προορίζεται για χρήστες που έχουν πρόσβαση σε γραμμικοποιημένη έκδοση στην οποία η θέση δεν έχει σημασία.
Παράδειγμα κώδικα:
<table>
<tbody>
<tr>
<td colspan="2">Push the lower right [Preview] button.</td>
<td>
<span style="background: ButtonFace; color: ButtonText; border:
medium outset ButtonShadow;
width: 5em; display: block; font-weight: bold; text-align: center;">
Print</span>
</td>
</tr>
<tr>
<td>
<span style="background: ButtonFace; color: ButtonText; border:
medium outset ButtonShadow;
width: 5em; display: block; font-weight: bold; text-align: center;">
Cancel</span>
</td>
<td>
<span style="background: ButtonFace; color: ButtonText; border:
medium outset ButtonShadow;
width: 5em; display: block; font-weight: bold; text-align: center;">
OK</span>
</td>
<td>
<span style="background: ButtonFace; color: ButtonText; border:
medium outset ButtonShadow;
width: 5em; display: block; font-weight: bold; text-align: center;">
Preview</span>
</td>
</tr>
</tbody>
</table>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Βρείτε όλες τις παραπομπές στην Ιστοσελίδα που αναφέρουν το σχήμα, το μέγεθος και τη θέση ενός αντικειμένου. Για κάθε τέτοιο στοιχείο:
Ελέγξτε ότι η παραπομπή περιέχει πρόσθετες πληροφορίες που επιτρέπουν να εντοπιστεί το στοιχείο και να προσδιοριστεί χωρίς προηγούμενη γνώση του σχήματος, του μεγέθους ή της σχετικής του θέσης.
Ελέγξτε ότι το #1 είναι αληθές.
Κάθε τεχνολογία που περιέχει κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει διαθέσιμη την αναπτυγμένη μορφή μιας σύντμησης συσχετίζοντας την αναπτυγμένη μορφή με τη σύντμησή της την πρώτη φορά που εμφανίζεται σε μια Ιστοσελίδα. Το ανάπτυγμα κάθε σύντμησης μπορεί να βρεθεί με αναζήτηση της Ιστοσελίδας για την πρώτη χρήση.
Κατά τη διαδικασία συντόμευσης μιας λέξης, φράσης ή ονόματος μέσω σύντμησης, αρκτικόλεξου, ακρωνυμίου ή άλλης συντομευμένης μορφής, πρέπει να παράσχετε την πλήρη μορφή πριν την παροχή της συντετμημένης. Αυτό κάνει το κείμενο πιο εύκολο στην ανάγνωση και συνιστάται από πολλούς οδηγούς στυλ.
Σημειώστε ότι πολλές συντμήσεις απαιτούν εξήγηση αντί για ανάπτυξη. Αυτή η τεχνική δεν είναι κατάλληλη για τέτοιες συντμήσεις.
Αυτή η τεχνική εφαρμόζεται στην πρώτη εμφάνιση μιας σύντμησης σε κάθε Ιστοσελίδα. Κατά το συνδυασμό πολλαπλών πόρων σε μια μεμονωμένη Ιστοσελίδα, η σύντμηση θα αναπτυχθεί στην αρχή κάθε πόρου. Σε αυτή την περίπτωση, παρόλα αυτά, ίσως είναι πιο κατάλληλη η χρήση μιας διαφορετικής τεχνικής για την παροχή της αναπτυγμένης μορφής.
"Ο Ύπατος Αρμοστής των Ηνωμένων Εθνών για τα Ανθρώπινα Δικαιώματα (UNHCR) θεσπίστηκε το 1950 για την παροχή προστασίας και βοήθειας στους πρόσφυγες."
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε σύντμηση στο περιεχόμενο,
Αναζητήστε την πρώτη χρήση αυτής της σύντμησης στο συστατικό στοιχείο συγγραφής.
Ελέγξτε ότι η πρώτη χρήση έπεται αμέσως της αναπτυγμένης μορφής της σύντμησης.
Ελέγξτε ότι η αναπτυγμένη μορφή είναι η σωστή για τη χρήση της σύντμησης.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Ιστότοποι που συλλέγουν δεδομένα από χρήστες, τα οποία είναι συγκεκριμένα για τη στιγμή που υποβάλλονται, όπως δεδομένα εξέτασης, και δεν είναι δυνατή η αλλαγή τους αφού υποβληθούν.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή στους χρήστες ενός τρόπου που να διασφαλίζει ότι τα δεδομένα εισόδου είναι σωστά πριν την ολοκλήρωση μιας μη αναστρέψιμης συναλλαγής. Εφαρμογές εξέτασης, χρηματοοικονομικής και νομικής φύσης επιτρέπουν συναλλαγές που δεν μπορούν να "αναιρεθούν". Είναι συνεπώς σημαντικό να μην υπάρχουν σφάλματα στην υποβολή των δεδομένων, καθώς ο χρήστης δεν θα έχει την ευκαιρία να διορθώσει το σφάλμα αφού πραγματοποιηθεί η συναλλαγή.
Σε μια απλή φόρμα μίας σελίδας, αυτό είναι εύκολο διότι ο χρήστης μπορεί να προβεί σε προεπισκόπηση της σελίδας πριν την υποβολή. Σε φόρμα που εκτείνεται σε πολλαπλές Ιστοσελίδες, όμως, τα δεδομένα συλλέγονται από τον χρήστη σε πολλά βήματα πριν την πραγματοποίηση της συναλλαγής. Ο χρήστης μπορεί να μην θυμάται όλα τα δεδομένα που καταχωρήθηκαν σε προηγούμενα βήματα πριν το βήμα πραγματοποίησης της συναλλαγής.
Μία προσέγγιση είναι να αποθηκευτούν προσωρινά τα αποτελέσματα για κάθε ξεχωριστό βήμα και να επιτραπεί στον χρήστη να μετακινηθεί εμπρός και πίσω κατά βούληση προκειμένου να εξετάσει τα δεδομένα που καταχωρήθηκαν. Μια άλλη προσέγγιση είναι η παροχή μιας περίληψης όλων των δεδομένων που συλλέχθηκαν σε όλα τα βήματα για να τα εξετάσει ο χρήστης πριν την τελική οριστικοποίηση της συναλλαγής.
Πριν το τελικό βήμα οριστικοποίησης της συναλλαγής, παρέχονται οδηγίες που ενθαρρύνουν τον χρήστη να εξετάσει τα δεδομένα που καταχωρήθηκαν και να τα επιβεβαιώσει. Μόλις ο χρήστης τα επιβεβαιώσει, η συναλλαγή ολοκληρώνεται.
Μια ηλεκτρονική τραπεζική εφαρμογή παρέχει πολλαπλά βήματα για την ολοκλήρωση μιας μεταφοράς χρημάτων μεταξύ λογαριασμών ως εξής:
Επιλέξτε λογαριασμό για "μεταφορά από"
Επιλέξτε λογαριασμό για "μεταφορά προς"
Καταχωρήστε το ποσό της μεταφοράς
Παρέχεται μια περίληψη της συναλλαγής που δείχνει τους λογαριασμούς από και προς και το ποσό της μεταφοράς. Ο χρήστης μπορεί να επιλέξει ένα κουμπί για την ολοκλήρωση ή την ακύρωση της συναλλαγής.
Μια εφαρμογή εξέτασης παρέχει πολλαπλές σελίδες ερωτήσεων. Ανά πάσα στιγμή, ο χρήστης μπορεί να επιλέξει να επιστρέψει σε προηγούμενες συμπληρωμένες ενότητες για να εξετάσει και να αλλάξει τις απαντήσεις. Εμφανίζεται μια τελική σελίδα με κουμπιά για την υποβολή των απαντήσεων ή την εξέτασή τους.
Σε μια εφαρμογή εξέτασης ή σε εφαρμογή που προκαλεί χρηματοοικονομικές ή νομικές συναλλαγές και συλλέγει δεδομένα από χρήστες σε πολλαπλά βήματα:
Καθορίστε εάν ο χρήστης επιτρέπεται να επιστρέψει σε προηγούμενα βήματα για εξέταση και αλλαγή των δεδομένων.
Καθορίστε εάν παρέχεται περίληψη όλων των δεδομένων εισόδου από τον χρήστη πριν την πραγματοποίηση της συναλλαγής και παρέχεται μέθοδος για τη διόρθωση σφαλμάτων, εάν είναι απαραίτητο.
Είτε το #1, είτε το #2 είναι αληθές.
Περιεχόμενο στο οποίο οι ενέργειες χρήστη προκαλούν διαγραφή του περιεχομένου
Αυτή η τεχνική σχετίζεται με:
Όταν μια εφαρμογή Ιστού παρέχει τη δυνατότητα διαγραφής πληροφοριών, ο διακομιστής μπορεί να παράσχει ένα μέσο ανάκτησης των πληροφοριών που διαγράφηκαν κατά λάθος από ένα χρήστη. Μία προσέγγιση είναι η καθυστέρηση της διαγραφής των δεδομένων σημειώνοντάς τα απλά προς διαγραφή ή μετακινώντας τα σε ένα χώρο κράτησης (όπως κάδο απορριμμάτων) και περιμένοντας για κάποιο χρονικό διάστημα πριν την ουσιαστική διαγραφή τους. Στη διάρκεια αυτής της περιόδου, ο χρήστης μπορεί να ζητήσει την επαναφορά των δεδομένων ή να τα ανακτήσει από το χώρο κράτησης. Μια άλλη προσέγγιση είναι η εγγραφή όλων των συναλλαγών διαγραφής με τρόπο που να είναι δυνατή η επαναφορά των δεδομένων εάν ζητηθεί από τον χρήστη, όπως στην ιστορία επεξεργασίας που αποθηκεύεται στις βάσεις wiki και σε εφαρμογές ελέγχου κώδικα. Οι ανακτήσιμες πληροφορίες που αποθηκεύονται θα πρέπει να είναι εκείνες που θα χρειάζονται για τη διόρθωση της συναλλαγής.
Μια εφαρμογή Ιστού που επιτρέπει σε χρήστες να δημιουργήσουν φακέλους και να αποθηκεύσουν δεδομένα σε αυτούς. Κάθε φάκελος και στοιχείο δεδομένων συνοδεύεται από ένα τετράγωνο επιλογής για να σημειωθεί για κάποια ενέργεια και δύο κουμπιά, ένα για μετακίνηση και ένα για διαγραφή. Εάν ο χρήστης επιλέξει κατά λάθος το κουμπί διαγραφής, μπορεί να χαθούν τεράστια ποσά δεδομένων. Η εφαρμογή παρουσιάζει στον χρήστη αμέσως τα δεδομένα ως διαγραμμένα, αλλά προγραμματίζει την ουσιαστική τους διαγραφή σε μία εβδομάδα. Στη διάρκεια της εβδομάδας, ο χρήστης μπορεί να μεταβεί στον φάκελο "διαγραμμένα" και να ζητήσει την επαναφορά οποιουδήποτε φακέλου ή στοιχείου δεδομένων που αναμένει την ουσιαστική του διαγραφή.
Προσδιορίστε λειτουργία που επιτρέπει τη διαγραφή περιεχομένου
Διαγράψτε περιεχόμενο και προσπαθήστε να το επαναφέρετε.
Ελέγξτε εάν είναι δυνατή η επαναφορά διαγραμμένων πληροφοριών.
Το #3 είναι αληθές.
Όλες οι τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στους χρήστες να προσδιορίσουν το μη κειμενικό περιεχόμενο ακόμα και αν αυτό προορίζεται για την παροχή μιας συγκεκριμένης αισθητικής εμπειρίας. Για παράδειγμα, ένα κωφό άτομο μπορεί να θέλει να μάθει τι είναι ένα αρχείο ενόργανου ήχου - ακόμα και αν δεν μπορεί να το ακούσει. Ομοίως, ένα τυφλό άτομο μπορεί να θέλει να μάθει ποιο είναι το θέμα μιας οπτικής εικόνας - ακόμα και αν δεν μπορεί να τη δει.
Παράδειγμα 1: Ένας πίνακας της Μόνι Λίζα έχει το εναλλακτικό κείμενο "Μόνα Λίζα, του Λεονάρντο ντα Βίντσι"
Παράδειγμα 2: Ένα αρχείο ήχου έχει το εναλλακτικό κείμενο "5 μαθητές παίζουν Theramin".
Παράδειγμα 3: Ένα διάσημο έργο σύγχρονης τέχνης έχει ετικέτα "Κόκκινο, Μπλε και Κίτρινο, του Piet Mondrian"
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το εναλλακτικό κειμένου παρέχει ένα περιγραφικό όνομα
Ελέγξτε ότι το εναλλακτικό κειμένου παρέχει ένα όνομα που δόθηκε προηγουμένως στο μη κειμενικό περιεχόμενο από τον συγγραφέα ή άλλον.
Το #1 ή το #2 είναι αληθές.
Κάθε τεχνολογία που περιέχει κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ορισμού για κάθε λέξη που χρησιμοποιείται με ασυνήθιστο ή περιορισμένο τρόπο.
Μια λέξη χρησιμοποιείται με ασυνήθιστο ή περιορισμένο τρόπο όταν:
λεξικά δίνουν αρκετούς ορισμούς μιας λέξης αλλά πρέπει να χρησιμοποιηθεί ένας συγκεκριμένος ορισμός για να γίνει κατανοητό το περιεχόμενο,
πρέπει να χρησιμοποιηθεί ένας συγκεκριμένος ορισμός για να γίνει κατανοητό το περιεχόμενο και τα λεξικά χαρακτηρίζουν αυτόν τον ορισμό ως σπάνιο, αρχαϊκό, απαρχαιωμένο κ.λπ.,
ο συγγραφέας δημιουργεί ένα νέο ορισμό που πρέπει να χρησιμοποιηθεί για να γίνει κατανοητό το περιεχόμενο.
Αυτή η τεχνική μπορεί επίσης να χρησιμοποιηθεί για την παροχή ορισμών για τεχνική γλώσσα, δηλαδή, το εξειδικευμένο λεξιλόγιο που χρησιμοποιείται σε ένα συγκεκριμένο επάγγελμα ή τεχνικό πεδίο και είναι κατανοητό από ανθρώπους αυτού του πεδίου και όχι από τρίτους εκτός αυτού.
Η τεχνική μπορεί επίσης να χρησιμοποιηθεί για να οριστούν ιδιωματικές εκφράσεις. Για παράδειγμα, οι ομιλητές μιας γλώσσας που ζουν σε μια συγκεκριμένη περιοχή μπορεί να χρησιμοποιούν ιδιωματικές εκφράσεις που είναι αποδεκτές από όλους στην περιοχή, αλλά όχι από ανθρώπους άλλων περιοχών όπου ομιλείται η ίδια γλώσσα.
Η λέξη "τεχνολογία" χρησιμοποιείται ευρέως για να καλύψει τα πάντα, από τα λίθινα εργαλεία που χρησιμοποιούσαν οι πρώτοι άνθρωποι έως τις σύγχρονες ψηφιακές συσκευές, όπως τα κινητά τηλέφωνα. Όμως στο WCAG 2.0, η λέξη "τεχνολογία" χρησιμοποιείται με πιο περιορισμένο τρόπο: σημαίνει έναν μηχανισμό κωδικοποίησης οδηγιών για απόδοση, αναπαραγωγή ή εκτέλεση από πράκτορες χρήστη, συμπεριλαμβανομένων γλωσσών επισημείωσης, μορφών δεδομένων και γλωσσών προγραμματισμού, που χρησιμοποιούνται στην παραγωγή και παράδοση περιεχομένου Ιστού.
Η λέξη "αιθέρας" ορίζεται ως η ουσία που γεμίζει τον διαπλανητικό χώρο: "Πίστευε ότι ο ήχος ταξίδευε μέσα στον αιθέρα."
Η λέξη "οδηγός" ορίζεται ως το λογισμικό που περιέχει ειδικές οδηγίες για έναν εκτυπωτή: "Ίσως είναι απαραίτητο να ενημερώσεις τον οδηγό του εκτυπωτή σου."
Μερικοί άνθρωποι λένε "φτύνω τα φασόλια" (spill the beans) όταν εννοούν "αποκαλύπτω ένα μυστικό", π.χ. "Στο αστυνομικό τμήμα ο Τζο "έφτυσε τα φασόλια" σχετικά με το σχέδιο απαγωγής του πρωθυπουργού."
Αυτό το παράδειγμα χρησιμοποιεί παρένθεση για την παροχή του ορισμού μιας ιδιωματικής έκφρασης στα ιαπωνικά. Η φράση στα ιαπωνικά σημαίνει "πετάει ένα κουτάλι". Σημαίνει ότι δεν μπορούσε να κάνει κάτι άλλο και τελικά τα παράτησε.
ã•ã˜ã‚’投ã’る(ã©ã†ã™ã‚‹ã“ã¨ã‚‚ã§ããªããªã‚Šã€ã‚ãらã‚ã‚‹ã“ã¨ï¼‰ã€‚
Οι χρήστες ενδέχεται να μην κατανοούν το νόημα μιας άγνωστης λέξης που υιοθετήθηκε από μια άλλη γλώσσα: "Μην ανησυχείς, είναι ok (εντάξει)".
Στα Ιαπωνικά, το "Kata-kana" χρησιμοποιείται για υιοθετημένες, ξένες λέξεις. Εάν λέξεις είναι άγνωστες για τους χρήστες, παρέχετε το νόημα ή τη μετάφραση προκειμένου οι χρήστες να μπορούν να τις κατανοήσουν.
アクã‚"シビリティ(é"˜é½¢è€…ãƒ"障害者をå"む全ã¦ã®äººãŒåˆ©ç”¨ã§ãã‚‹ã“ã¨ï¼‰ã¯ã€Webサイトã"ä¸å¯æ¬ ã§ã‚る。
Ελληνική μετάφραση: Η "Προσβασιμότητα" (είναι προσβάσιμο από όλους τους χρήστες, συμπεριλαμβανομένων ατόμων με αναπηρία) είναι μια απαραίτητη πτυχή των ιστοτόπων.
レイアウトテーブãƒ"ã¨CSSã®ä½µç”¨ã‚’ãƒã‚¤ãƒ–リッド(複åˆåz‹ï¼‰ã¨ã„ã†ã€‚
Ελληνική μετάφραση: Η χρήση τόσο του πίνακα διάταξης, όσο και του CSS, ονομάζεται "υβριδική" (συνδυασμός πολλαπλών μορφών).
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη ή φράση που χρησιμοποιείται με ασυνήθιστο ή περιορισμένο τρόπο:
Ελέγξτε ότι παρέχεται ορισμός για τη λέξη ή τη φράση
Ελέγξτε ότι το #1 είναι αληθές.
Κάθε τεχνολογία που περιέχει κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή πληροφοριών που είναι απαραίτητες για την κατανόηση μιας σύντμησης.
Η σύντμηση είναι η συντομευμένη μορφή μιας λέξης, φράσης ή ονόματος. Για τις περισσότερες συντμήσεις, αρκεί η παροχή όλης της λέξης, φράσης ή ονόματος.
Μερικές συντμήσεις εκφράζουν λέξεις ή φράσεις που προέρχονται από ξένη γλώσσα. Για παράδειγμα, πολλές κοινές συντμήσεις στα αγγλικά προέρχονται από λατινικές φράσεις, όπως η σύντομη λίστα παραδειγμάτων που δίνεται παρακάτω. Η αναπτυγμένη μορφή παρέχεται μόνο ως πληροφορίες παρασκηνίου. Για αυτή την κατηγορία συντμήσεων, η παροχή μιας εξήγησης βοηθά περισσότερο από την αρχική αναπτυγμένη μορφή και η αναπτυγμένη μορφή της σύντμησης παρέχεται αντί του αναπτύγματος.
Συντομογραφία | Λατινική έκφραση | Εξήγηση |
---|---|---|
a.m. | ante meridiem | πριν το μεσημέρι, το πρωί |
p.m. | post meridiem | μετά το μεσημέρι, το απόγευμα |
e.g. | exempli gratia | για παράδειγμα |
cf | confer/conferatur | παράβαλε |
Εάν οι συντμήσεις δεν χρειάζονται επεξήγηση (για παράδειγμα, επειδή το αρχικό ανάπτυγμα απορρίφθηκε από την οργάνωση στην οποία αναφέρεται ή εάν η σύντμηση αποτελεί πλέον μέρος της γλώσσας), προβείτε στην παροχή εξήγησης, εάν πρέπει, ή χρησιμοποιήστε τη σύντμηση ως λέξη που δεν απαιτεί εξήγηση.
Μερικές συντμήσεις μπορεί να έχουν περισσότερες από μία σημασίες και η σημασία εξαρτάται από τα συμφραζόμενα. Για παράδειγμα, ADA σημαίνει "American Dental Association" (Αμερικάνικη Οδοντιατρική Ένωση) σε ένα περιβάλλον και "Νόμος για τους Αμερικανούς με αναπηρίες" σε άλλο. Πρέπει να δοθεί μόνο το ανάπτυγμα που είναι σχετικό με τα εκάστοτε περιβάλλον.
Στην ακόλουθη πρόταση, η εξήγηση "για παράδειγμα" θα δινόταν για το "π.χ.": Σπουδαστές που συμμετέχουν σε ομαδικά αθλήματα,π.χ. καλαθοσφαίριση ή ποδόσφαιρο, πρέπει να ρυθμίσουν το πρόγραμμά τους σύμφωνα με τις ώρες προπόνησης της ομάδας.
Μερικές γλώσσες (μεταξύ των οποίων η αγγλική και η ολλανδική) δανείστηκαν το ακρωνύμιο ABS (Antiblockiersystem: Σύστημα αντιεμπλοκής κατά την πέδηση) από τα γερμανικά. Παρέχεται εξήγηση (Σύστημα αντιεμπλοκής κατά την πέδηση) αντί αναπτύγματος
Τα παραδείγματα ακρωνυμίων που δεν έχουν πλέον ανάπτυγμα περιλαμβάνουν τα εξής:
το SIL, που σήμαινε Summer Institute of Linguistics (Θερινό Ινστιτούτο Γλωσσολογίας), αποτελεί πλέον όνομα από μόνο του. Δείτε την ενότητα "Ιστορία του SIL" (SIL history).
το IMS, που σήμαινε Instructional Management Systems (Εκπαιδευτικά συστήματα διαχείρισης), αποτελεί πλέον όνομα από μόνο του.
Για αυτή την κατηγορία παραδειγμάτων, αρκεί μια σύντομη εξήγηση του τι είναι ή κάνει ο οργανισμός.
Η ολλανδική φράση "'s nachts" που σημαίνει "τη νύκτα" αρχικά ήταν σύντμηση για το "des nachts". Στη σύγχρονη ολλανδική γλώσσα, η λέξη "des" χρησιμοποιείται πλέον σπάνια και εκλαμβάνεται ως αρχαϊκή. Η παροχή αναπτύγματος μπορεί να προκαλέσει σύγχυση. Δεν παρέχεται ανάπτυγμα για το "'s nachts".
Η αγγλική φράση "o'clock" αρχικά ήταν σύντμηση της φράσης "of the clock". Έκτοτε, η φράση "o'clock" έγινε μέρος της αγγλικής γλώσσας και δεν χρειάζεται το ανάπτυγμά της.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε σύντμηση στο περιεχόμενο,
Εάν η σύντμηση δεν έχει αναπτυγμένη μορφή, παρέχεται εξήγηση.
Εάν η αναπτυγμένη μορφή της σύντμησης βρίσκεται σε διαφορετική γλώσσα από το περιεχόμενο, παρέχεται εξήγηση.
Διαφορετικά, παρέχεται η αναπτυγμένη μορφή.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή οπτικών σχεδίων που βοηθούν τους χρήστες με δυσκολίες στην ανάγνωση να καταλάβουν ένα δύσκολο κείμενο που περιγράφει έννοιες ή διαδικασίες. Τα σχέδια παρέχονται επιπρόσθετα του κειμένου.
Οι χρήστες με αναπηρίες που δυσκολεύονται να αποκωδικοποιήσουν λέξεις και προτάσεις είναι πιθανόν να έχουν πρόβλημα στην ανάγνωση και κατανόηση περίπλοκου κειμένου. Γραφήματα, διαγράμματα, κινούμενα σχέδια, φωτογραφίες, γραφικά βοηθήματα ή άλλο οπτικό υλικό συχνά βοηθούν αυτούς τους χρήστες. Για παράδειγμα:
Γραφήματα και διαγράμματα βοηθούν τους χρήστες να καταλάβουν περίπλοκα δεδομένα.
Διαγράμματα, διαγράμματα ροής, βίντεο και κινούμενα σχέδια βοηθούν τους χρήστες να καταλάβουν διαδικασίες.
Εννοιολογικοί χάρτες και άλλα γραφικά βοηθήματα βοηθούν τους χρήστες να καταλάβουν πώς οι ιδέες σχετίζονται η μία με την άλλη.
Φωτογραφίες, σχεδιαγράμματα και βίντεο μπορούν να βοηθήσουν τους χρήστες να καταλάβουν φυσικά ή ιστορικά γεγονότα ή αντικείμενα.
Μια ετήσια αναφορά εξετάζει πολλούς παράγοντες που επηρέασαν την πορεία της εταιρείας το προηγούμενο έτος. Η αναφορά περιλαμβάνει επίσης γραφήματα και διαγράμματα που παρουσιάζουν τον τρόπο αλληλεπίδρασης αυτών των παραγόντων. Κάθε διάγραμμα ή γράφημα έχει εναλλακτικό κειμένου όπως απαιτείται από το Κριτήριο Επιτυχίας 1.1.1 (Success Criterion 1.1.1). Καθένα έχει επίσης έναν αριθμό στην επεξήγησή του (π.χ. "Εικόνα 7"). Αυτοί οι αριθμοί χρησιμοποιούνται στο κείμενο ως παραπομπή στα γραφήματα ή τα διαγράμματα.
Η ηλεκτρονική τεκμηρίωση για ένα προϊόν περιλαμβάνει οδηγίες βήμα-προς-βήμα. Κάθε βήμα περιγράφεται από ένα στιγμιότυπο οθόνης που δείχνει την οπτική εμφάνιση της οθόνης. Κάθε στιγμιότυπο οθόνης έχει εναλλακτικά κειμένου όπως απαιτείται από το κριτήριο επιτυχίας 1.1.1.
Ένας ιστότοπος μελετά το τσουνάμι του 2004. Ο τόπος περιγράφει τον τρόπο με τον οποίο το τσουνάμι χτύπησε διαφορετικές περιοχές στον Ινδικό Ωκεανό. Περιλαμβάνονται φωτογραφίες της καταστροφής σε κάθε περιοχή. Κάθε φωτογραφία έχει εναλλακτικό κειμένου όπως απαιτείται από το κριτήριο επιτυχίας 1.1.1. Ο ιστότοπος εξηγεί επίσης τι συμβαίνει κάτω από το νερό κατά τη διάρκεια ενός τσουνάμι. Η εξήγηση συνοδεύεται από κινούμενο σχέδιο που δείχνει πώς ένα τσουνάμι δημιουργείται και απλώνεται στον ωκεανό. Το κινούμενο σχέδιο έχει εναλλακτικό κειμένου όπως απαιτείται από το κριτήριο επιτυχίας 1.1.1.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Hall, T., and Strangman, N. CAST: Γραφικά βοηθήματα Ανακτήθηκε στις 5 Απριλίου 2005 από τις εκδόσεις NCAC (NCAC Publications). Αυτό το άρθρο περιγράφει αρκετά διαφορικά είδη γραφικών βοηθημάτων, εξηγεί πώς μπορεί να είναι χρήσιμος ο κάθε τύπος και συνοψίζει τα ερευνητικά ευρήματα ότι τα γραφικά βοηθήματα υποστηρίζουν την εκμάθηση, ειδικά σε φοιτητές με μαθησιακές δυσκολίες.
Tufte, Edward. Εξετάζοντας πληροφορίες. Cheshire, Conn.: Graphics Press. 1990.
Tufte, Edward. Η οπτική απεικόνιση ποσοτικών πληροφοριών. Cheshire, Conn.: Graphics Press. 1983.
Tufte, Edward. Οπτικές εξηγήσεις: εικόνες και ποσότητες, αποδείξεις και αφήγηση. Cheshire, Conn.: 1997.
(καμία δεν εμπεριέχεται στη λίστα)
Προσδιορίστε κείμενο που εξετάζει ιδέες ή διαδικασίες που πρέπει να γίνουν κατανοητές, προκειμένου να χρησιμοποιηθεί το περιεχόμενο.
Ελέγξτε εάν υπάρχουν φυσικά σχέδια διαθέσιμα στο περιεχόμενο ή μέσω συνδέσμων εντός του περιεχομένου.
Ελέγξτε ότι τα φυσικά σχέδια δείχνουν έννοιες ή διαδικασίες που εξετάζονται στο κείμενο.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Ιστοσελίδες που απαιτούν πιστοποίηση χρήστη και περιορίζουν τον διαθέσιμο χρόνο για υποβολή δεδομένων.
Αυτή η τεχνική σχετίζεται με:
Οι διακομιστές Ιστού που απαιτούν πιστοποίηση χρήστη συχνά τερματίζουν την περίοδο λειτουργίας μετά από μια χρονική περίοδο εάν δεν υπάρχει δραστηριότητα από τον χρήστη. Εάν ο χρήστης δεν είναι σε θέση να εισάγει δεδομένα αρκετά γρήγορα και ο χρόνος της περιόδου λειτουργίας λήγει πριν υποβληθούν, ο διακομιστής απαιτεί επαναπιστοποίηση προτού συνεχίσει. Όταν συμβαίνει αυτό, ο διακομιστής αποθηκεύει τα δεδομένα σε μια προσωρινή μνήμη ενώ ο χρήστης συνδέεται και, μετά την επαναπιστοποίηση, το δεδομένα καθίστανται διαθέσιμα από την προσωρινή μνήμη και πραγματοποιείται επεξεργασία της φόρμας σαν να μην υπήρχε λήξη του χρόνου σύνδεσης της περιόδου λειτουργίας. Ο διακομιστής δεν διατηρεί την προσωρινή μνήμη απεριόριστα, αλλά αρκετά ώστε να διασφαλίσει την επιτυχία μετά την επαναπιστοποίηση σε μια μεμονωμένη περίοδο λειτουργίας χρήστη, όπως μία ημέρα.
Ένας χρήστης συνδέθηκε για να χρησιμοποιήσει μια φόρμα και απαντά σε μήνυμα. Ο χρόνος που απαιτείται για να γράψει την απάντηση είναι μεγαλύτερος από τον χρόνο που επιτρέπει ο διακομιστής για μια περίοδο αδράνειας. Ο χρήστης υποβάλλει την απάντηση και ενημερώνεται για τη λήξη του χρόνου σύνδεσης. Του ζητείται να συνδεθεί ξανά, για να υποβάλει την απάντηση. Η απάντηση του χρήστη στο μήνυμα διατηρείται από τον διακομιστή και εάν ο χρήστης συνδεθεί με επιτυχία, η επεξεργασία της απάντησης πραγματοποιείται κανονικά. Εάν η σύνδεση δεν ολοκληρωθεί επιτυχώς, η απάντηση διαγράφεται.
Ο χρήστης συνδέθηκε σε μια ασφαλή περιοχή και συμπληρώνει μια φόρμα.. Ο χρόνος της περιόδου λειτουργίας λήγει για λόγους ασφαλείας. Τα δεδομένα της φόρμας διατηρούνται από τον διακομιστή και ο χρήστης ενημερώνεται για τη λήξη του χρόνου σύνδεσης και του ζητείται να συνδεθεί ξανά. Εάν ο χρήστης συνδεθεί σωστά, η φόρμα παρουσιάζεται στον χρήστη με όλα τα δεδομένα που καταχωρήθηκαν προηγουμένως και ο χρήστης μπορεί να υποβάλει τη φόρμα. Εάν η σύνδεση δεν ολοκληρωθεί επιτυχώς, τα δεδομένα της φόρμας διαγράφονται.
Σε έναν ιστότοπο που απαιτεί σύνδεση χρήστη για την υποβολή δεδομένων,
Συνδεθείτε και ξεκινήστε τη χρονομετρημένη δραστηριότητα.
Αφήστε την περίοδο λειτουργίας να λήξει.
Υποβάλλετε τα δεδομένα.
Εκτελέστε επαναπιστοποίηση.
Ελέγξτε ότι η διαδικασία μπορεί να συνεχίσει και να ολοκληρωθεί χωρίς απώλεια δεδομένων, συμπεριλαμβανομένων των αρχικών δεδομένων και τυχόν αλλαγών που έγιναν μετά την επαναπιστοποίηση.
Το #5 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας μεθόδου ενεργοποίησης αντικειμένων που είναι προβλέψιμα για τον χρήστη. Σύγχυση μπορεί να προκληθεί σε χρήστες με νοητικές αναπηρίες και άτομα που χρησιμοποιούν εφαρμογές ανάγνωσης οθόνης ή μεγεθυντές οθόνης από ένα απροσδόκητο συμβάν, όπως η αυτόματη υποβολή φόρμας ή η ενεργοποίηση μιας λειτουργίας που προκαλεί αλλαγή στο περιβάλλον.
Με αυτή την τεχνική, όλες οι αλλαγές θα ενεργοποιηθούν μόνο από συγκεκριμένη ενέργεια εκ μέρους του χρήστη. Επιπλέον, αυτή η ενέργεια συνήθως θα προκαλεί αλλαγές στο περιβάλλον, όπως το κλικ πάνω σε σύνδεσμο ή το πάτημα κουμπιού υποβολής. Ενέργειες που απλά μετακινούν την επισήμανση σε ένα στοιχείο δεν προκαλούν αλλαγή στο περιβάλλον
Μια σελίδα αναδύει ένα νέο παράθυρο μόνο όταν ο χρήστης κάνει κλικ (ή χρησιμοποιήσει το πλήκτρο διαστήματος) σε κουμπί αντί της χρήσης ενός συμβάντος onfocus για την ανάδυση ενός νέου παραθύρου.
Ένα κουμπί υποβολής χρησιμοποιείται για την μετακίνηση στην επόμενη οθόνη καταχώρησης δεδομένων αντί της αυτόματης εμφάνισης της επόμενης οθόνης όταν ο χρήστης μετακινηθεί με το πλήκτρο tab στο κουμπί "τέλος".
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Χρησιμοποιώντας πληκτρολόγιο, μετακινήστε την επισήμανση κυκλικά σε όλο το περιεχόμενο
Ελέγξτε ότι δεν συμβαίνουν αλλαγές στο περιβάλλον όταν κάποιο συστατικό στοιχείο επισημαίνεται.
Το #2 είναι αληθές
Οι τεχνολογίες επισημείωσης όταν είναι δυνατόν να προβάλουν το όνομα και τον ρόλο, επιτρέπουν ιδιότητες που ρυθμίζονται από τον χρήστη και να παράσχουν ειδοποιήσεις για τυχόν αλλαγές
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στην υποστηρικτική τεχνολογία να καταλάβει το περιεχόμενο Ιστού, έτσι ώστε να μπορεί να μεταφέρει ισοδύναμες πληροφορίες στον χρήστη μέσω εναλλακτικής διεπαφής χρήστη και να του επιτρέψει τη λειτουργία στοιχείων ελέγχου μέσω της ΑΤ.
Αυτή η τεχνική περιλαμβάνει τη χρήση τυποποιημένων, τεκμηριωμένων και υποστηριζόμενων χαρακτηριστικών για έκθεση αυτών των ιδιοτήτων σε AT. Βασίζεται στο γεγονός ότι αυτά τα τυποποιημένα στοιχεία ελέγχου σε βασικές εφαρμογές περιήγησης ικανοποιούν τις απαιτήσεις.
Για HTML, αυτές οι υποθέσεις είναι καλές. Είναι ίσως κατάλληλες και για μερικές άλλες τεχνολογίες.
Ακόμα και όταν τα συστατικά στοιχεία υποστηρίζουν προσβασιμότητα, είναι σημαντικό να παρέχονται μερικές πληροφορίες από τον συγγραφέα. Για παράδειγμα, ένα στοιχείο ελέγχου μπορεί να έχει τη δυνατότητα να παρέχει ένα όνομα, αλλά ο συγγραφέας πρέπει και πάλι να παράσχει το όνομα. Η παράμετρος ρόλου, όμως, ίσως παρέχεται ήδη εφόσον πρόκειται για τυποποιημένο συστατικό στοιχείο με σταθερό ρόλο.
Παράδειγμα 1: Μια ιστοσελίδα γραμμένη σε HTML ή XHTML χρησιμοποιεί τυποποιημένα στοιχεία ελέγχου φόρμας και καθορίζει το στοιχείο ελέγχου φόρμας με χρήση της παραμέτρου title. Ο πράκτορας χρήστη καθιστά διαθέσιμες πληροφορίες για αυτά τα στοιχεία ελέγχου, μεταξύ αυτών το όνομα, στην υποστηρικτική τεχνολογία μέσω DOM και μέσω API προσβασιμότητας συγκεκριμένης πλατφόρμας.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε την επισημείωση οπτικά ή με εργαλείο.
Ελέγξτε ότι χρησιμοποιείται η κατάλληλη επισημείωση, ώστε να είναι δυνατός ο καθορισμός του ονόματος και του ρόλου για κάθε συστατικό στοιχείο της διεπαφής χρήσης.
Ελέγξτε ότι χρησιμοποιείται η κατάλληλη επισημείωση, ώστε να είναι δυνατός ο έλεγχος όλων των συστατικών στοιχείων της διεπαφής χρήστη που δέχονται δεδομένα εισόδου χρήστη από την AT.
Τα βήματα #2 και #3 είναι αληθή για κάθε συστατικό στοιχείο διεπαφής χρήστη
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει τις ανακατευθύνσεις στην πλευρά του πελάτη χωρίς να προκαλείται σύγχυση στον χρήστη. Οι ανακατευθύνεις υλοποιούνται κατά προτίμηση στην πλευρά του διακομιστή (δείτε την ενότητα Εφαρμογή αυτόματων ανακατευθύνσεων στην πελυρά του διακομιστή αντί του πελάτη (SVR1: Implementing automatic redirects on the server side instead of on the client side) (ΔΙΑΚΟΜΙΣΤΗΣ) ), διότι μια ανακατεύθυνση στην πλευρά του διακομιστή δεν προκαλεί την εμφάνιση νέου περιεχομένου πριν στείλει ο διακομιστής το περιεχόμενο που βρίσκεται στο νέο URL. Όμως, οι συγγραφείς δεν έχουν πάντα τον έλεγχο των τεχνολογιών στην πλευρά του διακομιστή. Σε αυτή την περίπτωση, μπορούν να χρησιμοποιήσουν ανακατεύθυνση στην πλευρά του πελάτη. Μια ανακατεύθυνση στην πλευρά του πελάτη εφαρμόζεται με κώδικα μέσα στο περιεχόμενο που δίνει οδηγίες στον πράκτορα χρήστη να ανακτήσει περιεχόμενο από διαφορετικό URL. Είναι σημαντικό η σελίδα ή η Ιστοσελίδα ανακατεύθυνσης να περιέχει μόνο πληροφορίες που είναι σχετικές με την ανακατεύθυνση.
Σε HTML 4.x και XHTML 1.x, είναι δυνατή η εφαρμογή ανακατεύθυνσης στην πλευρά του πελάτη με χρήση του στοιχείου meta
: δείτε την ενότητα Χρήση ανανέωσης στοιχείου meta για δημιουργία στιγμιαίας ανακατεύθυνσης στην πλευρά του πελάτη (H76: Using meta refresh to create an instant client-side redirect) (HTML) .
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε κάθε σύνδεσμο ή παραπομπή μέσω προγραμματισμού προς άλλη σελίδα ή Ιστοσελίδα.
Για κάθε σύνδεσμο ή παραπομπή μέσω προγραμματισμού, ελέγξτε εάν η Ιστοσελίδα που παραπέμπεται περιέχει κώδικα (π.χ. στοιχείο meta ή αρχείο εντολών) που προκαλεί ανακατεύθυνση στην πλευρά του πελάτη.
Για κάθε σύνδεσμο ή παραπομπή μέσω προγραμματισμού που προκαλεί ανακατεύθυνση στην πλευρά του πελάτη, ελέγξτε εάν η ανακατεύθυνση εφαρμόζεται χωρίς χρονικό όριο σύνδεσης και ότι η σελίδα περιέχει μόνο πληροφορίες που είναι σχετικές με την ανακατεύθυνση.
Το βήμα 2 είναι ψευδές ή το βήμα 3 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν εικόνες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι όταν χρησιμοποιούνται διαφορές χρώματος για τη μεταφορά πληροφοριών εντός μη κειμενικού περιεχομένου, περιλαμβάνονται πρότυπα για τη μεταφορά των ίδιων πληροφοριών με τρόπο που δεν εξαρτάται από το χρώμα.
Ένας ιστότοπος μεσιτικής εταιρείας παρέχει ένα γράφημα ράβδων με τις μέσες τιμές κατοικιών σε διάφορες περιοχές των Ηνωμένων Πολιτειών. Η ράβδος για κάθε περιοχή εμφανίζεται με διαφορετικό συμπαγές χρώμα και διαφορετικό πρότυπο. Υπάρχει επαρκής αντίθεση μεταξύ του συμπαγούς και του χρώματος προτύπου για την ικανοποίηση του Κριτηρίου Επιτυχίας 1.4.1. Το υπόμνημα χρησιμοποιεί τα ίδια χρώματα και πρότυπα για τον προσδιορισμό κάθε ράβδου.
Ένας ηλεκτρονικός χάρτης ενός συστήματος μεταφορών εμφανίζει κάθε διαδρομή με διαφορετικό χρώμα. Οι στάσεις κάθε διαδρομής σημειώνονται με ένα ευδιάκριτο εικονίδιο, όπως ρόμβο, τετράγωνο ή κύκλο για τη διαφοροποίηση κάθε διαδρομής.
Ένα διάγραμμα ροής περιγράφει ένα σύνολο επαναλαμβανόμενων βημάτων για την ολοκλήρωση μιας διαδικασίας. Χρησιμοποιεί διάστικες με παύλες γραμμές βέλους με πράσινο παρασκήνιο για να σημειώσει το επόμενο βήμα στη διαδικασία όταν ικανοποιείται η συγκεκριμένη συνθήκη Χρησιμοποιεί διάστικες γραμμές βέλους με κόκκινο παρασκήνιο για να σημειώσει το επόμενο βήμα στη διαδικασία όταν δεν ικανοποιείται η συγκεκριμένη συνθήκη Υπάρχει επαρκής αντίθεση μεταξύ των χρωμάτων γραμμής και παρασκηνίου που ικανοποιεί το κριτήριο επιτυχίας 1.4.1.
Το περιεχόμενο περιλαμβάνει ένα αλληλεπιδραστικό παιχνίδι. Τα πούλια του παιχνιδιού για τους 4 παίκτες διακρίνονται μεταξύ τους χρησιμοποιώντας τόσο το χρώμα, όσο και το μοτίβο.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε εικόνα εντός της Ιστοσελίδας που χρησιμοποιεί διαφορές χρώματος για τη μεταφορά πληροφοριών:
Ελέγξτε ότι όλες οι πληροφορίες που μεταφέρονται με χρήση χρώματος, μεταφέρονται επίσης με χρήση προτύπων που δεν βασίζονται σε χρώμα.
Ελέγξτε ότι το #1 είναι αληθές.
Κάθε τεχνολογία που περιέχει κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ορισμού εντός του περιβάλλοντος για κάθε λέξη που χρησιμοποιείται με ασυνήθιστο ή περιορισμένο τρόπο. Ο ορισμός παρέχεται στο κείμενο, είτε πριν, είτε μετά από τη λέξη που χρησιμοποιείται. Ο ορισμός μπορεί να περιλαμβάνεται στην ίδια πρόταση με τη λέξη που ορίζεται ή σε ξεχωριστή πρόταση.
Πίστευε ότι ο ήχος ταξίδευε μέσα στον αιθέρα, που θεωρούνταν η ουσία που γέμιζε το διαπλανητικό χώρο.
Ίσως είναι απαραίτητο να ενημερώσετε τον οδηγό για τον εκτυπωτή σας (ο οδηγός είναι λογισμικό που περιέχει ειδικές οδηγίες για τον εκτυπωτή σας).
Ορισμός: Οι λέξεις κλειδιά: πρέπει, δεν πρέπει, απαιτούμενος, θα, δεν θα, πρέπει, δεν πρέπει, συνιστάται, ίσως και προαιρετικά, σε αυτή την προδιαγραφή πρέπει να ερμηνευτούν όπως προβλέπεται στο RFC 2119 (RFC 2119).
Αυτό το παράδειγμα χρησιμοποιεί παρενθέσεις για την παροχή του ορισμού μιας ιδιωματικής έκφρασης στα ιαπωνικά. Η φράση στα ιαπωνικά σημαίνει "πετάει ένα κουτάλι". Σημαίνει ότι δεν μπορούσε να κάνει κάτι άλλο και τελικά τα παράτησε.
ã•ã˜ã‚’投ã’る(ã©ã†ã™ã‚‹ã“ã¨ã‚‚ã§ããªããªã‚Šã€ã‚ãらã‚ã‚‹ã“ã¨ï¼‰ã€‚
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη ή φράση που χρησιμοποιείται με ασυνήθιστο ή περιορισμένο τρόπο:
Ελέγξτε ότι η λέξη ορίζεται σε κείμενο είτε πριν, είτε μετά την πρώτη εμφάνιση της λέξης.
Ελέγξτε ότι το #1 είναι αληθές.
Γλώσσες επισημείωσης, συμπεριλαμβανομένων των HTML 4.01, XHTML 1.x
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να προσθέσει επισημείωση στη δομή του περιεχομένου Ιστού με χρήση των κατάλληλων σημασιολογικών στοιχείων. Με άλλα λόγια, τα στοιχεία χρησιμοποιούνται σύμφωνα με το νόημα τους, όχι λόγω του τρόπου που εμφανίζονται οπτικά.
Χρησιμοποιώντας τα κατάλληλα σημασιολογικά στοιχεία διασφαλίζεται ότι η δομή είναι διαθέσιμη στον πράκτορα χρήστη. Αυτό περιλαμβάνει ρητά την υπόδειξη του ρόλου που έχουν διαφορετικές μονάδες στην κατανόηση του νοήματος του περιεχομένου. Η φύση ενός τμήματος περιεχομένου, όπως παραγράφου, κεφαλίδας, κειμένου με έμφαση, πίνακα κ.λπ. μπορεί να υποδειχθεί με αυτό τον τρόπο. Σε ορισμένες περιπτώσεις, πρέπει επίσης να υποδεικνύονται οι σχέσεις μεταξύ μονάδων περιεχομένου, όπως μεταξύ επικεφαλίδων και υποκεφαλίδων ή μεταξύ των κελιών ενός πίνακα. Ο πράκτορας χρήστη μπορεί έπειτα να κάνει αντιληπτή τη δομή στον χρήστη, για παράδειγμα χρησιμοποιώντας μια διαφορετική οπτική παρουσίαση για διαφορετικούς τύπους δομών, ή μια διαφορετική φωνή ή τόνο σε μια ακουστική παρουσίαση.
Σε HTML, για παράδειγμα, στοιχεία επιπέδου φράσης όπως em
, abbr
και cite
προσθέτουν σημασιολογικές πληροφορίες εντός προτάσεων, σημειώνοντας κείμενο για έμφαση και προσδιορίζοντας συντμήσεις και παραθέματα αντίστοιχα. Η MathML, μια γλώσσα επισημείωσης που σχεδιάστηκε για να διατηρεί σημαντικές διακρίσεις μεταξύ δομής και παρουσίασης σε μαθηματικά, περιλαμβάνει ειδική επισημείωση "παρουσίασης" για τις περίπλοκες παραστάσεις που αναπαριστούν μαθηματικές ιδέες καθώς και (σημασιολογική) επισημείωση "περιεχομένου" για τις ίδιες τις μαθηματικές ιδέες.
Μια παράγραφος περιέχει έναν υπερσύνδεσμο προς άλλη σελίδα. Ο υπερσύνδεσμος έχει επισημείωση με χρήση του στοιχείου a
.
Παράδειγμα κώδικα:
<p>Do you want to try our new tool yourself? A free
demonstration version is available in our
<a href="download.html">download section</a></p>
Μια σελίδα για την ιστορία του γάμου χρησιμοποιεί ένα παράθεμα από το μυθιστόρημα της Τζέιν Όστιν, Περηφάνια και προκατάληψη, ως παράδειγμα. Η αναφορά στο βιβλίο έχει επισημείωση με χρήση του στοιχείου cite
και το ίδιο το παράθεμα έχει επισημείωση με χρήση του στοιχείου blockquote
.
Παράδειγμα κώδικα:
<p>Marriage was considered a logical step for a bachelor,
as can be seen in the first chapter of the novel
<cite>Pride and Prejudice</cite>:</p>
<blockquote>
<p>It is a truth universally acknowledged, that a single man in
possession of a good fortune, must be in want of a wife.</p>
<p>However little known the feelings or views of such a man may
be on his first entering a neighbourhood, this truth is so well
fixed in the minds of the surrounding families, that he is considered
the rightful property of some one or other of their daughters.</p>
</blockquote>
Το εγχειρίδιο ενός αυτοκινήτου εξηγεί πώς ξεκινά η μηχανή. Οι οδηγίες περιλαμβάνουν μια προειδοποίηση για να επιβεβαιωθεί ότι η ταχύτητα είναι στο ουδέτερο. Ο συγγραφέας αισθάνεται ότι η προειδοποίηση είναι τόσο σημαντική που πρέπει να έχει έμφαση και έτσι η προειδοποίηση έχει επισημείωση με χρήση του στοιχείου strong
.
Παράδειγμα κώδικα:
<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear
is in neutral</strong>. Next, turn the key in the ignition.
The engine should start.</p>
Αυτό το παράδειγμα δείχνει πώς χρησιμοποιούνται τα στοιχεία em
και strong
για να δοθεί έμφαση σε κείμενο.
Παράδειγμα κώδικα:
<p>What she <em>really</em> meant to say was,
"This is not ok, it is <strong>excellent</strong>!"</p>
Παράδειγμα κώδικα:
<style type="text/css">
.vocab {
background-color:cyan;
font-style:normal;
}
</style>
.......
<p>New vocabulary words are emphasized and highlighted
with a cyan background</p>
<p>The <em class="vocab">scathing </em> review of the play
seemed a bit too harsh. .... </p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Προδιαγραφή HTML 4.01, με χρήση στοιχείων phrase (HTML 4.01 specification, using phrase elements)
Το βιβλίο του Jeffrey Zeldman, "Σχεδίαση με πρότυπα Ιστού" ("Designing with Web standards")
Το άρθρο του Web Design Group, "Στυλ εγγράφου: χρησιμοποιώντας τη σωστή ετικέτα" ("Document style: Use the right tag for the job")
Ελέγξτε εάν υπάρχουν μέρη του περιεχομένου με σημασιολογική λειτουργία.
Για κάθε μέρος με σημασιολογική λειτουργία, εάν υπάρχει αντίστοιχη σημασιολογική επισημείωση στην τεχνολογία, ελέγξτε ότι το περιεχόμενο έχει σημανθεί με χρήση αυτή της σημασιολογικής επισημείωσης.
Ελέγξτε ότι το #2 είναι αληθές.
Τεχνολογίες που υποστηρίζουν παραλλαγές στην οπτική παρουσίαση κειμένου.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι οι πληροφορίες που μεταφέρονται μέσω παραλλαγών στην μορφοποίηση κειμένου, μεταφέρονται και σε κείμενο. Όταν η οπτική εμφάνιση κειμένου ποικίλλει για τη μεταφορά πληροφοριών, δηλώστε ρητά τις πληροφορίες στο κείμενο. Παραλλαγές στην οπτική εμφάνιση γίνονται με αλλαγές στον τύπο της γραμματοσειράς, το μέγεθός της, την υπογράμμιση, τη διαγραφή και σε άλλες παραμέτρους κειμένου. Όταν αυτοί οι τύπο παραλλαγών μεταφέρουν πληροφορίες, αυτές πρέπει να είναι διαθέσιμες και αλλού στο περιεχόμενο μέσω κειμένου. Για τη μεταφορά πληροφοριών, μπορεί επίσης να χρησιμοποιηθεί η συμπερίληψη πρόσθετων ενοτήτων σε έγγραφο ή μιας εμβόλιμης περιγραφής εκεί όπου εμφανίζεται η παραλλαγή στην παρουσίαση.
Όταν μια πρόταση στο αρχικό έγγραφο περιέχει μια λέξη ή φράση που πρέπει να χρησιμοποιηθεί στην περίληψη, η λέξη ή φράση εμφανίζεται με διαφορετική γραμματοσειρά από την υπόλοιπη πρόταση. Μια ξεχωριστή ενότητα εμφανίζει επίσης σε λίστα όλες τις λέξεις και φράσεις που πρέπει να χρησιμοποιηθούν στην περίληψη.
Ένα ηλεκτρονικό έγγραφο έχει περάσει από πολλά προσχέδια. Οι εισαγωγές έχουν υπογράμμιση και οι αφαιρέσεις διαγραφή. Στο τέλος του προσχεδίου, υπάρχει ένα "ιστορικό αλλαγών" όπου εμφανίζεται λίστα με όλες τις αλλαγές που έγιναν σε κάθε προσχέδιο.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Βρείτε στοιχεία όπου χρησιμοποιούνται παραλλαγές στην παρουσίαση για τη μεταφορά πληροφοριών.
Για αυτά τα στοιχεία, ελέγξτε εάν οι πληροφορίες που μεταφέρονται οπτικά, δηλώνονται ρητά και σε κείμενο.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει διαθέσιμη την προφορά μιας λέξης παρέχοντας την προφορά μετά τη λέξη τουλάχιστον την πρώτη φορά που εμφανίζεται σε μια Ιστοσελίδα.
Όταν μια Ιστοσελίδα περιέχει λέξεις με την ίδια ορθογραφία αλλά διαφορετική προφορά, αυτή η τεχνική δεν είναι κατάλληλη για την παροχή της προφοράς εκτός εάν παρέχεται σε κάθε εμφάνιση.
Αυτή η τεχνική εφαρμόζεται στην πρώτη εμφάνιση μιας σύντμησης σε κάθε Ιστοσελίδα. Κατά το συνδυασμό πολλαπλών πόρων σε μία μεμονωμένη Ιστοσελίδα, η σύντμηση θα αναπτυχθεί στην αρχή κάθε πόρου. Σε αυτή την περίπτωση, ίσως είναι πιο κατάλληλη η χρήση μιας διαφορετικής τεχνικής για την παροχή της αναπτυγμένης μορφής.
Στο ακόλουθο παράδειγμα ιαπωνικού κειμένου, η πληροφορία της προφοράς των χαρακτήρων Han (Kanji) αποδίδεται σε παρένθεση αμέσως μετά το κείμενο.
Παράδειγμα κώδικα:
<p> æ…¶æ‡‰å¤§å¦ (ã‘ã„ãŠã†ã ã„ãŒã) </p>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη που απαιτεί πληροφορίες προφοράς:
Αναζητήστε την πρώτη χρήση αυτής της λέξης στην Ιστοσελίδα.
Ελέγξτε ότι η πρώτη χρήση ακολουθείται αμέσως από την προφορά της λέξης.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες που περιλαμβάνουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστεί η προφορά μιας λέξης διαθέσιμη μέσω της παροχής πληροφοριών σχετικά με την προφορά είτε εντός της ίδιας Ιστοσελίδας, είτε σε διαφορετική Ιστοσελίδα και δημιουργώντας έναν σύνδεσμο μεταξύ του στοιχείου και της προφοράς του.
Μια λέξη συνδέεται με την καταχώρησή της σε λεξικό που περιλαμβάνει πληροφορίες προφοράς.
Μια λέξη συνδέεται με ένα αρχείο ήχου που παρέχει τη σωστή προφορά.
Μια λέξη συνδέεται με την καταχώρησή της σε λεξικό προφοράς.
Μια λέξη συνδέεται με την αναπαράσταση της προφοράς της στη βάση του Διεθνούς Φωνητικούς Αλφαβήτου (International Phonetic Alphabet - (IPA).
Μια λέξη συνδέεται με μια μονοσήμαντη φωνητική ορθογραφία της προφοράς.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη που απαιτεί πληροφορίες προφοράς:
Ελέγξτε ότι τουλάχιστον η πρώτη εμφάνιση του στοιχείου είναι σύνδεσμος.
Ελέγξτε ότι κάθε σύνδεσμος μεταβαίνει σε πληροφορίες σχετικά με την προφορά του στοιχείου.
Όλοι οι έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες που υποστηρίζουν χρώμα και κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να συνδυάσει στοιχεία χρώματος και κειμένου ή χαρακτήρων για τη μεταφορά πληροφοριών. Οι περισσότεροι χρήστες μπορούν γρήγορα να σαρώσουν το περιεχόμενο για να εντοπίσουν πληροφορίες που μεταφέρονται με τη χρήση διαφορών χρώματος. Οι χρήστες που δεν μπορούν να δουν το χρώμα, μπορούν να δουν ή να ακούσουν στοιχεία κειμένου. Άτομα που χρησιμοποιούν ανάγλυφες (braille) οθόνες ή άλλες απτικές διεπαφές μπορούν να εντοπίσουν στοιχεία κειμένου με την αφή.
Οι οδηγίες για μια ηλεκτρονική φόρμα λένε , "Τα απαιτούμενα πεδία εμφανίζονται σε κόκκινο και έχουν την ένδειξη (required)." Το στοιχείο "(required)" περιλαμβάνεται στο στοιχείο label
.
Παράδειγμα κώδικα:
<label for="lastname" class="required">Last name(required):</label>
<input id="lastname" type="text" size="25" value=""/>
.required {
color=red;
}
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε περιεχόμενο όπου χρησιμοποιούνται διαφορές χρώματος για τη μεταφορά πληροφοριών:
Ελέγξτε ότι οι ίδιες πληροφορίες είναι διαθέσιμες μέσω στοιχείων κειμένου ή χαρακτήρων.
Ελέγξτε ότι το #1 είναι αληθές.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού παράκαμψης μπλοκ υλικού, μεταπηδώντας στο τέλος του μπλοκ. Ο πρώτος σύνδεσμος στο μπλοκ ή ο σύνδεσμος που προηγείται ακριβώς πριν από το μπλοκ, μεταφέρει την επισήμανση στο περιεχόμενο αμέσως μετά το μπλοκ. Η ενεργοποίηση του συνδέσμου προχωρεί την επισήμανση πληκτρολογίου μετά το μπλοκ. Όταν υπάρχουν πολλαπλά μπλοκ προς παράκαμψη, ο χρήστης μεταπηδά από μπλοκ σε μπλοκ μέσω αυτών των συνδέσμων.
Οι σελίδες στον ιστότοπο ενός οργανισμού περιλαμβάνουν μια γραμμή πλοήγησης ή κύριο μενού που περιέχει συνδέσμους σε κύριες ενότητες του τόπου, τον χάρτη ιστότοπου, πληροφορίες για τον οργανισμό και τρόπους επικοινωνίας με αυτόν. Ο πρώτος σύνδεσμος σε αυτή την περιοχή έχει τίτλο "Παράκαμψη συνδέσμων πλοήγησης". Ο χρήστης ενεργοποιεί τον σύνδεσμο για παράκαμψη αυτών των συνδέσμων.
Ένα βιβλίο περιέχει ευρετήριο που χωρίζεται σε σύνολα σελίδων. Στο περιεχόμενο, στην αρχή κάθε σελίδας του ευρετηρίου υπάρχουν σύνδεσμοι για κάθε γράμμα του αλφαβήτου, που συνδέουν με το σημείο του ευρετηρίου όπου οι καταχωρήσεις ξεκινούν με αυτό το γράμμα. Ο πρώτος σύνδεσμος στο σύνολο έχει τίτλο "Παράκαμψη συνδέσμων προς ευρετήριο". Ο χρήστης ενεργοποιεί τον σύνδεσμο για παράκαμψη των συνδέσμων.
Όλες οι σελίδες σε έναν ιστότοπο περιλαμβάνουν μια ενότητα που περιέχει συνδέσμους προς το χάρτη τόπου, πληροφορίες για τον οργανισμό και τρόπους επικοινωνίας με αυτόν. Όλες οι σελίδες σε κάθε ενότητα περιέχουν επίσης ένα σύνολο συνδέσμων προς τις υποενότητές της. Ο πρώτος σύνδεσμος στο πρώτο μπλοκ έχει τίτλο "Παράκαμψη συνδέσμων πλοήγησης" και παρακάμπτει το πρώτο σύνολο συνδέσμων. Ο πρώτος σύνδεσμος στο δεύτερο μπλοκ έχει τίτλο "Παράκαμψη συνδέσμων ενοτήτων" και παρακάμπτει τους συνδέσμους υποενοτήτων.
Αυτό το παράδειγμα απεικονίζει τη χρήση στοιχείων επικεφαλίδας στην αρχή κάθε ενότητας (H69) και συνδέσμους που μεταπηδούν στο τέλος της κάθε ενότητας. Αυτό επιτρέπει σε άτομα να μεταπηδούν μπλοκ επαναλαμβανόμενου περιεχομένου χρησιμοποιώντας πλοήγηση πληκτρολογίου ή χρησιμοποιώντας πλοήγηση επικεφαλίδας, ανάλογα με τις δυνατότητες των πρακτόρων χρήστη τους. Να σημειωθεί ότι ορισμένες ενότητες περιεχομένου αναδιπλώνονται μέσα σε ένα στοιχείο div
για να αντιμετωπίσουν έναν περιορισμό του Internet Explorer (δείτε τις "Σημειώσεις πρακτόρων χρήστη για τη δημιουργία συνδέσμων HTML", για την παράκαμψη μπλοκ περιεχομένου (θα προστεθεί σύνδεσμος)).
Παράδειγμα κώδικα:
<p><a href="#content">Content title</a></p>
<h2>Main Navigation</h2>
<ul>
<li><a href="#subnav">Sub Navigation</a></li>
<li><a href="/a/">Link A</a></li>
<li><a href="/b/">Link B</a></li>
<li><a href="/c/">Link C</a></li>
...
<li><a href="/j/">Link J</a></li>
</ul>
<div class="iekbfix">
<h2 id="subnav">Sub Navigation</h2>
<ul>
<li><a href="#ultranav">Ultra Sub Navigation</a></li>
<li><a href="/suba/">Sub A</a></li>
<li><a href="/subb/">Sub B</a></li>
<li><a href="/subc/">Sub C</a></li>
...
<li><a href="/subj/">Sub J</a></li>
</ul>
</div>
<div class="iekbfix">
<h2 id="ultranav">Ultra Sub Navigation</h2>
<ul>
<li><a href="#content">Content title</a></li>
<li><a href="/ultraa/">Ultra A</a></li>
<li><a href="/ultrab/">Ultra B</a></li>
<li><a href="/ultrac/">Ultra C</a></li>
...
<li><a href="/ultraj/">Ultra J</a></li>
</ul>
</div>
<div>
<h2 id="content">Content title</h2>
<p>Now that I have your attention...</p>
</div>
Και το CSS
Παράδειγμα κώδικα:
div.iekbfix {
width: 100%;
}
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι ο σύνδεσμος είναι το τελευταίο στοιχείο ελέγχου με δυνατότητα επισήμανσης πριν το μπλοκ επαναλαμβανόμενου περιεχομένου ή τον πρώτο σύνδεσμο στο μπλοκ.
Ελέγξτε ότι η περιγραφή του συνδέσμου δηλώνει ότι παρακάμπτει το μπλοκ.
Ελέγξτε ότι ο σύνδεσμος είναι είτε πάντα ορατός ή ορατός όταν έχει επισήμαση πληκτρολογίου.
Ελέγξτε ότι η ενεργοποίηση του συνδέσμου μετακινεί την επισήμανση στο περιεχόμενο ακριβώς μετά το μπλοκ.
Ελέγξτε ότι μετά την ενεργοποίηση του συνδέσμου, η επισήμανση πληκτρολογίου μετακινείται στο περιεχόμενο ακριβώς μετά το μπλοκ.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού παράκαμψης μπλοκ υλικού, παρέχοντας μια λίστα συνδέσμων στις διαφορετικές ενότητες του περιεχομένου. Οι σύνδεσμοι αυτής της λίστας, όπως ένας μικρός πίνακας περιεχομένων στην αρχή του περιεχομένου, ορίζουν την επισήμανση σε διαφορετικές ενότητες του περιεχομένου. Αυτή η τεχνική είναι ιδιαίτερα χρήσιμη για σελίδες με πολλές ανεξάρτητες ενότητες, όπως οι πύλες. Ενδέχεται επίσης να συνδυάζεται με άλλες τεχνικές παράκαμψης μπλοκ εντός μίας ενότητας.
Όλες οι Ιστοσελίδες σε έναν ιστότοπο ξεκινούν με τρεις συνδέσμους που εκτελούν πλοήγηση στο κύριο περιεχόμενο αυτής της Ιστοσελίδας, το πεδίο αναζήτησης και τη γραμμή πλοήγησης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε σύνδεσμο στο σύνολο συνδέσμων που παρέχονται για αυτό τον σκοπό:
Ελέγξτε ότι τα μόνα στοιχεία ελέγχου στην Ιστοσελίδα που προηγούνται του συνδέσμου είναι άλλοι σύνδεσμοι στο σύνολο.
Ελέγξτε ότι η περιγραφή κάθε συνδέσμου ενημερώνει ότι πραγματοποιεί σύνδεση σε κάποια ενότητα στο περιεχόμενο.
Ελέγξτε ότι ο σύνδεσμος είναι είτε πάντα ορατός ή ορατός όταν έχει επισήμανση πληκτρολογίου.
Ελέγξτε ότι η ενεργοποίηση του συνδέσμου μετακινεί την επισήμανση σε αυτή την ενότητα στο περιεχόμενο.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει εφικτό για τους χρήστες τον εντοπισμό παρόμοιων πληροφοριών με την παροχή συνδέσμων σε σχετικές Ιστοσελίδες. Είναι μέρος μιας σειράς τεχνικών για τον εντοπισμό περιεχομένου που είναι επαρκείς για την εκπλήρωση του Κριτηρίου Επιτυχίας 2.4.5. Οι σύνδεσμοι είναι ένα βασικό συστατικό στοιχείο του Παγκόσμιου Ιστού. Είναι ο μηχανισμός που καθιστά τον Ιστό έναν διασυνδεδεμένο Ιστό περιεχομένου. Οι περισσότεροι συγγραφείς εφαρμόζουν αυτή την τεχνική αυτόματα όταν δημιουργούν Ιστοσελίδες.
Οι Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 2.0 (Web Content Accessibility Guidelines 2.0) περιέχουν συνδέσμους προς ορισμούς όρων που χρησιμοποιούνται στις οδηγίες και τα κριτήρια επιτυχίας, συνδέσμους προς έγγραφα που εξηγούν πώς ικανοποιούνται διαφορετικά κριτήρια επιτυχίας, έναν πίνακα περιεχομένων για κάθε ενότητα που περιέχει συνδέσμους προς διαφορετικές υποενότητες αυτής της ενότητας και Σύγκριση σημείων ελέγχου μεταξύ WCAG 1.0 και WCAG 2.0 (Comparison of WCAG 1.0 checkpoints to WCAG 2.0). Καθώς οι χρήστες εκτελούν περιήγηση στο έγγραφο, μπορούν να ακολουθήσουν αυτούς τους συνδέσμους για να βρουν σχετικές πληροφορίες.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε σύνδεσμο στην Ιστοσελίδα:
Ελέγξτε εάν ο σύνδεσμος οδηγεί σε σχετικές πληροφορίες.
Ελέγξτε ότι το #1 είναι αληθές.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να παράσχει μια λίστα συνδέσμων προς όλες τις Ιστοσελίδες του ιστότοπου σε κάθε Ιστοσελίδα. Είναι μια σειρά από τεχνικές εντοπισμού περιεχομένου που είναι επαρκείς για την εκπλήρωση του Κριτηρίου Επιτυχίας 2.4.5. Αυτή η τεχνική είναι αποτελεσματική μόνο για μικρές ομάδες Ιστοσελίδων. Εάν η λίστα συνδέσμων είναι μεγαλύτερη από το υπόλοιπο περιεχόμενο στην Ιστοσελίδα, ενδέχεται να καταστήσει την κατανόηση και χρήση της Ιστοσελίδας πιο δύσκολη για τους χρήστες.
Σημείωση: Να σημειωθεί ότι το κριτήριο επιτυχίας 2.4.1 απαιτεί μια τεχνική παράκαμψης αυτής της λίστας συνδέσμων.
Ένας οικογενειακός ιστότοπος περιέχει αρχικές σελίδες για όλα τα μέλη της οικογένειας Κάθε σελίδα περιέχει μια λίστα συνδέσμων προς τις αρχικές σελίδες των άλλων μελών της οικογένειας.
Ένα ηλεκτρονικό βιβλίο χωρίζεται σε ξεχωριστές Ιστοσελίδες για κάθε κεφάλαιο. Κάθε Ιστοσελίδα ξεκινά με έναν μικρό πίνακα περιεχομένων που περιέχει συνδέσμους προς όλα τα κεφάλαια του βιβλίου.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε ότι κάθε Ιστοσελίδα περιέχει μια λίστα συνδέσμων προς άλλες Ιστοσελίδες στον ιστότοπο
Ελέγξτε ότι οι σύνδεσμοι στην λίστα οδηγούν στις αντίστοιχες Ιστοσελίδες.
Ελέγξτε ότι η λίστα περιέχει έναν σύνδεσμο για κάθε Ιστοσελίδα στον ιστότοπο.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στους χρήστες να προσδιορίσουν τη σχέση μεταξύ της τρέχουσας Ιστοσελίδας και άλλων Ιστοσελίδων στην ίδια συλλογή (π.χ. στον ίδιο ιστότοπο). Σε ορισμένες περιπτώσεις, αυτό μπορεί να γίνει μέσω προγραμματισμού - για παράδειγμα με χρήση της παραμέτρου rel
του στοιχείου link
σε HTML. Σε άλλες περιπτώσεις, οι πληροφορίες παρέχονται με τη συμπερίληψη των σχετικών πληροφοριών στον τίτλο της Ιστοσελίδας.
Ένας μεγάλος ιστότοπος περιλαμβάνει εκπαιδευτικό υλικό και υλικό αναφοράς για αριθμό τεχνολογιών. Ο τίτλος κάθε Ιστοσελίδας περιλαμβάνει το όνομα του δευτερεύοντος τόπου, καθώς και τον οργανισμό που παράγει τον τόπο.
Μια Ιστοσελίδα περιλαμβάνει μεταδεδομένα που την προσδιορίζουν ως τον πίνακα περιεχομένων για μια συλλογή εγγράφων. Τα μεταδεδομένα για κάθε έγγραφο στη συλλογή προσδιορίζουν τη θέση του εγγράφου στη συλλογή και παρέχουν μια παραπομπή στον πίνακα περιεχομένων.
Ένα ηλεκτρονικό εγχειρίδιο χωρίζεται σε κεφάλαια. Ο τίτλος κάθε Ιστοσελίδας περιλαμβάνει τον αριθμό και τον τίτλο του κεφαλαίου, καθώς και τον τίτλο του εγχειριδίου.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε εάν ο τίτλος της Ιστοσελίδας περιγράφει τη σχέση της Ιστοσελίδας με τη συλλογή στην οποία ανήκει.
Ελέγξτε εάν η Ιστοσελίδα περιλαμβάνει μεταδεδομένα που προσδιορίζουν τη σχέση της Ιστοσελίδας με τη συλλογή στην οποία ανήκει.
Ο έλεγχος #1 ή ο έλεγχος #2 είναι αληθής.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να βοηθήσει στον προσανατολισμό του χρήστη με την παροχή πληροφοριών σχετικά με την τρέχουσα θέση μέσω συστατικού στοιχείου διεπαφής χρήστη πλοήγησης. Αυτή η τεχνική είναι ιδιαίτερα χρήσιμη όταν οι Ιστοσελίδες είναι βήματα σε μια εργασία που πρέπει να επεξεργαστείτε με τη σειρά. Η παροχή αυτής της ένδειξης βοηθά τον χρήστη να καταλάβει καλύτερα τη θέση του μέσα στην ακολουθία. Η θέση μπορεί να υποδεικνύεται με την προσθήκη εικονιδίου ή κειμένου, ή με αλλαγή της κατάστασης του στοιχείου.
Μια Ιστοσελίδα εφαρμόζει πλοήγηση με στυλ πίνακα καρτελών. Μια λίστα των καρτελών πίνακα εμφανίζεται οριζόντια στη σελίδα. Το τρέχον περιεχόμενο εμφανίζεται σε πίνακα κάτω από τη λίστα με τις καρτέλες πίνακα Όταν ο χρήστης εκτελεί πλοήγηση και επιλέγει μια συγκεκριμένη καρτέλα πίνακα, το περιεχόμενο στον πίνακα ενημερώνεται για να εμφανίσει το θέμα της επιλεγμένης καρτέλας. Επιπλέον, το χρώμα παρασκηνίου της επιλεγμένης καρτέλας αλλάζει από το προεπιλεγμένο χρώμα και εμφανίζεται ένα σημάδι ελέγχου δίπλα από το κείμενο του πίνακα καρτελών για να υποδείξει ότι αυτός είναι ο ενεργός πίνακας. Το εικονίδιο του σημαδιού ελέγχου περιλαμβάνει το κατάλληλο εναλλακτικό κειμένου.
Η διάταξη μιας Ιστοσελίδας χρησιμοποιεί ένα σύνολο πλαισίων και πλαίσια. Ένα από τα πλαίσια έχει σχεδιαστεί ως πλαίσιο πλοήγησης και ένα άλλο πλαίσιο εμφανίζει το περιεχόμενο του ιστότοπου. Όταν ο χρήστης επιλέγει έναν σύνδεσμο στο πλαίσιο πλοήγησης, οι σχετικές πληροφορίες με τον σύνδεσμο εμφανίζονται εντός του πλαισίου περιεχομένου. Το κείμενο για το επιλεγμένο στοιχείο στο πλαίσιο πλοήγησης ενημερώνεται με έναν χαρακτήρα αστερίσκου, για να υποδείξει ότι αυτό είναι το επιλεγμένο θέμα.
Η γραμμή πλοήγησης για έναν τόπο εφαρμόζεται όπως μια λίστα συνδέσμων. Η γραμμή πλοήγησης εμφανίζεται σε όλες τις Ιστοσελίδες εντός μιας συλλογής Ιστοσελίδων. Καθώς ο χρήστης δίνει έμφαση ή αφήνει το ποντίκι πάνω από έναν συγκεκριμένο σύνδεσμο στη γραμμή πλοήγησης, αλλάζει το χρώμα παρασκηνίου του συνδέσμου. Αυτή η αλλαγή στο στυλ με το συμβάν mouseover ή την επισήμανση καθορίζεται μέσω του φύλλου στυλ πολλαπλών επιπέδων για την Ιστοσελίδα. Όταν η επισήμανση αφαιρείται από τον σύνδεσμο, το στυλ επανέρχεται στο κανονικό στυλ συνδέσμου. Όταν ο σύνδεσμος ενεργοποιείται για αλλαγή των περιεχομένων της σελίδας, ο επιλεγμένος σύνδεσμος εντός της γραμμής πλοήγησης απενεργοποιείται εφόσον το αποτέλεσμα από αυτόν τον σύνδεσμο είναι η Ιστοσελίδα που εμφανίζεται εκείνη τη στιγμή. Η αλλαγή του χρώματος παρασκηνίου παρέχει στους χρήστες με όραση οπτική ειδοποίηση του συνδέσμου προς επιλογή. Η απενεργοποίηση του συνδέσμου παρέχει πληροφορίες προς όλους τους χρήστες ότι αυτό είναι το επιλεγμένο θέμα εκείνη τη στιγμή.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Όταν το συστατικό στοιχείο πλοήγησης επαναλαμβάνεται μέσα στις Ιστοσελίδες:
Ελέγξτε ότι ο χρήστης δίνει μια ένδειξη της τρέχουσας επιλογής στοιχείου μέσα στη μονάδα πλοήγησης.
Ελέγξτε ότι το επιλεγμένο στοιχείο συμφωνεί με το περιεχόμενο που εμφανίζεται.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει περιγραφικές τις επικεφαλίδες ενοτήτων εντός του περιεχομένου Ιστού. Οι περιγραφικές επικεφαλίδες και τίτλοι (δείτε την ενότητα Παροχή τίτλων για Ιστοσελίδες (G88: Providing descriptive titles for Web pages) συνεργάζονται για να δώσουν στους χρήστες μια επισκόπηση του περιεχομένου και της οργάνωσής του. Οι περιγραφικές επικεφαλίδες προσδιορίζουν ενότητες του περιεχομένου σε σχέση τόσο με την Ιστοσελίδα ως σύνολο, όσο και με άλλες ενότητες της ίδιας Ιστοσελίδας.
Οι περιγραφικές επικεφαλίδες βοηθούν τους χρήστες να βρουν συγκεκριμένο περιεχόμενο και να προσανατολιστούν εντός της Ιστοσελίδας.
Οι συγγραφείς μπορεί επίσης να θέλουν να εξετάσουν την τοποθέτηση των πιο σημαντικών πληροφοριών στην αρχή κάθε επικεφαλίδας. Αυτό βοηθά τους χρήστες να "σαρώσουν" τις επικεφαλίδες, για να εντοπίσουν το συγκεκριμένο περιεχόμενο που χρειάζονται, και είναι ιδιαίτερα χρήσιμο όταν οι εφαρμογές περιήγησης ή οι υποστηρικτικές τεχνολογίες επιτρέπουν την πλοήγηση από επικεφαλίδα σε επικεφαλίδα.
Μια σελίδα HTML που περιγράφει το εύρος των προπαρασκευαστικών εργασιών σε περίπτωση καταστροφής μπορεί να έχει τις ακόλουθες επικεφαλίδες:
Παράδειγμα κώδικα:
<h1>Disaster preparation</h1>
<h2>Flood preparation</h2>
<h2>Fire preparation</h2>
Σημειώστε ότι οι επικεφαλίδες επιπέδου 2 έχουν τις ειδοποιείς πληροφορίες στην αρχή (π.χ., αντί για "Preparation for floods", "Preparation for fires", etc).
Ένα σύντομο άρθρο σχετικά με την ιστορία μιας πόλης που εξηγεί την ίδρυση και την επέκτασή της και μετά εμβαθύνει σχετικά με την τρέχουσα κατάσταση. Ο τίτλος της Ιστοσελίδας είναι "Η ιστορία της Ourtown". Η πρώτη ενότητα ονομάζεται "Η ίδρυση της Ourtown". Η δεύτερη ενότητα ονομάζεται "Η επέκταση της Ourtown". Η τρίτη ενότητα ονομάζεται "Η Ourtown σήμερα" με τις ακόλουθες υποενότητες: "Άνθρωποι στην Ourtown", "Οργανώσεις στην Ourtown" και "Κτίρια στην Ourtown".
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Καθορίστε εάν η Ιστοσελίδα περιέχει επικεφαλίδες.
Ελέγξτε εάν κάθε επικεφαλίδα προσδιορίζει την ενότητά της στο περιεχόμενο.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι η ετικέτα για κάθε αλληλεπιδραστικό στοιχείο εντός περιεχομένου Ιστού κάνει σαφή τον σκοπό του συστατικού στοιχείου. Η χρήση των κατάλληλων τεχνικών συγκεκριμένης τεχνολογίας για τεχνολογίες για συσχετισμό ετικετών με αλληλεπιδραστικά στοιχεία ελέγχου, επιτρέπει στην υποστηρικτική τεχνολογία να προσδιορίσει την ετικέτα και να την παρουσιάσει στον χρήστη.
Μια εφαρμογή Ιστού παρουσιάζει τον χάρτη μιας πόλης. Οι χρήστες μπορούν να μεγεθύνουν (zoom in) για να προβάλουν μέρος του χάρτη με μεγαλύτερη λεπτομέρεια και να σμικρύνουν (zoom out) για να εμφανίσουν μεγαλύτερο μέρος της πόλης. Η λειτουργία των στοιχείων ελέγχου εκτελείται είτε με το ποντίκι, είτε με το πληκτρολόγιο. Τα στοιχεία ελέγχου έχουν ετικέτες "Μεγέθυνση (Ctrl + Shift + L)" και "Σμίκρυνση (Ctrl + Shift + R)."
Μια φόρμα που ζητά το όνομα του χρήστη Αποτελείται από δύο πεδία εισόδου για το όνομα και το επώνυμο. Το πρώτο πεδίο έχει ετικέτα "Όνομα" και το δεύτερο "Επώνυμο".
Μια φόρμα αγοράς περιλαμβάνει διάφορα απαιτούμενα πεδία. Πέραν του προσδιορισμού του πεδίου, η ετικέτα για κάθε απαιτούμενο πεδίο περιλαμβάνει τη λέξη "απαιτούμενο" σε παρένθεση.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε συστατικό στοιχείο διεπαφής στο περιεχόμενο:
Προσδιορίστε τον σκοπό του συστατικού στοιχείου διεπαφής
Ελέγξτε ότι υπάρχει κάθε απαιτούμενη ετικέτα.
Ελέγξτε ότι κάθε ετικέτα κάνει σαφή τον σκοπό του συστατικού στοιχείου.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Περιεχόμενο που περιλαμβάνει φόρμες πολλαπλών τμημάτων.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να ελαχιστοποιηθεί ο κίνδυνος για άτομα με αναπηρίες να χάσουν την εργασία τους με την παροχή ενός τετραγώνου επιλογής για να ζητήσουν περισσότερο χρόνο για τη συμπλήρωση φορμών πολλαπλών τμημάτων. Το τετράγωνο επιλογής μπορεί να επιτρέψει σε χρήστες να ζητήσουν συγκεκριμένο πρόσθετο χρόνο (για παράδειγμα, 15 λεπτά) ή μια απροσδιόριστη παράταση. (Σημειώστε ότι η παροχή απροσδιόριστης παράτασης δεν θα ήταν κατάλληλη εάν έθετε σε κίνδυνο την ιδιωτικότητα του χρήστη ή την ασφάλεια του δικτύου.)
Μια Ιστοσελίδα περιέχει το πρώτο μέρος μια φόρμας πέντε τμημάτων. Ακριβώς μετά τις γενικές οδηγίες συμπλήρωσης της φόρμας υπάρχει ένα τετράγωνο επιλογής με την ετικέτα, "Παροχή πρόσθετων 15 λεπτών για τη συμπλήρωση κάθε τμήματος της φόρμας".
Μια Ιστοσελίδα περιέχει το πρώτο μέρος μια φόρμας τριών τμημάτων. Κάθε τμήμα της φόρμας περιέχει περισσότερα από 10 στοιχεία. Μερικά στοιχεία απαιτούν από τους χρήστες να ακολουθήσουν συνδέσμους προς πρόσθετες πληροφορίες. Ακριβώς μετά τις γενικές οδηγίες συμπλήρωσης της φόρμας υπάρχει ένα τετράγωνο επιλογής με την ετικέτα, "Παροχή όσου χρόνου χρειάζομαι για τη συμπλήρωση της φόρμας". Κατανοώ ότι πρέπει να κλείσω (τερματίσω) την εφαρμογή περιήγησης Ιστού εάν επιλέξω να σταματήσω πριν συμπληρώσω το τελευταίο τμήμα της φόρμας".
Εάν η Ιστοσελίδα περιέχει το πρώτο τμήμα μιας φόρμας πολλαπλών τμημάτων:
Ελέγξτε ότι η Ιστοσελίδα περιλαμβάνει ένα τετράγωνο ελέγχου για αίτηση πρόσθετου χρόνου για τη συμπλήρωση της φόρμας.
Ελέγξτε ότι έχετε πρόσθετο χρόνο για τη συμπλήρωση της φόρμας εάν το τετράγωνο επιλογής έχει επιλεγεί.
Όλοι οι έλεγχοι είναι αληθείς.
Κάθε γλώσσα επισημείωσης και πολλές άλλες τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφευχθούν οι αμφισημίες σε Ιστοσελίδες που συχνά προκύπτουν από κώδικα που επικυρώνεται σε σχέση με επίσημες προδιαγραφές. Ο μηχανισμός κάθε τεχνολογίας για τον καθορισμό της τεχνολογίας και της έκδοσης της τεχνολογίας που χρησιμοποιείται, και η Ιστοσελίδα επικυρώνονται σε σχέση με την επίσημη προδιαγραφή αυτής της τεχνολογίας. Εάν υπάρχει διαθέσιμη λειτουργία επικύρωσης της τεχνολογίας αυτής, ο προγραμματιστής μπορεί να τη χρησιμοποιήσει.
Η επικύρωση συνήθως εξαλείφει τις αμφισημίες (και άλλα πολλά) διότι ουσιώδες βήμα της επικύρωσης είναι ο έλεγχος για σωστή χρήση της επισημείωσης αυτής της τεχνολογίας (σε μια γλώσσα σήμανσης) ή κώδικα (σε άλλες τεχνολογίες). Η επικύρωση δεν ελέγχει απαραίτητα για πλήρη συμμόρφωση με μια προδιαγραφή αλλά αποτελεί το καλύτερο μέσο για αυτόματο έλεγχο σε σχέση με την προδιαγραφή της.
Οι σελίδες HTML περιλαμβάνουν μια δήλωση τύπου εγγράφου (μερικές φορές αναφέρεται ως πρόταση !DOCTYPE
) και είναι έγκυρες σύμφωνα με την έκδοση HTML που καθορίζεται από τη δήλωση τύπου εγγράφου. Ο προγραμματιστής μπορεί να χρησιμοποιήσει λειτουργίες επικύρωσης off-line ή online (δείτε την ενότητα "Πόροι" παρακάτω) για να ελέγξετε την εγκυρότητα των σελίδων HTML.
Έγγραφα XHTML, SVG, SMIL και άλλα έγγραφα XML παραπέμπουν σε έναν ορισμό τύπου εγγράφου (Document Type Definition - DTD) σε άλλο τύπο σχήματος XML. Ο προγραμματιστής μπορεί να χρησιμοποιεί λειτουργίες επικύρωσης online ή off-line (συμπεριλαμβανομένων εργαλείων επικύρωσης μέσα σε λειτουργίες επεξεργασίας) για να ελέγξει την εγκυρότητα των εγγράφων XML.
Η εργασία xmlvalidate
του Apache Ant μπορεί να χρησιμοποιηθεί για μαζική επικύρωση αρχείων XML. Ο ακόλουθος στόχος Apache Ant είναι ένα απλό παράδειγμα για την επικύρωση αρχείων με την επέκταση .xml
στον κατάλογο dev\\Web
(σχετικά με το αρχείο έκδοσης Ant).
Παράδειγμα κώδικα:
<target name="validate-xml">
<xmlvalidate lenient="no">
<fileset dir="dev/web" includes="*.xml" />
</xmlvalidate>
</target>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Το έγγραφο "Μην ξεχνάτε να προσθέσετε doctype" (Do not forget to add a doctype ) από την Πρωτοβουλία Διασφάλισης Ποιότητας (Quality Assurance Initiative) της W3C εξηγεί τι είναι τα doctype και γιατί πρέπει να τα χρησιμοποιείτε.
Το έγγραφο "Συνιστώμενα DTD προς χρήση στο έγγραφο Ιστού" (Recommended DTDs to use in your Web document ) από την Πρωτοβουλία Διασφάλισης Ποιότητας (Quality Assurance Initiative) της W3C είναι μια λίστα συνηθισμένων δηλώσεων.
Το έγγραφο "Πώς επικυρώνω τον κώδικά μου ή ελέγχω για πιθανά σφάλματα;" (How do I validate my code or check for possible errors?) περιγράφει τα εργαλεία στην ελεύθερη εφαρμογή επεξεργασίας HTML-Kit για έλεγχο HTML, CSS και XML.
Επικύρωση HTML και XHTML.
Η "Υπηρεσία Επικύρωσης Επισημείωσης της W3C" (The W3C Markup Validation Service ) από την Κοινοπραξία για τον Παγκόσμιο Ιστό (World Wide Web Consortium) σας επιτρέπει να επικυρώσετε αρχεία HTML και XHTML μέσω URI, μέσω αποστολής (upload) αρχείου και μέσω απευθείας εισαγωγής των πλήρων εγγράφων HTML ή XHTML. Υπάρχουν επίσης ξεχωριστές σελίδες με εκτεταμένη διεπαφή για αποστολή αρχείου και επικύρωση μέσω URI (σύνθετες επιλογές, όπως κωδικοποίηση και τύποι εγγράφων).
Η "Τεκμηρίωση Εγκατάστασης της Υπηρεσία Επικύρωσης Επισημείωσης της W3C" (Installation Documentation for the W3C Markup Validation Service ) εξηγεί τον τρόπο εγκατάστασης αυτής της υπηρεσίας (για παράδειγμα, για χρήση σε ενδοδίκτυο).
Η "HTML Validator" (HTML Validator) είναι μια γερμανική έκδοση της υπηρεσίας επικύρωσης επισημείωσης της W3C.
H "WDG HTML Validator" (WDG HTML Validator ) από την Web Design Group σας επιτρέπει να εισάγεται ένα URI για να επικυρώσετε μεμονωμένες σελίδες ή ολόκληρους ιστότοπους. Υπάρχουν επίσης εκδόσεις για μαζική επικύρωση ιστοσελίδων (προσδιορίζοντας ένα ή περισσότερα URI από έγγραφα HTML προς επικύρωση), με αποστολή αρχείου ή μέσω απευθείας εισαγωγής του κώδικα HTML.
Το "Offline HTMLHelp.com Validator" (Offline HTMLHelp.com Validator ) είναι ένα εργαλείο για χρήστες Unix. Αποτελεί την off-line έκδοση του online WDG HTML Validator.
Το "Offline HTML Validator - A clipbook for Note Tab" (Off-line HTML Validator – A clipbook for NoteTab ) του Καθ. Igor Podlubny είναι μια επέκταση για τη λειτουργία επεξεργασίας προγραμματισμού NoteTab. Χρησιμοποιεί την λειτουργία ανάλυσης ανοικτού κώδικα SGML του James Clark (James Clark's open-source SGML parser ), που χρησιμοποιείται επίσης από την υπηρεσία επικύρωσης επισημείωσης της W3C.
Το "Offline HTML Validator for Windows" (Off-line HTML Validator for Windows ) του Jan Kacur είναι άλλη μια λειτουργία επικύρωσης που βασίζεται στην λειτουργία ανάλυσης ανοικτού κώδικα SGML του James Clark. Ο πηγαίος κώδικας (σε Delphi) είναι επίσης διαθέσιμος.
Το "Do-it-yourself Offline HTML Validator" (Do-it-yourself Offline HTML Validator ) του Matti Tukiainen εξηγεί πώς μπορείτε να δημιουργήσετε μια απλή λειτουργία επικύρωσης με τη λειτουργία ανάλυσης ανοικτού κώδικα του James Clark σε Windows.
Το "Επικύρωση ολόκληρου ιστότοπου" (Validating an entire site ) του Peter Kranz εξηγεί πώς μπορείτε να εγκαταστήσετε μια τροποποιημένη έκδοση της υπηρεσίας επικύρωσης επισημείωσης της W3C που παράγει αποτελέσματα επικύρωσης όπως XML σε Mac OS. Ο πηγαίος κώδικας (σε Perl και Python) είναι διαθέσιμος.
Το "HTML Validator Widget" (HTML Validation Widget ) προσθέτει μια επιλογή "Επικύρωση HTML" στο μενού περιβάλλοντος του Internet Explorer και επικυρώνει το τρέχον έγγραφο HTML με το HTML Validator της Web Design Group.
Το έγγραφο "Μπορώ να χρησιμοποιήσω την υπηρεσία επικύρωσης επισημείωσης της W3C για την επικύρωση HTML;" (Can I use the W3C MarkUp Validation Service to validate HTML? ) εξηγεί πώς μπορείτε να επικυρώσετε HTML μέσα από την ελεύθερη λειτουργία επεξεργασίας HTML-Kit.
Το "HTML/XML Validator" (HTML/XML Validator) είναι ένα online εργαλείο διόρθωσης για HTML και XHTML με βάση τα Tidy και PHP 5. Είναι διαθέσιμο σε αρκετές γλώσσες αλλά δεν πρόκειται για πραγματική λειτουργία επεξεργασίας.
Το έγγραφο "Διορθώστε τον ιστότοπό σας με το σωστό DOCTYPE!" (Fix Your Site With the Right DOCTYPE! ) του Jeffrey Zeldman εξηγεί ποια doctypes HTML και XHTML δουλεύουν ποιο είναι το αποτέλεσμά τους στην κατάσταση απόδοσης μερικών εφαρμογών περιήγησης.
"Τροποποιώντας το Dreamweaver για την παραγωγή έγκυρου HTML" (Modifying Dreamweaver to Produce Valid XHTML ) της Carrie Bickner.
Το "XHTML-Schemata für FrontPage 2003 und Visual Studio .NET" (XHTML-Schemata für FrontPage 2003 und Visual Studio .NET) του Christoph Schneegans είναι ένα άρθρο στα γερμανικά που εξηγεί πώς τα W3C XML Schemas για XHTML 1.0 μπορούν να χρησιμοποιηθούν στα FrontPage 2003 και Visual Studio .NET για τη δημιουργία έγκυρου κώδικα.
Το "Nvu" (Nvu ) είναι ένα ελεύθερο και ανοικτού κώδικα εργαλείο συγγραφής Ιστού για Windows, Macintosh και Linux που μπορεί να καλέσει την υπηρεσία επικύρωσης HTML της W3C.
Το "Amaya" (Amaya της World Wide Web Consortium είναι ένα ελεύθερο και ανοικτού κώδικα εργαλείο συγγραφής Ιστού με υποστήριξη για HTML, XHTML, CSS, SVG και MathML που σας ειδοποιεί για σφάλματα εγκυρότητας όταν αποθηκεύετε ένα έγγραφο.
Το "Web Developer Extension" (Web Developer Extension ) είναι μια επέκταση για Mozilla, Firefox και Flock του Chris Pedrick που σας επιτρέπει να χρησιμοποιήσετε τις υπηρεσίες επικύρωσης για HTML και CSS της W3C.
Επικύρωση XML
Το "HTML/XHTML/WML/XML Validator" (HTML/XHTML/WML/XML Validator ) σας επιτρέπει να επικυρώσετε έγγραφα μέσω URI ή μέσω αποστολής αρχείου. Μια εκτεταμένη διεπαφή είναι επίσης διαθέσιμη.
Το "HTML/XHTML/WML/XML Validator" (HTML/XHTML/WML/XML Validator ) είναι μια γερμανική έκδοση της ίδιας λειτουργίας επικύρωσης.
Το "XML Validator - A Document Validation Service" (XML Validator - A Document Validation Service ) του JavaView σας επιτρέπει να ελέγξετε την καλή μορφή και εγκυρότητα αρχείων XML, με αποστολή αρχείου ή μέσω απευθείας εισαγωγής του κώδικα XML.
Το "XMLValidate Task" (XMLValidate Task ) του Apache Ant μπορεί να χρησιμοποιηθεί για την επικύρωση εγγράφων XML. Αυτό το εργαλείο μπορεί να χρησιμοποιηθεί για την επικύρωση ολόκληρων καταλόγων (και υποκαταλόγων) αρχείων XML.
Το "XML Schema Validator" (XML Schema Validator ) του Christoph Schneegans είναι ένα online εργαλείο που σας επιτρέπει να επικυρώσετε αρχεία XML (και XHTML) μέσω URI, με αποστολή αρχείου ή μέσω απευθείας εισαγωγής πλήρων εγγράφων XML, ή μέσω απευθείας εισαγωγής τμημάτων κώδικα XML. Ένα bookmarklet που σας επιτρέπει να επικυρώσετε τη σελίδα που εμφανίζεται εκείνη τη στιγμή στην εφαρμογή περιήγησης είναι επίσης διαθέσιμο. Αυτή η λειτουργία επικύρωσης υποστηρίζει ότι είναι πιο ακριβής από τη λειτουργία επικύρωσης W3C.
Το "XML Schema Validator" (XML Schema Validator ) της DecisionSoft είναι ένα online εργαλείο που σας επιτρέπει να επικυρώσετε ένα αρχείο XML σε σχέση με ένα σχήμα W3C XML, που μπορεί και αυτό να αποσταλεί (upload).
Το "STG XML Validation Form" (STG XML Validation Form ) την Scholarly Technology Group του Πανεπιστημίου Brown σας επιτρέπει να επικυρώσετε αρχεία XML μέσω URI, με αποστολή αρχείου ή μέσω απευθείας εισαγωγής πλήρων εγγράφων XML.
Το "NetBeans: Δουλεύοντας με XML, Μέρος 1" (NetBeans: Working with XML, Part 1 και το "NetBeans: Δουλεύοντας με XML, Μέρος 2" (NetBeans: Working with XML, Part 2) του Tim Boudreau κ.α., εξηγεί πώς ενεργοποιείται η υποστήριξη XML, την επικύρωση και άλλες σχετικές λειτουργίες στο πλαίσιο ανοικτού κώδικα NetBeans. .
Το Schema Validator: είναι μια λειτουργία επικύρωσης που σας επιτρέπει να επικολλήσετε κώδικα XML και W3C XML Schema μέσα σε πλαίσια κειμένου για την επικύρωση κώδικα XML.
Το XML Nanny: είναι ένα γραφικό εργαλείο επικύρωσης XML και XHTML, με υποστήριξη για DTD, W3C XML Schema, RELAX NG και Schematron (Max OX X).
Σημειώστε ότι πολλές λειτουργίες επεξεργασίας προγραμματισμού, λειτουργίες επεξεργασίας XML και ολοκληρωμένα περιβάλλοντα ανάπτυξης (integrated development environment - IDE) μπορούν να επικυρώσουν αρχεία XML. Αυτά περιλαμβάνουν τα ακόλουθα ελεύθερα ή/και ανοικτού κώδικα εργαλεία:
τη λειτουργία επεξεργασίας προγραμματισμού JEdit με τις πρόσθετες λειτουργίες XML και SideKick, που υποστηρίζουν DTD και σχήματα W3C XML,
τον "πάγκο εργασίας" Eclipse με την πλατφόρμα εργαλείων Ιστού (Web Tools Platform ),
το εργαλείο συγγραφής Ιστού SCREEM για το περιβάλλον εργασίας Gnome που υποστηρίζει τα DTD,
τη λειτουργία επεξεργασίας XML Jaxe που επικυρώνει αρχεία XML με Apache Xerces,
τη λειτουργία επεξεργασίας XML Xerlin που υποστηρίζει τα DTD και σε κάποιο βαθμό το σχήμα W3C XML,
τη λειτουργία επεξεργασίας XML xmloperator που υποστηρίζει τα DTD και σχήματα RELAX NG,
Emacs σε κατάσταση nXML (δείτε την ενότητα YahooGroup Emacs nXML Mode ),
τη λειτουργία επεξεργασίας XML Pollo, που υποστηρίζει τα DTD, σχήματα W3C XML και RELAX NG, είναι η πιο κατάλληλη για δενδροειδή αρχεία XML.
Επικύρωση CSS
Η "Υπηρεσία επικύρωσης CSS της W3C" (The W3C CSS Validation Service ) σας επιτρέπει να επικυρώνετε αρχεία CSS μέσω URI, με αποστολή αρχείου ή μέσω απευθείας εισαγωγής του κώδικα CSS.
Η "Υπηρεσία επικύρωσης CSS της W3C" (The W3C CSS Validation Service: Validate by URI) είναι μια εκτεταμένη διεπαφή που σας επιτρέπει να καθορίσετε ένα φύλλο στυλ CSS ή μια σελίδα HTML με CSS, να καθορίσετε το προφίλ CSS και το μέσο, και να επιλέξετε τους τύπους προειδοποιήσεων που θα πρέπει να εμφανιστούν.
Το CSSCheck από τη Web Design Group σας επιτρέπει να επικυρώσετε αρχεία CSS μέσω URI και μέσω απευθείας εισαγωγής του κώδικα CSS. Σημειώστε ότι πρόκειται κυρίως για λειτουργία ελέγχου CSS 1.
Το CSSCheckUp της Web Design Group σας επιτρέπει να επικυρώσετε αρχεία CSS μέσω αποστολής αρχείου. Σημειώστε ότι πρόκειται κυρίως για λειτουργία ελέγχου CSS 1.
Η "Λειτουργία επικύρωσης CSS (Επάλληλα Φύλλα Στυλ)" (CSS (Cascading Style Sheets) Validator ) σας επιτρέπει να επικυρώνετε αρχεία CSS μέσω URI.
(καμία δεν εμπεριέχεται στη λίστα)
Για τεχνολογίες HTML, SGML και XML:
Φορτώστε κάθε σελίδα ή έγγραφο στη λειτουργία ανάλυσης για επικύρωση.
Ελέγξτε ότι δεν βρέθηκαν σφάλματα επικύρωσης.
Για CSS:
Φορτώστε κάθε εξωτερικό ή εσωτερικό φύλλο στυλ σε μια λειτουργία επεξεργασίας CSS.
Ελέγξτε ότι δεν βρέθηκαν σφάλματα επικύρωσης.
Για άλλες τεχνολογίες:
Ακολουθήστε τη διαδικασία επικύρωσης που καθορίζει η τεχνολογία σε χρήση, εάν υπάρχει.
Για τεχνολογίες HTML, SGML και XML:
Το βήμα #2 είναι αληθές.
Για CSS:
Το βήμα #2 είναι αληθές.
τεχνολογίες προγραμματισμού που έχουν τυποποιημένα συστατικά στοιχεία που είναι προγραμματισμένα να έρχονται σε διεπαφή με τα API προσβασιμότητας
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε υποστηρικτική τεχνολογία να καταλάβει το περιεχόμενο Ιστού, έτσι ώστε να μπορεί να μεταφέρει ισοδύναμες πληροφορίες στον χρήστη μέσω εναλλακτικής διεπαφής χρήστη.
Μερικές φορές, το περιεχόμενο δεν δημιουργείται με χρήση γλώσσας επισημείωσης, αλλά γλώσσας ή εργαλείων προγραμματισμού Σε πολλές περιπτώσεις, αυτές οι τεχνολογίες έχουν συστατικά στοιχεία διεπαφής που είναι ήδη προγραμματισμένα για να έρχονται σε διεπαφή με API προσβασιμότητας. Εάν ένας συγγραφέας χρησιμοποιεί αυτά τα συστατικά στοιχεία και συμπληρώνει τις ιδιότητες (π.χ. όνομα κ.λπ.), τα συστατικά στοιχεία διεπαφής χρήστη που θα προκύψουν στο περιεχόμενο θα είναι προσβάσιμα από υποστηρικτική τεχνολογία.
Μια Ιστοσελίδα χρησιμοποιεί java για τη δημιουργία ενός applet. Χρησιμοποιούνται αντικείμενα Java swing (π.χ., pushbutton) διότι έχουν ενσωματωμένες ιδιότητες προσβασιμότητας, στις οποίες μπορεί να έχει πρόσβαση υποστηρικτική τεχνολογία γραμμένη σε Java και, με το Java Access Bridge, όσες είναι γραμμένες σε άλλες γλώσσες που χρησιμοποιούν το API προσβασιμότητας του λειτουργικού συστήματος. Ο συγγραφέας συμπληρώνει τις τιμές για τα συστατικά μέρη και το αποτέλεσμα είναι προσβάσιμο από AT.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
Αποδώστε το περιεχόμενο χρησιμοποιώντας προσβάσιμο πράκτορα χρήστη
Χρησιμοποιήστε ένα εργαλείο προσβασιμότητας που έχει σχεδιαστεί για το API προσβασιμότητας του πράκτορα χρήστη, για να αξιολογήσει κάθε συστατικό στοιχείο διεπαφής χρήστη
Ελέγξτε ότι το εργαλείο βρίσκει το όνομα και το ρόλο κάθε συστατικού στοιχείου διεπαφής χρήστη.
Το βήμα #3 είναι αληθές για κάθε συστατικό στοιχείο διεπαφής χρήστη
Το πρωταρχικό περιεχόμενο δεν συμμορφώνεται με το WCAG αλλά υπάρχουν εναλλακτικές εκδόσεις που συμμορφώνονται με το WCAG. Αυτή η τεχνική μπορεί να χρησιμοποιηθεί μόνο εάν μια τεχνολογία καθιστά εφικτή τη δημιουργία ενός προσβάσιμου συνδέσμου προς μια εναλλακτική έκδοση.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε χρήστες να έχουν πρόσβαση σε εναλλακτικό περιεχόμενο που συμμορφώνεται με το WCAG εάν το πρωταρχικό περιεχόμενο, ή το προεπιλεγμένο περιεχόμενο που οι χρήστες συναντούν κατά την επίσκεψή τους σε συγκεκριμένο URI, δεν συμμορφώνεται. Η εναλλακτική σελίδα ή η συμμορφούμενη εναλλακτική έκδοση, ενδέχεται να πραγματοποιούν ορισμένους συμβιβασμούς στο σχεδιασμό ή τη λειτουργικότητα προκειμένου να συμμορφώνονται, αλλά πρέπει να συμφωνούν με τις απαιτήσεις που περιγράφονται στον ορισμό προκειμένου να είναι μια συμμορφούμενη εναλλακτική έκδοση. Ο ορισμός της "συμμορφούμενης εναλλακτικής έκδοσης" είναι:
έκδοση που
συμμορφώνεται στο ενδεδειγμένο επίπεδο και
παρέχει όλες τις ίδιες πληροφορίες και τη λειτουργικότητα (functionality) στην ίδια ανθρώπινη γλώσσα (human language) και
είναι εξίσου ενημερωμένη με το μη συμμορφούμενο περιεχόμενο και
για την οποία, τουλάχιστον ένα από τα παρακάτω ισχύει:
η συμμορφούμενη έκδοση μπορεί να προσεγγιστεί από τη μη συμμορφούμενη σελίδα μέσω ενός μηχανισμού (mechanism) υποστήριξης προσβασιμότητας (accessibility-supported) ή
η μη συμμορφούμενη έκδοση μπορεί να προσεγγιστεί μόνο από τη συμμορφούμενη έκδοση ή
η μη συμμορφούμενη έκδοση μπορεί να προσεγγιστεί μόνο από μια συμμορφούμενη σελίδα που παρέχει επίσης έναν μηχανισμό για την προσέγγιση της συμμορφούμενης έκδοσης
Σημείωση 1:Σε αυτόν τον ορισμό, η φράση "μπορεί να προσεγγιστεί μόνο" δηλώνει ότι υπάρχει κάποιος μηχανισμός, όπως ανακατεύθυνση υπό συνθήκη, που αποτρέπει έναν χρήστη από το να "προσεγγίσει" (φόρτωση) τη μη συμμορφούμενη σελίδα, εκτός εάν ο χρήστης έχει μόλις έρθει από τη συμμορφούμενη έκδοση.
Σημείωση 2:Η εναλλακτική έκδοση δεν χρειάζεται να συμφωνεί πλήρως με την αρχική (π.χ. η συμμορφούμενη εναλλακτική έκδοση μπορεί να αποτελείται από πολλαπλές σελίδες).
Σημείωση 3:Εάν είναι διαθέσιμες εκδόσεις πολλαπλών γλωσσών, τότε οι συμμορφούμενες εναλλακτικές εκδόσεις απαιτούνται για κάθε προσφερόμενη γλώσσα.
Σημείωση 4:Ενδέχεται να παρέχονται εναλλακτικές εκδόσεις για την εξυπηρέτηση διαφορετικής τεχνολογίας περιβαλλόντων ή ομάδων χρηστών. Κάθε έκδοση θα πρέπει να παρέχει όσο το δυνατόν μεγαλύτερη συμμόρφωση. Μία έκδοση θα χρειάζεται να είναι πλήρως συμμορφούμενη προκειμένου να ικανοποιεί την απαίτηση συμμόρφωσης 1 (conformance requirement 1).
Σημείωση 5:Η συμμορφούμενη εναλλακτική έκδοση δεν χρειάζεται να βρίσκεται εντός του πεδίου συμμόρφωσης ή ακόμα και στον ίδιο ιστότοπο, εφόσον είναι ελεύθερα διαθέσιμη, όπως η μη συμμορφούμενη έκδοση.
Σημείωση 6:Οι εναλλακτικές εκδόσεις δεν θα πρέπει να συγχέονται με συμπληρωματικό περιεχόμενο (supplementary content), το οποίο υποστηρίζει την αρχική σελίδα και ενισχύει το επίπεδο κατανόησης.
Σημείωση 7:Ο ορισμός προτιμήσεων χρήστη εντός του περιεχομένου για την παραγωγή μιας συμμορφούμενης έκδοσης είναι ένας αποδεκτός μηχανισμός για την προσέγγιση μιας άλλης έκδοσης, αρκεί η μέθοδος που χρησιμοποιείται για τον ορισμό των προτιμήσεων να υποστηρίζει την προσβασιμότητα.
Δείτε την ενότητα Κατανόηση Συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions)
Όταν χρησιμοποιείται αυτή η τεχνική, η τοποθέτηση ενός συνδέσμου που συμμορφώνεται με το WCAG προς εναλλακτικό περιεχόμενο στην κορυφή της σελίδας επιτρέπει στους χρήστες να βρουν τον σύνδεσμο γρήγορα και να κινηθούν προς τη συμμορφούμενη εναλλακτική έκδοση. Για να εξασφαλιστούν οι χρήστες ότι θα βρίσκουν πάντα την εναλλακτική έκδοση, ανεξάρτητα από το σημείο από το οποίο εισέρχονται στον ιστότοπο, κάθε σελίδα που δεν συμμορφώνεται στο ορισμένο επίπεδο θα συμπεριλαμβάνει έναν σύνδεσμο προς τη συμμορφούμενη εναλλακτική έκδοση.
Σε έναν ιστότοπο, για κάθε σελίδα που δεν συμμορφώνεται με το WCAG στο δηλωμένο επίπεδο, ο πρώτος σύνδεσμος στη σελίδα ονομάζεται "Εναλλακτική έκδοση". Ο στόχος αυτού του συνδέσμου είναι η εναλλακτική έκδοση της σελίδας που συμμορφώνεται με το WCAG στο δηλωμένο επίπεδο.
Προσδιορίστε μια σελίδα που δεν συμμορφώνεται με το WCAG στο δηλωμένο επίπεδο συμμόρφωσης 1.
Καθορίστε εάν η σελίδα περιέχει έναν σύνδεσμο προς συμμορφούμενη εναλλακτική έκδοση της σελίδας.
Καθορίστε εάν η εναλλακτική έκδοση είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) της αρχικής σελίδας και ότι συμμορφώνεται με το WCAG 2.0 στο δηλωμένο επίπεδο συμμόρφωσης.
Τα #2 και #3 είναι και τα δύο αληθή
Όλες οι τεχνολογίες που υποστηρίζουν χρώμα και κείμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να συνδυάσει χρωματική και σημασιολογική επισημείωση για τη μεταφορά πληροφοριών. Οι περισσότεροι χρήστες μπορούν γρήγορα να σαρώσουν το περιεχόμενο για να εντοπίσουν πληροφορίες που μεταφέρονται με τη χρήση χρώματος. Για χρήστες που δεν μπορούν να δουν το χρώμα, η σημασιολογική επισημείωση μπορεί να προσφέρει έναν διαφορετικό τύπο στοιχείου. Οι πράκτορες χρήστη μπορούν έπειτα να κάνουν αντιληπτή τη δομή αυτού του τύπου στον χρήστη, για παράδειγμα χρησιμοποιώντας μια διαφορετική οπτική παρουσίαση για διαφορετικούς τύπους δομών, ή μια διαφορετική φωνή ή τόνο σε μια ακουστική παρουσίαση.
Οι περισσότεροι πράκτορες χρήστη θα διακρίνουν οπτικά κείμενο που έχει προσδιοριστεί με σημασιολογική επισημείωση. Μερικές υποστηρικτικές τεχνολογίες παρέχουν έναν μηχανισμό καθορισμού των χαρακτηριστικών περιεχομένου που έχουν δημιουργηθεί με χρήση της κατάλληλης σημασιολογικής επισημείωσης.
Μια HTML φόρμα περιέχει αρκετά απαιτούμενα πεδία. Οι ετικέτες για τα απαιτούμενα πεδία εμφανίζονται σε κόκκινο. Επιπλέον, το κείμενο σε κάθε ετικέτα επισημαίνεται με το στοιχείο STRONG για μεγαλύτερη έμφαση. Οι οδηγίες για τη συμπλήρωση της φόρμας υποδεικνύουν ότι "όλα τα απαιτούμενα πεδία εμφανίζονται με κόκκινο και δίνεται έμφαση σε αυτά" και ακολουθούνται από παράδειγμα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε περιεχόμενο όπου χρησιμοποιούνται διαφορές χρώματος για τη μεταφορά πληροφοριών:
Ελέγξτε ότι οι ίδιες πληροφορίες είναι διαθέσιμες μέσω σημασιολογικής επισημείωσης.
Ελέγξτε ότι το #1 είναι αληθές.
Περιεχόμενο που αποδέχεται δεδομένα εισόδου χρήστη, με περιορισμούς στη μορφή, την τιμή ή/και τον τύπο των δεδομένων εισόδου.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή βοήθειας στους χρήστες για τον εντοπισμό σφαλμάτων εισόδου όπου οι πληροφορίες που παρέχονται από τον χρήστη δεν γίνονται αποδεκτές ως έγκυρες. Αυτό περιλαμβάνει πεδία όπου απουσιάζουν απαιτούμενες πληροφορίες και πεδία με λανθασμένες πληροφορίες. Όταν οι χρήστες εισάγουν δεδομένα που ελέγχονται και ανιχνεύονται σφάλματα εισόδου, παρέχεται ένας σύνδεσμος προς αυτό το σφάλμα προκειμένου ο χρήστης να μην χρειάζεται να το αναζητήσει. Μια προσέγγιση είναι η χρήση επικύρωσης στην πλευρά του διακομιστή και η επανεμφάνιση της φόρμας (με όσα δεδομένα καταχωρήθηκαν προηγουμένως) και μιας περιγραφής κειμένου στην κορυφή της σελίδας που υποδεικνύει ότι υπήρξε πρόβλημα επικύρωσης, περιγράφει τη φύση του προβλήματος και παρέχει έναν σύνδεσμο προς τα πεδία με πρόβλημα.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας και υποβάλλει τη φόρμα. Ο διακομιστής επιστρέφει τη φόρμα με τα δεδομένα του χρήστη ακόμα στα πεδία και υποδεικνύει σε κείμενο με σαφήνεια στην κορυφή της σελίδας ότι δεν έγιναν αποδεκτά. Το κείμενο περιγράφει τη φύση των σφαλμάτων και παρέχει έναν σύνδεσμο προς το πεδίο που είχε πρόβλημα, ώστε ο χρήστης να μπορέσει να εκτελέσει πλοήγηση για διόρθωση του προβλήματος.
Ο χρήστης εισάγει άκυρα δεδομένα σε πεδίο φόρμας και προσπαθεί να υποβάλει τη φόρμα. Η δημιουργία αρχείου εντολών στην πλευρά του πελάτη εντοπίζει το σφάλμα, ακυρώνει την υποβολή και τροποποιεί το έγγραφο για την παροχή μηνύματος κειμένου περιγράφοντας το σφάλμα, με συνδέσμους προς το/τα πεδία με το σφάλμα. Το αρχείο εντολών τροποποιεί ακόμα τις ετικέτες των πεδίων με τα προβλήματα για να τα υπογραμμίσει.
Όταν ο χρήστης υποβάλλει μια φόρμα, αντί να μεταφερθεί σε μια νέα σελίδα ένα αρχείο εντολών ορίζει αυτόματα την επισήμανση σε έναν σύνδεσμο κειμένου με την ένδειξη "Παρουσιάστηκαν σφάλματα." Ο σύνδεσμος μεταβαίνει στο πρώτο στοιχείο σε μια ταξινομημένη λίστα περιγραφικών μηνυμάτων σφάλματος." Κάθε στοιχείο λίστας έχει έναν σύνδεσμο προς το στοιχείο ελέγχου όπου προέκυψε το σφάλμα. Και υπάρχει ένας σύνδεσμος από το σφάλμα προς την ταξινομημένη λίστα περιγραφικών μηνυμάτων σφάλματος. Η διαδικασία επαναλαμβάνεται όπως είναι απαραίτητο.
Συμπληρώστε μια φόρμα, αφήνοντας εκουσίως κενά ένα ή περισσότερα απαιτούμενα (υποχρεωτικά) πεδία και κάντε ένα σφάλμα εισόδου σε ένα άλλο πεδίο και υποβάλετε τη φόρμα.
Ελέγξτε ότι ένα μήνυμα κειμένου παρέχεται που προσδιορίζει το πεδίο από το οποίο απουσιάζουν απαραίτητα δεδομένα.
Ελέγξτε ότι ένα μήνυμα κειμένου παρέχεται που προσδιορίζει το πεδίο με το σφάλμα εισόδου.
Ελέγξτε ότι υπάρχει ένας σύνδεσμος σε κάθε πεδίο όπου απουσιάζουν απαραίτητα δεδομένα από το μήνυμα δεδομένων που απουσιάζουν.
Ελέγξτε ότι υπάρχει ένας σύνδεσμος προς τη λίστα σφαλμάτων από το μήνυμα σφάλματος.
Σημείωση: Το κριτήριο επιτυχίας 3.3.2 απαιτεί, στην περίπτωση ανίχνευσης ενός σφάλματος εισόδου και γνωστοποίησης και παροχής των προτάσεων για διόρθωση χωρίς κίνδυνο της ασφάλειας ή του σκοπού του περιεχομένου, οι προτάσεις να παρέχονται στον χρήστη.
Εάν το #2 είναι αληθές, τότε το #4 είναι αληθές.
Εάν το #3 είναι αληθές, τότε το #5 είναι αληθές.
Κάθε τεχνολογία
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διευκολύνει την αλληλεπίδραση της υποστηρικτικής τεχνολογίας με περιεχόμενο μέσω λογικού διαχωρισμού της δομικής κωδικοποίησης του περιεχομένου από την κωδικοποίηση παρουσίασης. Η δομική κωδικοποίηση είναι η ένδειξη στοιχείων όπως επικεφαλίδων, παραγράφων, λιστών, πινάκων κ.λπ. και πραγματοποιείται χρησιμοποιώντας τεχνολογικά χαρακτηριστικά που δεσμεύονται για τον σκοπό αυτό. Αντίθετα, η κωδικοποίηση παρουσίασης είναι η ένδειξη εφέ μορφοποίησης, όπως γράμματα, χρώμα, μέγεθος, θέση, περιγράμματα κ.λπ. και υποστηρίζεται επίσης από τεχνολογικά χαρακτηριστικά.
Αν και τα χαρακτηριστικά παρουσίασης υπονοούν οπτικά ότι οι χρήστες δομής μπορούν να καθορίζουν επικεφαλίδες, παραγράφους, λίστες κ.λπ. από τις συμβάσεις μορφοποίησης που χρησιμοποιούνται, αυτά τα χαρακτηριστικά δεν κωδικοποιούν τη δομή με αρκετή σαφήνεια ώστε η υποστηρικτική τεχνολογία να αλληλεπιδρά αποτελεσματικά με τη σελίδα. Η παροχή ξεχωριστών επιπέδων δομής, λειτουργικότητας και παρουσίασης, επιτρέπει στη σημασιολογία που υπονοείται από τη μορφοποίηση να καθορίζεται μέσω προγραμματισμού με το επίπεδο δομής.
Ακολουθώντας αυτήν την τεχνική επιτρέπεται στους πράκτορες χρήστη:
Να εκτελούν ουσιαστικούς μετασχηματισμούς δομής που βασίζονται στην υφιστάμενη δομή του περιεχομένου, όπως την αναδιάταξη ενοτήτων ή την παραγωγή μιας λίστας ενοτήτων ή μιας λίστας συνδέσμων.
Υποστήριξη αλληλεπίδρασης με περιεχόμενο που βασίζεται σε δομικά χαρακτηριστικά τα οποία δεν μπορούν να καθοριστούν με υποστηρικτική τεχνολογία στη βάση μόνο πληροφοριών παρουσίασης. Για παράδειγμα, ενδέχεται να είναι επιθυμητή η παροχή ειδικών αλληλεπιδράσεων με λίστες μέσω της υπόδειξης του αριθμού των στοιχείων λίστας ή μεταπήδηση στο τέλος, αλλά αυτό είναι εφικτό μόνο εάν η δομή λίστας κωδικοποιείται επιπλέον της παρουσίασης της λίστας.
Τροποποίηση της παρουσίασης περιεχομένου μέσω αντικατάστασης κανόνων εναλλακτικής παρουσίασης που επισυνάπτονται σε δομικά χαρακτηριστικά.
Ένα έγγραφο HTML χρησιμοποιεί τα δομικά χαρακτηριστικά της HTML, όπως παραγράφους, λίστες, επικεφαλίδες κ.λπ. και αποφεύγει χαρακτηριστικά παρουσίασης όπως αλλαγές γραμματοσειράς, υποδείξεις διάταξης κ.λπ.. Το CSS χρησιμοποιείται για τη μορφοποίηση του εγγράφου με βάση τις δομικές του ιδιότητες. Παράμετροι κλάσης που έχουν σωστή μορφή στην HTML, επεκτείνουν τη σημασιολογία της δομικής επισημείωσης εάν χρειάζεται να επιτραπεί πιο ευέλικτη μορφοποίηση με το CSS. Υποστηρικτικές τεχνολογίες μπορούν να υποκαταστήσουν ή επεκτείνουν το CSS για την τροποποίηση της παρουσίασης ή να αγνοήσουν το CSS και να αλληλεπιδράσουν απευθείας με τη δομική κωδικοποίηση.
Ένα έγγραφο PDF αποτελείται κυρίως από το περιεχόμενο στο οποίο έχουν ενσωματωθεί πληροφορίες μορφοποίησης. Πληροφορίες σχετικά με τη δομή παρέχονται σε μια ξεχωριστή ενότητα του εγγράφου χρησιμοποιώντας ετικέτες μορφής XML. Αυτό ονομάζεται "tagged PDF". Οι πληροφορίες σε αυτές τις ετικέτες μπορούν να χρησιμοποιούνται από υποστηρικτικές τεχνολογίες για την υιοθέτηση της παρουσίασης ή την κατανόηση της δομής που υπονοείται από την παρουσίαση.
Εξετάστε την κωδικοποίηση ενός εγγράφου.
Ελέγξτε ότι οι δομικές πληροφορίες και η λειτουργικότητα παρέχοντα ρητά και διαχωρίζονται λογικά από τις πληροφορίες παρουσίασης.
Ελέγξτε ότι το #2 είναι αληθές.
Σελίδες με περιεχόμενο οργανωμένο σε ενότητες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλιστεί ότι οι ενότητες έχουν επικεφαλίδες που τις προσδιορίζουν. Το κριτήριο επιτυχίας 1.3.1 απαιτεί αυτές οι επικεφαλίδες να επισημαίνονται κατάλληλα, έτσι ώστε να μπορούν να προσδιοριστούν μέσω προγραμματισμού.
Στην HTML, αυτό θα γίνεται χρησιμοποιώντας τα στοιχεία επικεφαλίδας HTML (h1, h2, h3, h4, h5 και h6). Αυτά επιτρέπουν στους πράκτορες χρήστη να προσδιορίζουν αυτόματα τις επικεφαλίδες ενότητας. Άλλες τεχνολογίες κάνουν χρήση άλλων τεχνικών για τον προσδιορισμό επικεφαλίδων. Για τη διευκόλυνση της πλοήγησης και κατανόησης της συνολικής δομής του εγγράφου, οι συγγραφείς θα πρέπει να χρησιμοποιούν επικεφαλίδες που είναι κατάλληλα ένθετες (π.χ. η h1 ακολουθείται από την h2, η h2 ακολουθείται από την h3, η h3 ακολουθείται από την h4 κ.ο.κ.).
Μια σελίδα με τεχνικές μαγειρικής χρησιμοποιεί ένα στοιχείο h1 για τον συνολικό τίτλο και στοιχεία h2 για τις κύριες ενότητες σχετικά με τη μαγειρική με λάδι αντί για βούτυρο και στοιχεία h3 για υποενότητες που αφορούν σε τεχνικές μαγειρικής με λάδι.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
... some text here ...
<h2>Cooking with oil</h2>
... text of the section ...
<h3>Sautéeing</h3>
....
<h3>Deep frying</h3>
<h2>Cooking with butter</h2>
... text of the section ...
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε μια σελίδα με περιεχόμενο οργανωμένο σε ενότητες.
Ελέγξτε ότι υπάρχει μια επικεφαλίδα για κάθε ενότητα.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες με δυνατότητα μεγέθυνσης που παρέχει ο πράκτορας χρήστη.
Αυτή η τεχνική σχετίζεται με:
Η λειτουργία μεγέθυνση (Zoom) στον IE 7.0 δεν κλιμακώνει πάντα ομοιόμορφα όταν χρησιμοποιείται απόλυτη τοποθέτηση και η σελίδα συρρικνώνεται. Ο Microsoft Internet Explorer 7.0 υποστηρίζει τόσο αλλαγές μεγέθυνσης, όσο και μεγέθους κειμένου για γραμματοσειρές που ορίζονται με %, em ή γνωστά μεγέθη.
Ο Opera 9 υποστηρίζει λειτουργία μεγέθυνσης.
Ο Firefox 2 και παλαιότερες εκδόσεις υποστηρίζουν μόνο αλλαγές μεγέθους κειμένου, αλλά μπορεί να αλλάξει το μέγεθος γραμματοσειρών pt και px, καθώς και τα %, em και γνωστά μεγέθη.
Ο Firefox 3 υποστηρίζει τόσο αλλαγές μεγέθυνσης, όσο και μεγέθους κειμένου.
Σκοπός αυτής της τεχνικής είναι να διασφαλιστεί ότι το περιεχόμενο μπορεί να κλιμακώνεται ομοιόμορφα χρησιμοποιώντας μια τεχνολογία Ιστού που υποστηρίζεται από πράκτορες χρήστη που αλλάζουν το μέγεθος κειμένου μέσω ενός εργαλείου μεγέθυνσης.
Περιεχόμενο που συντάσσεται σε τεχνολογίες που υποστηρίζονται από πράκτορες χρήστη οι οποίοι μπορούν να κλιμακώνουν περιεχόμενο ομοιόμορφα (δηλαδή να μεγεθύνουν το περιεχόμενο), ικανοποιεί αυτό το κριτήριο επιτυχίας. Καθώς αυτή η τεχνική βασίζεται αποκλειστικά στη λειτουργικότητα του πράκτορα χρήστη, είναι σημαντικό να διενεργείται έλεγχος με μια μεγάλη ποικιλία πρακτόρων χρήστη.
Αυτή η τεχνική απαιτεί η λειτουργία μεγέθυνσης να διατηρεί όλες τις χωρικές σχέσεις στη σελίδα και όλη η λειτουργικότητα συνεχίζει να είναι διαθέσιμη.
Ο Internet Explorer 7 και ο Opera 9 παρέχουν μια λειτουργία μεγέθυνσης που κλιμακώνει ομοιόμορφα περιεχόμενο σελίδας HTML/CSS.
Για να επιτραπεί σε χρήστες να αλλάξουν το μέγεθος κειμένου, το Adobe Reader παρέχει ένα εργαλείο μεγέθυνσης που κλιμακώνει ομοιόμορφα τις σελίδες PDF.
(καμία δεν εμπεριέχεται στη λίστα)
Εμφάνιση περιεχομένου σε πράκτορα χρήστη.
Μεγέθυνση περιεχομένου σε 200%
Ελέγξτε εάν όλο το περιεχόμενο και οι λειτουργίες είναι διαθέσιμα
Ελέγξτε ότι το #3 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή πληροφοριών μέσω του εναλλακτικού κειμένου που προσδιορίζει το μη κειμενικό περιεχόμενο καθώς ο "Πλήρως αυτοματοποιημένος δημόσιος έλεγχος Turing που διακρίνει ανάμεσα στους υπολογιστές και τους ανθρώπους" (CAPTCHA) ζητά συχνά από τον χρήστη να πληκτρολογήσει κείμενο που παρουσιάζεται σε μια παραμορφωμένη εικόνα ή ηχητικό αρχείο. Από το εναλλακτικό κειμένου, ο χρήστης είναι σε θέση να γνωρίζει ότι ο CAPTCHA απαιτεί την ολοκλήρωση μιας εργασίας και για τι τύπο εργασίας πρόκειται.
Όταν μια εναλλακτική έκδοση ενός CAPTCHA είναι διαθέσιμη, το εναλλακτικό κειμένου θα πρέπει να περιλαμβάνει οδηγίες για τον τρόπο εύρεσης της εναλλακτικής έκδοσης.
Ένας έλεγχος CAPTCHA ζητά από τον χρήστη να πληκτρολογήσει κείμενο που εμφανίζεται σε μια παραμορφωμένη εικόνα. Το εναλλακτικό κειμένου είναι "Πληκτρολογήστε τη λέξη της εικόνας".
Ένας έλεγχος CAPTCHA ζητά από τον χρήστη να πληκτρολογήσει κείμενο που αναπαράγεται σε ένα ηχητικό αρχείο. Το εναλλακτικό κειμένου είναι "Πληκτρολογήστε τα γράμματα που ακούγονται στο αρχείο".
Αφαιρέστε, αποκρύψτε ή καλύψτε τον CAPTCHA.
Αντικαταστήστε με το εναλλακτικό κειμένου.
Ελέγξτε ότι το εναλλακτικό κειμένου περιγράφει τον σκοπό του CAPTCHA.
Ελέγξτε ότι το #3 είναι αληθές.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να μειωθούν οι περιπτώσεις στις οποίες ένας χρήστης με αναπηρία δεν μπορεί να ολοκληρώσει μια εργασία CAPTCHA. Καθώς υπάρχουν εναλλακτικές εργασίες CAPTCHA που κάνουν χρήση διαφορετικών τρόπων, ένας χρήστης είναι περισσότερο πιθανό να είναι σε θέση να ολοκληρώσει μία από τις εργασίες επιτυχώς.
Μια Ιστοσελίδα που περιλαμβάνει έναν έλεγχο CAPTCHA πρέπει να ολοκληρωθεί επιτυχώς πριν ο χρήστης να προχωρήσει στο επόμενο βήμα μιας διαδικασίας. Η σελίδα περιλαμβάνει τόσο μια οπτική εργασία, όπως πληκτρολόγηση λέξεων που εμφανίζονται σε μια εικόνα, αλλά και ηχητική εργασία, όπως πληκτρολόγηση λέξεων που ακούγονται σε ένα ηχητικό αρχείο. Ένας χρήστης με αναπηρία ακοής που δεν μπορεί να ολοκληρώσει επιτυχώς τον ηχητικό έλεγχο CAPTCHA, ενδέχεται να είναι σε θέση να ολοκληρώσει έναν έλεγχο βίντεο CAPTCHA.
Μια φόρμα σχολίων ιστολογίου περιλαμβάνει έναν οπτικό CAPTCHA που πρέπει να συμπληρωθεί πριν ο χρήστης υποβάλει σχόλια. Επιπλέον του οπτικού CAPTCHA, περιλαμβάνει έναν CAPTCHA με ένα πεδίο φόρμας που κάνει την ερώτηση, "Πόσο κάνει δύο συν επτά;", με ένα πεδίο καταχώρησης κειμένου που επιτρέπει στους χρήστες να εισάγουν τη σωστή απάντηση.
Για κάθε CAPTCHA σε μια Ιστοσελίδα
Διασφάλιση ότι η Ιστοσελίδα περιέχει άλλο CAPTCHA που εξυπηρετεί τον ίδιο σκοπό χρησιμοποιώντας διαφορετικό τρόπο.
Ελέγξτε ότι το #1 είναι αληθές.
Κάθε τεχνολογία με οπτικά δεδομένα εξόδου
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να εξασφαλίσει ότι οι χρήστες μπορούν να διαβάσουν κείμενο που τους παρουσιάζεται πάνω σε παρασκήνιο. Αυτή η τεχνική καθιστά πιο ήπια την απαίτηση για αναλογία αντίθεσης 4,5:1 για κείμενο που είναι τουλάχιστον 18 στιγμές (όχι σε έντονη γραφή) ή τουλάχιστον 14 στιγμές (έντονη γραφή).
Εάν το παρασκήνιο είναι ένα συμπαγές χρώμα (όλο μαύρο ή όλο λευκό), τότε η αναλογία αντίθεσης του κειμένου μεγαλύτερης κλίμακας μπορεί να διατηρηθεί διασφαλίζοντας ότι κάθε γράμμα του κειμένου έχει 3:1 αναλογία αντίθεσης με το παρασκήνιο.
Εάν η σχετική φωτεινότητα του παρασκηνίου ή των γραμμάτων ποικίλλει (ή ακολουθούν πρότυπο), τότε το παρασκήνιο γύρω από τα γράμματα μπορεί να επιλεγεί ή να σκιαστεί έτσι ώστε τα γράμματα να διατηρήσουν τον αναλογία αντίθεσης 3:1 με το παρασκήνιο πίσω τους ακόμα και αν δεν έχουν την ίδια αναλογία αντίθεσης με όλο το παρασκήνιο.
Η αναλογία αντίθεσης μπορεί συχνά να διατηρηθεί με αλλαγή της σχετικής φωτεινότητας των γραμμάτων καθώς η σχετική φωτεινότητα του παρασκηνίου αλλάζει σε όλη τη σελίδα.
Μια άλλη μέθοδος είναι η ύπαρξη ενός φωτεινού περιγράμματος (halo) γύρω από το κείμενο που παρέχει την απαραίτητη αναλογία αντίθεσης εάν η εικόνα ή το χρώμα παρασκηνίου δεν διαφέρει επαρκώς σε σχετική φωτεινότητα.
Επιλέγεται μαύρο παρασκήνιο έτσι ώστε να είναι δυνατή η χρήση γραμμάτων σε ανοικτό χρώμα που ταιριάζουν με το λογότυπο της εταιρείας.
Κείμενο μεγαλύτερης κλίμακας έχει τοποθετηθεί πάνω από εικόνα των χώρων (campus) του κολλεγίου. Εφόσον εμφανίζεται μια μεγάλη ποικιλία χρωμάτων και βαθμών σκοτεινότητας στην εικόνα, η περιοχή πίσω από το κείμενο παίρνει ένα θολό λευκό χρώμα, τέτοιο που η εικόνα είναι πολύ αχνή και ο μέγιστος βαθμός σκοτεινότητας είναι και πάλι αρκετά ανοικτός για τη διατήρηση της αναλογίας αντίθεσης 3:1 με το μαύρο κείμενο γραμμένο πάνω στην εικόνα
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανάλυση αντίθεσης - Εφαρμογή (Contrast Analyser - Application)
Ανάλυση αναλογίας αντίθεσης - ηλεκτρονική υπηρεσία (Contrast Ratio Analyser - online service)
Ανάλυση χρωματικής αντίθεσης - επέκταση για Firefox (Colour Contrast Analyser - Firefox Extension)
Χρώματα στην ανάλυση χρωματικής αντίθεσης Ιστού (Colors On the Web Color Contrast Analyzer)
Λίστα εργαλείων χρωματικής αντίθεσης (List of color contrast tools)
(καμία δεν εμπεριέχεται στη λίστα)
Μετρήστε τη σχετική φωτεινότητα για κάθε γράμμα (εκτός εάν είναι όλα ομοιόμορφα) χρησιμοποιώντας τον τύπο:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B όπου τα R, G και B καθορίζονται ως εξής:
εάν RsRGB <= 0.03928 τότε R = RsRGB/12.92, διαφορετικά R = ((RsRGB+0.055)/1.055) ^ 2.4
εάν GsRGB <= 0.03928 τότε G = GsRGB/12.92, διαφορετικά G = ((GsRGB+0.055)/1.055) ^ 2.4
εάν BsRGB <= 0.03928 τότε B = BsRGB/12.92, διαφορετικά B = ((BsRGB+0.055)/1.055) ^ 2.4
και τα RsRGB, GsRGB και BsRGB καθορίζονται ως εξής:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Ο χαρακτήρας "^" είναι ο τελεστής ύψωσης σε δύναμη.
Σημείωση: Για aliased γράμματα, χρησιμοποιήστε τη σχετική φωτεινότητα που εντοπίζεται στα δύο pixel μέσα από την άκρη του γράμματος.
Μετρήστε τη σχετική φωτεινότητα των pixel παρασκηνίου ακριβώς μετά το γράμμα χρησιμοποιώντας τον ίδιο τύπο.
Μετρήστε την αναλογία αντίθεσης χρησιμοποιώντας τον ίδιο τύπο.
(L1 + 0.05) / (L2 + 0.05), όπου
Το L1 είναι η σχετική φωτεινότητα (relative luminance) του πιο ανοικτού από τα χρώματα προσκηνίου ή παρασκηνίου και
L2 είναι η σχετική φωτεινότητα (relative luminance) του πιο σκούρου από τα χρώματα προσκηνίου ή παρασκηνίου.
Ελέγξτε ότι η αναλογία αντίθεσης είναι ίση ή μεγαλύτερη από 3:1
Το #4 είναι αληθές
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να είναι σε θέση να παρουσιάζει περιεχόμενο χωρίς την εισαγωγή οριζόντιων γραμμών κύλισης, χρησιμοποιώντας τεχνικές διάταξης που υιοθετούν τον διαθέσιμο οριζόντιο χώρο. Οι υγρές διατάξεις ορίζουν περιοχές διάταξης που αλλάζουν μέγεθος κειμένου και διαμορφώνουν εκ νέου τη ροή, όπως είναι απαραίτητο, για την εξυπηρέτηση εμφάνισης στην οθόνη. Αν και η ακριβής διάταξη ποικίλλει, η σχέση των στοιχείων και η σειρά ανάγνωσης παραμένει ίδια. Αυτός είναι ένας αποτελεσματικός τρόπος δημιουργίας σχεδίων που παρουσιάζουν σωστή μορφή σε διαφορετικές συσκευές και για χρήστες με διαφορετικές προτιμήσεις μεγέθους γραμματοσειράς.
Οι βασικές αρχές υγρών διατάξεων είναι:
Ορίστε το μέγεθος των περιοχών διάταξης χρησιμοποιώντας μονάδες που θα προκαλούν σχετική προς το κείμενο κλιμάκωση της περιοχής, έτσι ώστε να μεγεθύνονται ή να συρρικνώνονται καθώς το κείμενο μεγεθύνεται ή συρρικνώνεται.
Τοποθετήστε τις περιοχές διάταξης ως μια σειρά παρακείμενων κινητών πλαισίων, τα οποία αναδιπλώνονται σε νέες σειρές όπως είναι απαραίτητο, όπως περίπου και οι λέξεις σε μια αναδίπλωση παραγράφου.
Σύνθετες υγρές διατάξεις ενδέχεται να επιτευχθούν μέσω ένθετων περιοχών διάταξης, δημιουργώντας επομένως τοπικές υγρές διατάξεις εντός μιας μεγαλύτερης υγρής διάταξης. Ακόμα και απλές υγρές διατάξεις απαιτούν σχεδιαστική επιδεξιότητα για την επίτευξη όμορφων αποτελεσμάτων σε μια μεγάλη σειρά μεγεθών κειμένου, αλλά οι καλοσχεδιασμένες υγρές διατάξεις μπορούν να είναι η πιο αποτελεσματική σχεδίαση σελίδας.
Το ακόλουθο σχετικά απλό παράδειγμα, χρησιμοποιεί HTML και CSS για τη δημιουργία μιας υγρής διάταξης. Οι τρεις στήλες ρυθμίζουν το μέγεθός τους καθώς ρυθμίζεται το μέγεθος κειμένου. Όταν το συνολικό οριζόντιο πλάτος υπερβεί το διαθέσιμο πλάτος των στηλών, η τελευταία στήλη αναδιπλώνει για να τοποθετηθεί κάτω από την προηγούμενη στήλη, αντί στο πλάι. Το μέγεθος γραμματοσειράς μπορεί να αυξηθεί χωρίς αποκοπή ή εισαγωγή οριζόντιας κύλισης, έως ότου η μεγαλύτερη λέξη να μην ταιριάζει πλέον σε μια στήλη. Αυτό το συγκεκριμένο παράδειγμα χρησιμοποιεί ποσοστό μεγέθους για τις στήλες και τις ορίζει ως κινητές περιοχές μέσω της ιδιότητας "float".
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example of Basic Liquid Layout</title>
<style type="text/css">
.column
{
border-left: 1px solid green;
padding-left:1%;
float: left;
width: 32%;
}
#footer
{
border-top: 1px solid green;
clear: both;
}
</style>
</head>
<body>
<h1>WCAG Example</h1>
<h2>Text in Three Columns</h2>
<div title="column one" class="column">
<h3>Block 1</h3>
<p> The objective of this technique is to be able to present content
without introducing horizontal scroll bars by using layout
techniques that adapt to the available horizontal space.
</p>
</div>
<div title="column two" class="column">
<h3>Block 2</h3>
<p> This is a very simple example of a page layout that adapts as the
text size changes.
</p>
</div>
<div title="column three" class="column">
<h3>Block 3</h3>
<p> For techniques that support more complex page layouts, see the
Resources listed below.
</p>
</div>
<p id="footer">Footer text</p>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
CSS Mastery: Διατάξεις σταθερού πλάτους, υγρές και ελαστικές και στήλες "faux" (CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns)
Εμφάνιση περιεχομένου σε πράκτορα χρήστη.
Αύξηση του μεγέθους κειμένου σε 200%.
Ελέγξτε εάν όλο το περιεχόμενο και οι λειτουργίες είναι διαθέσιμα χωρίς οριζόντια κύλιση.
Ελέγξτε ότι το #3 είναι αληθές.
Οποιαδήποτε τεχνολογία όπου τα χρώματα κειμένου και παρασκηνίου καθορίζονται ξεχωριστά και οι εφαρμογές περιήγησης μπορούν να ελέγξουν προεπιλεγμένα χρώματα.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να εξασφαλίσει ότι οι χρήστες μπορούν να διαβάσουν κείμενο που τους παρουσιάζεται πάνω σε παρασκήνιο. Με αυτή την τεχνική, ο συγγραφέας αποφεύγει να προβεί σε μετρήσεις αντίθεσης απλά μην καθορίζοντας το χρώμα κειμένου και το παρασκήνιο. Κατά συνέπεια, τα χρώματα και των δύο καθορίζονται πλήρως από τον πράκτορα χρήστη.
Παράδειγμα 1: Ο συγγραφέας δεν καθορίζει ούτε χρώμα κειμένου, ούτε παρασκήνιο. Επίσης, δεν χρησιμοποιεί CSS. Κατά συνέπεια, ο χρήστης μπορεί να ρυθμίσει τις προεπιλογές της εφαρμογής περιήγησης για την παροχή χρωμάτων και αντιθέσεων που θα είναι αποτελεσματικές για αυτόν.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανάλυση αντίθεσης - Εφαρμογή (Contrast Analyser - Application)
Ανάλυση αναλογίας αντίθεσης - ηλεκτρονική υπηρεσία (Contrast Ratio Analyser - online service)
Ανάλυση χρωματικής αντίθεσης - επέκταση για Firefox (Colour Contrast Analyser - Firefox Extension)
Χρώματα στην ανάλυση χρωματικής αντίθεσης Ιστού (Colors On the Web Color Contrast Analyzer)
Λίστα εργαλείων χρωματικής αντίθεσης (List of color contrast tools)
Κοιτάξτε σε όλα τα σημεία όπου μπορεί να καθοριστεί το χρώμα κειμένου
Ελέγξτε ότι το χρώμα κειμένου δεν καθορίζεται
Κοιτάξτε σε όλες τις περιοχές όπου είναι δυνατός ο καθορισμός του χρώματος ή της εικόνας που χρησιμοποιείται ως παρασκήνιο
Ελέγξτε ότι δεν έχει καθοριστεί χρώμα ή εικόνα που χρησιμοποιείται ως παρασκήνιο
Τα #2 και #4 είναι αληθή
Όλες οι τεχνολογίες με δυνατότητα επισήμανσης που παρέχει ο πράκτορας χρήστη.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλιστεί ότι το συστατικό στοιχείο με επισήμανση μπορεί να προσδιοριστεί οπτικά από τον χρήστη μέσω της υποστήριξης του πράκτορα χρήστη. Είναι σύνηθες για πράκτορες χρήστη να επισημαίνουν τυπικά στοιχεία ελέγχου με ορισμένο τρόπο όταν επισημαίνονται. Οι πράκτορες χρήστη που συμμορφώνονται με τις οδηγίες UAAG το κάνουν όταν ικανοποιούν το σημείο ελέγχου 10.2 "Επισήμανση επιλογής, σήμανση περιεχομένου, ενεργοποιημένα στοιχεία, σύνδεσμοι που έχουν επισκεφθεί". Όταν συγγραφείς χρησιμοποιούν τυπικά στοιχεία ελέγχου για τα οποία ο πράκτορας χρήστη παρέχει αυτή την υποστήριξη, οι χρήστες ενημερώνονται για τη θέση της επισήμανσης με έναν τυπικό, προβλέψιμο τρόπο.
Όταν πεδία εισόδου κειμένου html λαμβάνουν επισήμανση, τα προγράμματα περιήγησης εμφανίζουν μια κάθετη γραμμή που αναβοσβήνει στο σημείο εισόδου του πεδίου κειμένου.
Όταν σύνδεσμοι html λαμβάνουν επισήμανση, περιβάλλονται από ένα διάστικτο ορθογώνιο επισήμανσης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε συστατικό στοιχείο στην Ιστοσελίδα με δυνατότητα σήμανσης:
Ορίστε τη σήμανση στο στοιχείο ελέγχου
Ελέγξτε εάν ο πράκτορας χρήστη έχει επισημάνει το στοιχείο ελέγχου με κάποιον τρόπο
Το #2 είναι αληθές
Όλες οι τεχνολογίες που παρουσιάζουν ζωντανές πληροφορίες, μόνο ήχου
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε χρήστες που δεν μπορούν να ακούσουν, την πρόσβαση σε εκπομπές ήχου πραγματικού χρόνου. Είναι πιο δύσκολο να δημιουργηθούν ακριβείς εναλλακτικές πραγματικού χρόνου, διότι υπάρχει λίγος χρόνος για τη διόρθωση σφαλμάτων ή για δεύτερη ακρόαση ή για επιβεβαίωση με τρίτο άτομο ότι οι λέξεις αναπαράγονται με ακρίβεια. Είναι επίσης πιο δύσκολη η απλοποίηση ή η παράφραση πληροφοριών διότι κυλούν πολύ γρήγορα.
Υπάρχουν τεχνικές καταχώρησης κειμένου με πληκτρολόγηση σε πραγματικό χρόνο που κάνουν χρήση τεχνολογιών στενογραφίας και ταχείας δακτυλογράφησης. Η επανεκφώνηση ομιλίας σε κείμενο (κατά την οποία ένα άτομο ακούει μια ομιλία και έπειτα την επανεκφωνεί πολύ προσεκτικά σε έναν υπολογιστή που είναι εκπαιδευμένος στην ομιλία αυτού του ατόμου) χρησιμοποιείται σήμερα για υπηρεσίες διασύνδεσης τηλεφωνικών κλήσεων και μπορεί να χρησιμοποιηθεί στο μέλλον για δημιουργία επεξηγήσεων. Τέλος, είναι δυνατή η μετατροπή ομιλίας σε κείμενο με διορθώσεις.
Ένας ραδιοφωνικός σταθμός χρησιμοποιεί υπηρεσίες δημιουργίας επεξηγήσεων Ιστού για την παροχή εναλλακτικών λύσεων για ζωντανά αθλητικά γεγονότα. Η έξοδος από την υπηρεσία ενσωματώνεται σε ένα παράθυρο προβολής της Ιστοσελίδας, το οποίο περιλαμβάνει επίσης ένα στοιχείο ελέγχου ροής ήχου.
Ελέγξτε ότι γίνεται χρήση διαδικασίας και πολιτικής που διασφαλίζουν ότι οι εναλλακτικές παραδίδονται σε πραγματικό χρόνο
Το #1 είναι αληθές
Όλες οι τεχνολογίες που παρουσιάζουν ζωντανές πληροφορίες, μόνο ήχου
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας μεταγραφής ή αρχείου εντολών, εάν το ζωντανό περιεχόμενο ήχου ακολουθεί ένα ορισμένο αρχείο εντολών. Καθώς προετοιμάζεται εκ των προτέρων, το αρχείο εντολών μπορεί να είναι περισσότερο ακριβές και πλήρες από τη ζωντανή μεταγραφή. Ωστόσο, το αρχείο εντολών δεν θα συγχρονιστεί με τον ήχο παράλληλα με την αναπαραγωγή. Ο ζωντανός ήχος δεν θα παρεκκλίνει από το αρχείο εντολών για αυτήν την τεχνική.
Με αυτήν την τεχνική, ένας σύνδεσμος για τη μεταγραφή ή το αρχείο εντολών παρέχεται και θα πρέπει να συμμορφώνεται με το WCAG 2.0 και μπορεί είτε να συμπεριλαμβάνεται σε μια άλλη θέση στην ίδια Ιστοσελίδα, ή σε άλλο URI.
Μια ζωντανή ραδιοφωνική παράσταση μιας πειραματικής θεατρικής ομάδας, εκπέμπεται στον Ιστό. Καθώς οι ηθοποιοί ακολουθούν κυρίως ένα δεδομένο σενάριο και ο προϋπολογισμός του προγράμματος είναι μικρός, οι παραγωγοί παρέχουν έναν σύνδεσμο (με την άδεια του θεατρικού συγγραφέα) προς το σενάριο του έργου σε μορφή HTML.
Ένα μέλος της κυβέρνησης εκφωνεί μια σημαντική πολιτική ομιλία στον Ιστό. Μια μεταγραφή της ομιλίας είναι διαθέσιμη στον ιστότοπο όταν αρχίζει η ομιλία.
Ελέγξτε για την παρουσία ενός συνδέσμου που δείχνει απευθείας στο σενάριο ή τη μεταγραφή.
Ελέγξτε ότι ο ζωντανός ήχος ακολουθεί το σενάριο.
Εάν οι εναλλακτικές εκδόσεις βρίσκονται σε ξεχωριστή σελίδα, ελέγξτε τη διαθεσιμότητα των συνδέσμων που επιτρέπουν στον χρήστη να λάβει τις άλλες εκδόσεις.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Κάθε τεχνολογία που υποστηρίζει κινούμενα gif (GIF89a)
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλιστεί ότι οι κινούμενες εικόνες gif παύουν να αναβοσβήνουν εντός πέντε δευτερολέπτων. Υπάρχουν τρεις όψεις της σχεδίασης κινούμενων εικόνων gif που συνεργάζονται για τον καθορισμό της διάρκειας του αναβοσβησίματος της εικόνας (ή της κίνησης γενικότερα):
ο αριθμός των πλαισίων στην εικόνα, τα οποία είναι διακριτές εικόνες στην ακολουθία της κίνησης,
ο ρυθμός πλαισίων, ο οποίος είναι η διάρκεια εμφάνισης κάθε εικόνας,
ο αριθμός των επαναλήψεων, ο οποίος δείχνει πόσες φορές εκτελείται ολόκληρη η κίνηση,
Στην πιο απλή μορφή, η διάρκεια της κίνησης είναι ο αριθμός των πλαισίων επί τον ρυθμό πλαισίων, επί τον αριθμό των επαναλήψεων. Για παράδειγμα, μια απλή εικόνα που αναβοσβήνει με 2 πλαίσια, ρυθμό πλαισίων 0,5 δευτερολέπτων και 3 επαναλήψεις, θα έχει διάρκεια (2 * 0,5 * 3) δευτερόλεπτα ή ακριβώς 3 δευτερόλεπτα.
Πολλές κινούμενες εικόνες gif έχουν ένα σταθερό ρυθμό πλαισίων, δηλαδή ο χρόνος εμφάνισης κάθε πλαισίου είναι ίδιος. Ωστόσο, είναι δυνατό να ορίσετε διαφορετικό ρυθμό πλαισίων για κάθε πλαίσιο, ώστε να επιτραπεί σε ορισμένα πλαίσια να έχουν μεγαλύτερη διάρκεια εμφάνισης από άλλα. Στην περίπτωση αυτή, η διάρκεια της κίνησης είναι το άθροισμα των ρυθμών πλαισίων επί τον αριθμό των επαναλήψεων. Για παράδειγμα, μια απλή εικόνα με δύο πλαίσια, το πρώτο εκ των οποίων εμφανίζεται για 0,75 δευτερόλεπτα και το δεύτερο για 0,25 δευτερόλεπτα και τρεις επαναλήψεις, θα έχουν διάρκεια ((0,75 + 0,25) * 3) δευτερόλεπτα ή ακριβώς 3 δευτερόλεπτα.
Προκειμένου μια εικόνα να πάψει να αναβοσβήνει εντός 5 δευτερολέπτων, μία από τις τρεις μεταβλητές θα πρέπει να ρυθμιστεί. Συχνότερα ορίζεται ο αριθμός επαναλήψεων σε πέντε δευτερόλεπτα, διαιρούμενος με το γινόμενο του αριθμού των πλαισίων επί του ρυθμού πλαισίων (ή το άθροισμα του ρυθμού πλαισίων). Στρογγυλοποιήστε αυτόν τον αριθμό στον πλησιέστερο ακέραιο προς τα κάτω, μην στρογγυλοποιήσετε προς τον επόμενο ακέραιο, για να διασφαλιστεί ότι η εικόνα θα διακοπεί εντός πέντε δευτερολέπτων.
Εάν ακόμη και μία επανάληψη οδηγεί σε περισσότερα από πέντε δευτερόλεπτα κίνησης, ένας από τους άλλους παράγοντες πρέπει να ρυθμιστεί. Μειώστε τον αριθμό πλαισίων στην εικόνα ή αυξήστε τον ρυθμό πλαισίων. Προσέξτε κατά την αύξηση του ρυθμού πλαισίων ότι η εικόνα που προκύπτει δεν αποτυγχάνει στην ικανοποίηση της απαίτησης για τη μη υπέρβαση του γενικού ορίου φλας ή κόκκινου φλας. Η προσοχή σε αυτό το θέμα είναι ιδιαίτερα σημαντική για μεγάλες εικόνες.
Μια απλή εικόνα που αναβοσβήνει. Μια εικόνα έχει 2 πλαίσια, ρυθμό πλαισίων 0,5 δευτερολέπτων και 3 επαναλήψεις. Η κίνηση έχει διάρκεια (2 * 0,5 * 3) δευτερόλεπτα ή ακριβώς 3 δευτερόλεπτα και επομένως, ικανοποιεί τις απαιτήσεις του Κριτηρίου Επιτυχίας.
Εμφάνιση μιας κινούμενης εικόνας και χρονισμός της διάρκειας κίνησης.
Εναλλακτικά, χρησιμοποιήστε ένα πρόγραμμα επεξεργασίας εικόνας για να καθορίσετε τον αριθμό πλαισίων, τον ρυθμό πλαισίων και τον αριθμό των επαναλήψεων. Υπολογίστε το γινόμενο του αριθμού πλαισίων πολλαπλασιασμένο επί τον ρυθμό πλαισίων, επί τον αριθμό των επαναλήψεων. Εάν οι ρυθμοί πλαισίων δεν είναι ομοιόμορφοι, υπολογίστε το γινόμενο του αθροίσματος των ρυθμών πλαισίων, πολλαπλασιασμένο με τον αριθμό των επαναλήψεων.
Χρησιμοποιώντας οποιασδήποτε μέθοδο, η διάρκεια της κίνησης θα πρέπει να είναι μικρότερη ή ίση των 5 δευτερολέπτων.
Ελέγξτε ότι το #3 είναι αληθές.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλιστεί ότι το κείμενο της Ιστοσελίδας είναι ευανάγνωστο. Οι χρήστες με αναπηρίες που δυσκολεύονται να αποκωδικοποιήσουν λέξεις και προτάσεις είναι πιθανόν να έχουν πρόβλημα στην ανάγνωση και κατανόηση περίπλοκου κειμένου. Εάν το κείμενο δεν απαιτεί ικανότητα ανάγνωσης υψηλότερη του επιπέδου κατώτερης δευτεροβάθμιας εκπαίδευσης, δεν απαιτούνται πρόσθετα ή εναλλακτικές εκδόσεις.
Προκειμένου να μειωθεί η πολυπλοκότητα του κειμένου:
Αναπτύξτε ένα μεμονωμένο θέμα ή δευτερεύον θέμα ανά παράγραφο.
Χρησιμοποιήστε τις απλούστερες μορφές πρότασης, συνεπείς με τον σκοπό του περιεχομένου. Για παράδειγμα, η απλούστερη μορφή πρότασης για τα Ελληνικά συνίσταται από Υποκείμενο-Ρήμα-Αντικείμενο, όπως στην περίπτωση "Ο Γιάννης χτύπησε την μπάλα" ή "Η Ιστοσελίδα συμμορφώνεται με το WCAG 2.0".
Χρησιμοποιήστε προτάσεις που δεν είναι μεγαλύτερες του τυπικά αποδεκτού μεγέθους για δευτεροβάθμια εκπαίδευση. (Σημείωση: Στα Ελληνικά αυτό αφορά 25 λέξεις.)
Εξετάστε τη δυνατότητα διαίρεσης των μακρύτερων προτάσεων στα δύο.
Χρησιμοποιήστε προτάσεις που δεν περιέχουν περισσότερους από δύο συνδέσμους.
Υποδείξτε λογικές σχέσεις μεταξύ φράσεων, προτάσεων, παραγράφων ή ενοτήτων του κειμένου.
Αποφύγετε επαγγελματικές τεχνικές γλώσσες, αργκό και άλλους όρους με εξειδικευμένο νόημα που ενδέχεται να μην είναι κατανοητοί από τον κόσμο.
Αντικαταστήστε μεγάλες ή άγνωστες λέξεις με πιο σύντομους, πιο κοινούς όρους.
Καταργήστε πλεονάζουσες λέξεις, δηλαδή λέξεις που δεν αλλάζουν το νόημα της πρότασης.
Χρησιμοποιήστε μεμονωμένα ουσιαστικά ή σύντομες φράσεις-ουσιαστικά.
Καταργήστε σύνθετες λέξεις ή φράσεις που μπορούν να αντικατασταθούν με περισσότερο κοινές λέξεις, χωρίς αλλαγή του νοήματος της πρότασης.
Χρησιμοποιήστε λίστες με κουκίδες ή αριθμημένες λίστες αντί για παραγράφους που περιέχουν μεγάλες σειρές λέξεων ή φράσεων, διαχωρισμένων με κόμματα.
Αποσαφηνίστε αναφορές αντωνυμιών και αναφορές σε άλλα σημεία στο έγγραφο.
Χρησιμοποιήστε την ενεργητική φωνή για έγγραφα γραμμένα στα Αγγλικά και ορισμένες άλλες δυτικές γλώσσες, εκτός εάν υπάρχει συγκεκριμένος λόγος για τη χρήση παθητικών δομών. Οι προτάσεις στην ενεργητική φωνή είναι συχνά πιο σύντομες και εύκολο να κατανοηθούν, σε σχέση με εκείνες της παθητικής φωνής.
Χρησιμοποιήστε διαρκώς χρόνους ρημάτων.
Χρησιμοποιήστε συνεχώς ονόματα και ετικέτες.
Οι σελίδες βοήθειας για μια εφαρμογή Ιστού συντάσσονται σε γλώσσα που δεν είναι πιο σύνθετη από το επίπεδο της κατώτερης δευτεροβάθμιας εκπαίδευσης.
Μετρήστε την αναγνωσιμότητα του κειμένου.
Ελέγξτε ότι το κείμενο απαιτεί ικανότητα ανάγνωσης χαμηλότερη του επιπέδου κατώτερης δευτεροβάθμιας εκπαίδευσης.
Ελέγξτε ότι το #2 είναι αληθές.
Κάθε τεχνολογία
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τετραγώνου επιλογής που οι χρήστες πρέπει να επιλέξουν για να υποδείξουν ότι έχουν αναθεωρήσει την είσοδό τους και είναι έτοιμοι για δέσμευση αυτής. Αυτό είναι σημαντικό όταν η φύση της συναλλαγής είναι τέτοια που δεν μπορεί να είναι αναστρέψιμη εάν ανιχνευθούν στη συνέχεια σφάλματα εισόδου ή όταν το αποτέλεσμα μιας ενέργειας είναι η διαγραφή δεδομένων. Ο συγγραφέας παρέχει ένα τετράγωνο επιλογής που δεν επιλέγεται όταν φορτώνει η σελίδα, με μια ετικέτα του τύπου "Επιβεβαιώνω ότι η είσοδος είναι σωστή και είμαι έτοιμος για υποβολή" ή "Επιβεβαιώνω ότι επιθυμώ να διαγράψω αυτά τα δεδομένα". Το τετράγωνο επιλογής θα πρέπει να βρίσκεται κοντά στο κουμπί υποβολής για να βοηθήσει τον χρήστη να το αντιληφθεί κατά τη διαδικασία υποβολής. Εάν το τετράγωνο επιλογής δεν επιλεγεί κατά την υποβολή της φόρμας, η είσοδος απορρίπτεται και ζητείται από τον χρήστη να αναθεωρήσει την είσοδό του, να επιλέξει το τετράγωνο επιλογής και να υποβάλει εκ νέου. Μόνο όταν επιλεγεί το τετράγωνο επιλογής θα γίνει αποδεκτή η είσοδος και θα γίνει επεξεργασία της συναλλαγής.
Αυτό το τετράγωνο επιλογής βοηθά στην προστασία έναντι των συνεπειών μιας τυχαίας υποβολής φόρμας και εξυπηρετεί επίσης καθώς ζητεί από τον χρήστη βεβαίωση εισαγωγής των σωστών δεδομένων. Αυτό είναι περισσότερο ασφαλές από την απλή τοποθέτηση μιας ετικέτας στο κουμπί υποβολής ως "η είσοδος είναι σωστή, υποβολή". Η παροχή του τετραγώνου επιλογής ως ενός ξεχωριστού στοιχείου ελέγχου από το κουμπί υποβολής, επιβάλλει στον χρήστη να κάνει διπλό έλεγχο καθώς πρέπει τόσο να επιλέξει το τετράγωνο επιλογής, αλλά και να ενεργοποιήσει το κουμπί υποβολής για τη συναλλαγή ώστε να συνεχίσει. Συνεπώς, αυτός είναι ένας μηχανισμός αναθεώρησης, επιβεβαίωσης και διόρθωσης πληροφοριών πριν την ολοκλήρωση της υποβολής.
Σημείωση: Όταν χρήστες υποβάλλουν πληροφορίες χωρίς επιλογή του τετραγώνου επιλογής, δεν θα πρέπει να χάνουν τις πληροφορίες που έχουν εισάγει όταν επιστρέφουν στη φόρμα για εκ νέου υποβολή.
Μια ηλεκτρονική τραπεζική υπηρεσία επιτρέπει στους χρήστες να μεταφέρουν χρήματα μεταξύ λογαριασμών σε διαφορετικά νομίσματα. Καθώς οι ισοτιμίες συναλλάγματος είναι διαρκώς σε ρευστότητα, τα χρήματα δεν μπορούν να συναλλαχθούν στην ίδια ισοτιμία εάν ο χρήστης ανακαλύψει κάποιο σφάλμα στην καταχώρησή του ύστερα από τη διεκπεραίωση της συναλλαγής. Επιπλέον των πεδίων "από λογαριασμό", "προς λογαριασμό" και "ποσό", υπάρχει ένα τετράγωνο επιλογής με την ετικέτα "Έχω ελέγξει ότι το ποσό που επιθυμώ να μεταφέρω είναι σωστό". Εάν αυτό το τεράγωνο επιλογής δεν επιλεγεί όταν ο χρήστης υποβάλει τη φόρμα, η συναλλαγή δεν θα διεκπεραιωθεί και ο χρήστης θα ειδοποιηθεί. Εάν επιλεγεί το τετράγωνο επιλογής, η (μη αναστρέψιμη) συναλλαγή διεκπεραιώνεται.
Ένα σύστημα ηλεκτρονικών πληρωμών αποθηκεύει πληροφορίες τραπεζικών λογαριασμών χρήστη προκειμένου να επεξεργαστεί πληρωμές. Υπάρχει μια περίτεχνη διαδικασία για χρήστες ώστε να εισάγουν νέους λογαριασμούς και να επαληθεύσουν ότι είναι οι ιδιοκτήτες αυτών. Υπάρχει η δυνατότητα διαγραφής παλιών λογαριασμών, αλλά εάν ο λογαριασμός διαγραφεί τυχαία, θα είναι δύσκολη η επαναφορά του και το ιστορικό συναλλαγών με τον λογαριασμό αυτό θα χαθεί. Επομένως, σε σελίδες που επιτρέπουν σε χρήστες να διαγράψουν λογαριασμούς, υπάρχει ένα τετράγωνο επιλογής με την ετικέτα "Επιβεβαιώνω ότι επιθυμώ τη διαγραφή αυτού του λογαριασμού." Εάν αυτό το τετράγωνο επιλογής δεν επιλεγεί όταν ο χρήστης υποβάλει τη φόρμα, ο λογαριασμός δεν θα διαγραφεί και ο χρήστης θα λάβει ένα μήνυμα σφάλματος. Μόνο εάν το τετράγωνο επιλογής επιλεγεί θα διαγραφεί ο λογαριασμός.
Μια φόρμα παραγγελίας (checkout) σε έναν ιστότοπο αγορών, περιλαμβάνει μια φόρμα που συλλέγει πληροφορίες παραγγελίας, αποστολής και χρέωσης. Ύστερα από την υποβολή της φόρμας, ο χρήστης οδηγείται σε μια σελίδα όπου οι πληροφορίες που έχει υποβάλει συνοψίζονται για αναθεώρηση. Κάτω από τη σύνοψη, εμφανίζεται ένα τετράγωνο επιλογής με την ετικέτα "Έχω αναθεωρήσει και επιβεβαιώνω ότι αυτά τα δεδομένα είναι σωστά". Ο χρήστης πρέπει να επισημάνει το τετράγωνο επιλογής και να ενεργοποιήσει το κουμπί "ολοκλήρωση παραγγελίας", προκειμένου να ολοκληρώσει τη συναλλαγή.
Για σελίδες εισόδου χρήστη που προκαλούν μη αναστρέψιμες συναλλαγές:
Ελέγξτε ότι παρέχεται ένα τετράγωνο επιλογής που υποδεικνύει επιβεβαίωση της εισόδου ή ενέργειας από τον χρήστη, επιπλέον του κουμπιού υποβολής.
Ελέγξτε ότι εάν το τετράγωνο επιλογής δεν επιλεγεί κατά την υποβολή της φόρμας, η είσοδος απορρίπτεται και ζητείται από τον χρήστη να αναθεωρήσει την είσοδό του, να επιλέξει το τετράγωνο επιλογής και να υποβάλει εκ νέου.
Οι έλεγχοι #1 και #2 είναι αληθείς
Όλες οι τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Τα περισσότερα προγράμματα περιήγησης επιτρέπουν στον χρήστη να αλλάζει τις ρυθμίσεις χρωμάτων για παράκαμψη των χρωματικών σχεδίων CSS και HTML του συγγραφέα Ιστού. Αυτό περιλαμβάνει το IE, όλες τις εκδόσεις του Firefox, το Mozilla και το Opera ύστερα από την έκδοση 6.
Όταν γίνεται παράκαμψη καθορισμένων χρωμάτων στο Firefox και το Netscape, γίνεται αδύνατη η χρήση των περισσότερων αναδυόμενων παραθύρων και αναπτυσσόμενων μενού Javascript. Τα αναδυόμενα παράθυρα αποκτούν ένα διάφανο παρασκήνιο, με τοποθέτηση από πάνω του κειμένου του πλαισίου στο κείμενο της σελίδας και τα αναπτυσσόμενα μενού είτε γίνονται διάφανα ή αποκτούν ένα σκοτεινό-γκρίζο παρασκήνιο.
Το IE 6 δεν θα παρακάμψει χρώματα παρασκηνίου στο πρόγραμμα περιήγησης, εκτός εάν το ίδιο χρώμα παρασκηνίου έχει επίσης επιλεγεί στις ρυθμίσεις συστήματος.
Ορισμένα άτομα με νοητικές αναπηρίες απαιτούν συγκεκριμένους χρωματικούς συνδυασμούς κειμένου προσκηνίου και παρασκηνίου, για να τους βοηθήσει να κατανοήσουν επιτυχώς τα περιεχόμενα της Ιστοσελίδας. Τα περισσότερα διάσημα προγράμματα περιήγησης παρέχουν την επιλογή αλλαγής ρυθμίσεων χρωμάτων καθολικά εντός του προγράμματος περιήγησης. Στην περίπτωση αυτή, τα χρώματα που επιλέγονται από τον χρήστη παρακάμπτουν τα χρώματα προσκηνίου και παρασκηνίου που καθορίζονται από τον συγγραφέα Ιστού.
Προκειμένου να ικανοποιηθεί αυτό το κριτήριο επιτυχίας, ο συγγραφέας Ιστού θα σχεδιάσει τη σελίδα κατάλληλα ώστε να λειτουργεί με προγράμματα περιήγησης που έχουν αυτά τα στοιχεία ελέγχου και ο συγγραφέας δεν παρακάμπτει αυτά τα στοιχεία ελέγχου.
Να σημειωθεί ότι η παράκαμψη χρωμάτων προσκηνίου και παρασκηνίου όλου του κειμένου σε μια σελίδα, ενδέχεται να κρύβει οπτικές ενδείξεις για την ομαδοποίηση και οργάνωση της Ιστοσελίδας, καθιστώντας πιο δύσκολη την κατανόηση και χρήση. Αυτή η τεχνική ενδέχεται να μην είναι κατάλληλη όταν χρώματα παρασκηνίου χρησιμοποιούνται για την περιγραφή περιοχών της σελίδας. Αυτή η τεχνική ενδέχεται να είναι κατάλληλη για τεχνολογίες και πράκτορες χρήστη που δεν αλλοιώνουν τα χρώματα πλαισίου όταν γίνεται παράκαμψη των χρωμάτων παρασκηνίου. Εάν χρησιμοποιούνται χρώματα παρασκηνίου για την περιγραφή περιοχών της σελίδας, η τεχνική Προσδιορισμός Χρωμάτων και παρασκηνίου δευτερεύοντος περιεχομένου, όπως banner, χαρακτηριστικά και πλοήγηση στο CSS, ενώ προσδιορίζονται χρώματα κειμένου και παρασκηνίου του κύριου περιεχομένου "(C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content) (CSS) " ενδέχεται να χρησιμοποιηθεί για να επιτραπεί στον χρήστη ο έλεγχος των χρωμάτων του κύριου κειμένου, ενώ διατηρείται παράλληλα η οπτική δομή της Ιστοσελίδας.
Μια Ιστοσελίδα σχεδιάζεται χρησιμοποιώντας HTML και CSS για τον καθορισμό των χρωμάτων προσκηνίου και παρασκηνίου. Ο χρήστης ορίζει τα δικά του χρώματα στο Internet Explorer 7 και μπορεί να εμφανίσει το περιεχόμενο με τα επιλεγμένα του χρώματα προσκηνίου και παρασκηνίου.
Μια Ιστοσελίδα σχεδιάζεται χρησιμοποιώντας HTML και CSS. Υπάρχει ένας σύνδεσμος στη σελίδα με οδηγίες για τον τρόπο ρύθμισης χρωμάτων σε διάφορα προγράμματα περιήγησης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανοίξτε την Ιστοσελίδα σε ένα πρόγραμμα περιήγησης που επιτρέπει στους χρήστες να αλλάξουν τα χρώματα του περιεχομένου HTML.
Αλλάξτε τα χρώματα προσκηνίου και παρασκηνίου στις ρυθμίσεις του προγράμματος περιήγησης, ώστε να είναι διαφορετικά από εκείνα που ορίζονται στο περιεχόμενο.
Επιστρέψτε στη σελίδα και ελέγξτε ότι τα νέα καθορισμένα χρώματα κειμένου προσκηνίου και παρασκηνίου στο πρόγραμμα περιήγησης, παρακάμπτουν τα χρώματα που προσδιορίζονται στο περιεχόμενο.
Ελέγξτε ότι το #3 είναι αληθές.
Όλες οι τεχνολογίες που παρουσιάζουν ζωντανές πληροφορίες, μόνο ήχου.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η χρήση μιας υπηρεσίας επεξηγήσεων πραγματικού χρόνου για την παροχή μιας κειμενικής έκδοσης ζωντανού περιεχομένου ήχου. Τέτοιες υπηρεσίες χρησιμοποιούν εκπαιδευμένο ανθρώπινο χειριστή που ακούει όσα λέγονται και χρησιμοποιεί ένα ειδικό πληκτρολόγιο για την εισαγωγή του κειμένου με μικρή μόνο καθυστέρηση. Είναι σε θέση να συλλάβουν ένα ζωντανό συμβάν με υψηλό βαθμό πιστότητας και επίσης να εισάγουν σημειώσεις σε οποιονδήποτε μη προφερόμενο ήχο που είναι σημαντικός για την κατανόηση του συμβάντος. Η οθόνη προβολής που περιέχει το κείμενο επεξήγησης είναι διαθέσιμη στην ίδια Ιστοσελίδα με το ζωντανό περιεχόμενο ήχου.
Ένας ραδιοφωνικός σταθμός στο διαδίκτυο παρέχει μια οθόνη προβολής στην Ιστοσελίδα του για τις υπηρεσίες του ειδήσεων. Ζωντανές αναφορές ειδήσεων, ιδιαίτερα οι επείγουσες αναφορές, μεταγράφονται μέσω υπηρεσίας επεξήγησης πραγματικού χρόνου και προβάλλονται στην οθόνη προβολής.
Μια υπηρεσία διάσκεψης ή κοινής χρήσης οθόνης περιλαμβάνει ένα παράθυρο με μεταγραφή πραγματικού χρόνου της λεκτικής παρουσίασης σε λειτουργία. Αυτό επιτυγχάνεται μέσω διαρρύθμισης εκ των προτέρων μιας απομακρυσμένης υπηρεσίας δημιουργίας επεξηγήσεων αναμετάδοσης τηλεδιάσκεψης-ήχου. Η ηλεκτρονική διάσκεψη ιστού ή η υπηρεσία κοινής χρήσης οθόνης, χρειάζεται να σχεδιαστεί με αυτή την πιθανή χρήση κατά νου, καθώς η χρήση ενός ξεχωριστού παραθύρου για ζωντανό κείμενο θα είναι ένα σημαντικό εμπόδιο στη χρηστικότητα.
Μια επαναλαμβανόμενη διάσκεψη ήχου κάνει χρήση ενός ηλεκτρονικού βοηθητικού προγράμματος αίτησης κατά σειρά προτεραιότητας, για να βοηθήσει με τις ουρές αναμονής. Προκειμένου να διευκολυνθεί η χρήση αυτού του προϊόντος σε συνδυασμό με μια ηλεκτρονική υπηρεσία επεξηγήσεων αναμετάδοσης διάσκεψης, το βοηθητικό πρόγραμμα ουράς σχεδιάζεται κατάλληλα ώστε να είναι πλήρως λειτουργικό σε μια περιορισμένη οθόνη προβολής. Για πρόσθετη βελτίωση, ένας ιστότοπος δημιουργείται για να φέρει αμφότερες τις οθόνες προβολής εντός μιας μεμονωμένης Ιστοσελίδας.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Υπηρεσία επεξηγήσεων πραγματικού χρόνου (Real-time Captioning)
Επεξηγημένο κείμενο (Captioned Text) (πάροχος για δημιουργία επεξηγήσεων αναμετάδοσης διάσκεψης)
Καταχώρηση στο Wikipedia για CART (Wikipedia entry for CART) (Δημιουργία επεξηγήσεων πραγματικού χρόνου με βοήθεια από τον υπολογιστή ή Μετάφραση πραγματικού χρόνου πρόσβασης επικοινωνίας)
Κέντρο πληροφοριών πρόσβασης επικοινωνίας (Communication Access Information Center)
Τα προϊόντα διάσκεψης Ιστού με ενσωματωμένη υποστήριξη για οθόνη προβολής επεξηγήσεων
Ελέγξτε ότι η Ιστοσελίδα περιέχει μια οθόνη προβολής που σχετίζεται με το ζωντανό περιεχόμενο ήχου.
Ελέγξτε ότι το κείμενο του ζωντανού περιεχομένου ήχου εμφανίζεται στην οθόνη προβολής με καθυστέρηση μικρότερη των 30 δευτερολέπτων.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Γενική τεχνική. Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός προσβάσιμου εναλλακτικού τρόπου παρουσίασης των πληροφοριών σε μια παρουσίαση μόνο ήχου.
Σε μια παρουσίαση μόνο ήχου, οι πληροφορίες παρουσιάζονται με διάφορους τρόπους, συμπεριλαμβανομένων διαλόγου και ήχων (τόσο φυσικών, όσο και τεχνητών). Προκειμένου να παρουσιαστούν οι ίδιες πληροφορίες με προσβάσιμο τρόπο, αυτή η τεχνική περιλαμβάνει τη δημιουργία εγγράφου που λέει την ίδια ιστορία και παρουσιάζει τις ίδιες πληροφορίες όπως το προ-εγγεγραμμένο περιεχόμενο μόνο ήχου. Σε αυτήν την τεχνική, το έγγραφο εξυπηρετεί μια μεγάλη περιγραφή του περιεχομένου και περιλαμβάνει όλο τον σημαντικό διάλογο, καθώς και περιγραφές των ήχων παρασκηνίου κ.λπ., που αποτελούν μέρος της ιστορίας.
Εάν χρησιμοποιήθηκε ένα πραγματικό σενάριο για τη δημιουργία περιεχομένου μόνο ήχου από την αρχή, μπορεί να αποτελέσει μια πολύ καλή αφετηρία. Ωστόσο, στην παραγωγή και το μοντάζ το περιεχόμενο συχνά διαφέρει κάπως από το σενάριο. Για την τεχνική αυτή, το αρχικό σενάριο θα διορθωθεί, ώστε να συμφωνεί με τον διάλογο και με αυτό που πραγματικά συμβαίνει στην τελική επεξεργασμένη μορφή της ηχητικής παρουσίασης.
Ένα podcast περιλαμβάνει μια περιγραφή νέων χαρακτηριστικών μιας πρόσφατης έκδοσης λογισμικού. Αφορά δύο ομιλητές που συζητούν ανεπίσημα για νέα και ενημερωμένα χαρακτηριστικά και περιγράφουν τον τρόπο που χρησιμοποιούνται. Ένας από τους ομιλητές εργάζεται από μια λίστα ερωτήσεων που χρησιμοποιήθηκε για την περιγραφή της συζήτησης πριν την εγγραφή. Ύστερα από την ολοκλήρωση της εγγραφής, η διάρθρωση υπόκειται σε επεξεργασία και συμπληρώνεται για να συμφωνεί με τον διάλογο κ.λπ.. Η μεταγραφή που προκύπτει καθίσταται διαθέσιμη στον ιστότοπο των ομιλητών, μαζί με το αρχείο μόνο ήχου. Το εναλλακτικό κειμένου που προσδιορίζει το περιεχόμενο μόνο ήχου, διαβάζει "Επεισόδιο 42: Έκδοση Zap 12 (ακολουθεί μεταγραφή κειμένου)" και ο σύνδεσμος για την μεταγραφή παρέχεται αμέσως μετά το περιεχόμενο μόνο ήχου.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Προβάλλετε περιεχόμενο μόνο ήχου ενώ παράλληλα αναφέρεστε στην εναλλακτική λύση για μέσα βάσει χρόνου.
Ελέγξτε ότι ο διάλογος στη μεταγραφή συμφωνεί με τον διάλογο και τις πληροφορίες που παρουσιάζονται στην παρουσίαση μόνο ήχου.
Εάν ο ήχος περιλαμβάνει πολλαπλές φωνές, ελέγξτε ότι η μεταγραφή προσδιορίζει ποιος μιλάει για όλο τον διάλογο.
Ελέγξτε ότι τουλάχιστον ένα από τα παρακάτω ισχύει:
Η ίδια η μεταγραφή μπορεί να καθοριστεί μέσω προγραμματισμού από το εναλλακτικό κειμένου για το περιεχόμενο μόνο ήχου.
Η μεταγραφή αναφέρεται από το εναλλακτικό κειμένου που καθορίζεται μέσω προγραμματισμού, για το περιεχόμενο μόνο ήχου.
Εάν οι εναλλακτικές εκδόσεις βρίσκονται σε ξεχωριστή σελίδα, ελέγξτε τη διαθεσιμότητα των συνδέσμων που επιτρέπουν στον χρήστη να λάβει τις άλλες εκδόσεις.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Γενική τεχνική. Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός προσβάσιμου εναλλακτικού τρόπου παρουσίασης των πληροφοριών σε μια παρουσίαση μόνο βίντεο.
Σε μια παρουσίαση μόνο βίντεο, οι πληροφορίες παρουσιάζονται με διάφορους τρόπους, συμπεριλαμβανομένων κινούμενων εικόνων, κειμένου ή γραφικών, χώρου και παρασκηνίου, ενεργειών και εκφράσεων ατόμων, ζώων κ.λπ.. Προκειμένου να παρουσιαστούν οι ίδιες πληροφορίες σε προσβάσιμη μορφή, αυτή η τεχνική αφορά στη δημιουργία ενός εγγράφου που αφηγείται την ίδια ιστορία και παρουσιάζει τις ίδιες πληροφορίες όπως το προ-εγγεγραμμένο περιεχόμενο μόνο βίντεο. Σε αυτήν την τεχνική, το έγγραφο λειτουργεί ως μια μεγάλη περιγραφή του περιεχομένου και περιλαμβάνει όλες τις σημαντικές πληροφορίες, καθώς και περιγραφές του τοπίου, των ενεργειών, εκφράσεων κ.λπ. που αποτελούν μέρος της παρουσίασης.
Εάν χρησιμοποιήθηκε ένα σενάριο για το περιεχόμενο μόνο βίντεο για τη δημιουργία του περιεχομένου από την αρχή, μπορεί να αποτελέσει μια πολύ καλή αφετηρία. Ωστόσο, στην παραγωγή και το μοντάζ η τελική έκδοση συχνά διαφέρει κάπως από το σενάριο. Για χρήση του σεναρίου, θα είναι απαραίτητο να διορθωθεί ώστε να συμφωνεί με την τελική επεξεργασμένη μορφή της παρουσίασης μόνο βίντεο.
Μια κινούμενη εικόνα εμφανίζει πώς συναρμολογείται ένα έργο κατασκευής από ξύλο. Δεν υπάρχει ήχος, αλλά οι κινούμενες εικόνες περιλαμβάνουν μια σειρά από αριθμούς που αναπαριστούν κάθε βήμα στη διαδικασία, καθώς και βέλη και ενδείξεις εικόνας-μέσα-στην-εικόνα, που απεικονίζουν τον τρόπο ολοκλήρωσης της συναρμολόγησης. Περιλαμβάνει επίσης σύντομες κινούμενες εικόνες που απεικονίζουν τι θα συμβεί εάν η συναρμολόγηση πραγματοποιηθεί λάθος. Ένα εναλλακτικό κειμένου που προσδιορίζει το περιεχόμενο μόνο βίντεο, διαβάζει "Βίντεο συναρμολόγησης ψωμιέρας (ακολουθεί περιγραφή κειμένου)," και η περιγραφή κειμένου του βίντεο περιλαμβάνει μια πλήρη περιγραφή κειμένου για κάθε βήμα στο βίντεο.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Προβάλλετε περιεχόμενο μόνο βίντεο ενώ παράλληλα αναφέρεστε στην εναλλακτική για μέσα βάσει χρόνου.
Ελέγξτε ότι οι πληροφορίες στη μεταγραφή περιλαμβάνουν τις ίδιες πληροφορίες που βρίσκονται στην παρουσίαση μόνο βίντεο.
Εάν το βίντεο περιλαμβάνει άτομα ή χαρακτήρες, ελέγξτε ότι η μεταγραφή προσδιορίζει ποιο άτομο ή χαρακτήρας σχετίζεται με κάθε ενέργεια που περιγράφεται.
Ελέγξτε ότι τουλάχιστον ένα από τα παρακάτω ισχύει:
Η ίδια η μεταγραφή μπορεί να καθοριστεί μέσω προγραμματισμού από το εναλλακτικό κειμένου για το περιεχόμενο μόνο βίντεο.
Η μεταγραφή αναφέρεται από το εναλλακτικό κειμένου που καθορίζεται μέσω προγραμματισμού, για το περιεχόμενο μόνο βίντεο.
Εάν οι εναλλακτικές εκδόσεις βρίσκονται σε ξεχωριστή σελίδα, ελέγξτε τη διαθεσιμότητα των συνδέσμων που επιτρέπουν στον χρήστη να λάβει τις άλλες εκδόσεις.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Για ορισμένα άτομα με κώφωση ή με ορισμένες νοητικές αναπηρίες, η νοηματική γλώσσα μπορεί να είναι η πρώτη τους γλώσσα. Μια έκδοση νοηματικής γλώσσας μπορεί να είναι ευκολότερη για αυτούς για την κατανόηση, σε σχέση με μια έκδοση γραπτής γλώσσας. Σκοπός αυτής της τεχνικής είναι η παροχή εκδόσεων νοηματικής γλώσσας περιεχομένου που βοηθούν χρήστες νοηματικής να κατανοήσουν δύσκολο κείμενο που περιγράφει έννοιες ή διαδικασίες. Το περιεχόμενο νοηματικής γλώσσας παρέχεται επιπλέον του κειμένου.
Καθώς αυτό είναι συμπληρωματικό περιεχόμενο (και όχι νοηματική γλώσσα για ομιλία στο περιεχόμενο), θα πρέπει να αντιμετωπίζεται ως ξεχωριστό από το περιεχόμενο και δεν θα συγχρονίζεται απαραιτήτως. Αν και ενδέχεται να υπάρχουν περιπτώσεις όπου θα είναι χρήσιμο, δεν απαιτείται.
Προκειμένου η έκδοση νοηματικής γλώσσας να γίνει διαθέσιμη μαζί με τα υπόλοιπα περιεχόμενα της Ιστοσελίδας, το βίντεο ενδέχεται να ενσωματωθεί απευθείας στην Ιστοσελίδα ή η Ιστοσελίδα μπορεί να συμπεριλαμβάνει έναν σύνδεσμο που ενεργοποιεί ένα πρόγραμμα αναπαραγωγής βίντεο σε ένα ξεχωριστό παράθυρο. Η έκδοση νοηματικής γλώσσας μπορεί επίσης να παρέχεται μέσω ενός συνδέσμου σε μια ξεχωριστή Ιστοσελίδα που προβάλλει το βίντεο.
Η νοηματική γλώσσα είναι μια τρισδιάστατη, οπτική γλώσσα, που χρησιμοποιεί τα χέρια, τα μπράτσα, τους ώμους, το πρόσωπο, τα χείλη και τη γλώσσα του ομιλητή της νοηματικής. Προκειμένου οι θεατές να κατανοήσουν τη νοηματική, το βίντεο πρέπει να καταγράψει πλήρως τη νοηματική γλώσσα. Γενικά, ο ομιλητής νοηματικής θα πρέπει να βρίσκεται όσο το δυνατόν πιο κοντά στην κάμερα χωρίς να υπάρχει κίνδυνος αποκοπής (όπως να κινηθούν τα χέρια εκτός του βίντεο).
Πληροφορίες για τον τρόπο εύρεσης διερμηνέων νοηματικής γλώσσας παρατίθενται στην ενότητα πόρων παρακάτω.
Σημείωση 1:Εάν η ροή βίντεο είναι πολύ μικρή, η παρουσία του διερμηνέα νοηματικής γλώσσας θα είναι περιορισμένη. Κατά τη δημιουργία μιας ροής βίντεο που περιλαμβάνει το βίντεο ενός διερμηνέα νοηματικής γλώσσας, βεβαιωθείτε ότι υπάρχει μηχανισμός αναπαραγωγής της ροής βίντεο σε πλήρη οθόνη στην τεχνολογία περιεχομένου υποστήριξης προσβασιμότητας. Διαφορετικά, βεβαιωθείτε ότι το τμήμα διερμηνέα στο βίντεο είναι ρυθμιζόμενο ως προς το μέγεθος που θα είχε, εάν ολόκληρη η ροή βίντεο ήταν σε πλήρη οθόνη.
Σημείωση 2:Εφόσον η νοηματική γλώσσα δεν αποτελεί συνήθως μια έκδοση στη νοηματική της έντυπης γλώσσας, ο συγγραφέας πρέπει να αποφασίσει ποια νοηματική γλώσσα θα συμπεριλάβει. Συνήθως χρησιμοποιείται η νοηματική γλώσσα του πρωταρχικού κοινού. Εάν προορίζεται για πολλαπλά κοινά, μπορούν να χρησιμοποιηθούν πολλαπλές νοηματικές γλώσσες. Ανατρέξτε στις συμβουλευτικές τεχνικές για πολλαπλές νοηματικές γλώσσες.
Οι πληροφορίες για τον τρόπο επικοινωνίας με την υποστήριξη ή αποστολής ερωτήσεων σχετικά με έναν ιστότοπο, παρέχονται σε ένα βίντεο νοηματικής γλώσσας, καθώς και σε κείμενο.
Σελίδες βοήθειας για μια εφαρμογή Ιστού παρέχονται σε νοηματική γλώσσα, καθώς και σε κείμενο.
Ένας εταιρικός ιστότοπος παρέχει βίντεο νοηματικής γλώσσας που περιγράφουν τις τεχνικές λεπτομέρειες κάθε προϊόντος.
Ένας θρησκευτικός ιστότοπος περιλαμβάνει την Αμερικανική νοηματική γλώσσα μεταξύ των διαφορετικών γλωσσών στις οποίες διατίθεται ο ιστότοπος.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Εθνικό Ινστιτούτο για την κώφωση και άλλες επικοινωνιακές διαταραχές" (National Institute on Deafness and other Communication Disorders): Πληροφορίες σχετικά με την Αμερικανική νοηματική γλώσσα
Βασιλικό Εθνικό Ινστιτούτο για άτομα με κώφωση (Royal National Institute for Deaf People (RNID))
Επικοινωνίες βίντεο νοηματικής γλώσσας (Sign Language Video Communications)
Μητρώο διερμηνέων για άτομα με κώφωση (Registry of Interpreters for the Deaf)
Δίκτυο διερμηνέων Αμερικανικής νοηματικής γλώσσας (American Sign Language Interpreter Network)
Δείτε επίσης "Σχετικοί πόροι για το κριτήριο επιτυχίας 1.2.6 - Νοηματική γλώσσα" (Related Resources for Success Criterion 1.2.6 - Sign Language).
Προσδιορίστε κείμενο που εξετάζει ιδέες και διαδικασίες που πρέπει να γίνουν κατανοητές, προκειμένου να χρησιμοποιηθεί το περιεχόμενο.
Ελέγξτε εάν συμπληρώματα στη νοηματική γλώσσα για το κείμενο είναι διαθέσιμα στο περιεχόμενο ή μέσω συνδέσμων εντός του περιεχομένου.
Ελέγξτε ότι τα συμπληρώματα στη νοηματική γλώσσα δείχνουν έννοιες και διαδικασίες που εξετάζονται στο κείμενο.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Όλες οι τεχνολογίες που περιλαμβάνουν φόρμες.
Αυτή η τεχνική σχετίζεται με:
Η παροχή μιας λειτουργίας αναζήτησης που αναζητεί στις Ιστοσελίδες σας, είναι μια στρατηγικής σχεδίασης που προσφέρει στους χρήστες έναν τρόπο εύρεσης περιεχομένου. Οι χρήστες μπορούν να εντοπίσουν περιεχόμενο μέσω αναζήτησης για συγκεκριμένες λέξεις ή φράσεις, χωρίς την ανάγκη κατανόησης ή πλοήγησης μέσα στη δομή του ιστότοπου. Αυτό μπορεί να είναι ένας πιο γρήγορος ή εύκολος τρόπος εύρεσης περιεχομένου, ιδιαίτερα σε μεγάλους τόπους.
Ορισμένες εταιρείες αναζήτησης προσφέρουν τόπους ελεύθερης πρόσβασης στις εφαρμογές αναζήτησης που διαθέτουν. Μηχανές αναζήτησης διατίθενται ώστε να μπορούν να εγκατασταθούν στον δικό σας διακομιστή. Ορισμένες εταιρείες φιλοξενίας Ιστού προσφέρουν αρχεία εντολών αναζήτησης που μπορούν να συμπεριλάβουν οι χρήστες στις Ιστοσελίδες τους. Οι περισσότερες υπηρεσίες προσφέρουν επίσης εκδόσεις με χρέωση των εργαλείων τους με περισσότερο σύνθετα χαρακτηριστικά.
Η υλοποίηση μιας λειτουργίας αναζήτησης θα πραγματοποιήσει ορθογραφικό έλεγχο στους όρους, θα συμπεριλάβει διαφορετικές καταλήξεις για τους όρους (στελέχη) και θα επιτρέπει τη χρήση διαφορετικής ορολογίας (συνώνυμα) που θα αυξήσουν επιπλέον την προσβασιμότητα της λειτουργίας αναζήτησης.
Η λειτουργία αναζήτησης προστίθεται είτε με συμπερίληψη μιας απλής φόρμας στην Ιστοσελίδα, συνήθως ενός πεδίου κειμένου για τον όρο αναζήτησης και ενός κουμπιού για την ενεργοποίηση της αναζήτησης ή μέσω προσθήκης ενός συνδέσμου σε μια σελίδα που συμπεριλαμβάνει μια φόρμα αναζήτησης. Φυσικά, η ίδια η φόρμα αναζήτησης πρέπει να είναι προσβάσιμη.
Τεχνικές που χρησιμοποιούνται για τη βελτιστοποίηση των αποτελεσμάτων των μηχανών αναζήτησης για εξωτερικές αναζητήσεις, υποστηρίζουν επίσης μηχανές εσωτερικής αναζήτησης και τις καθιστούν περισσότερο αποτελεσματικές: χρήση λέξεων-κλειδιών, ετικετών META
και μιας προσβάσιμης δομής πλοήγησης. Τόποι αναζήτησης παρέχουν οδηγίες για τον τρόπο δημιουργίας περιεχομένου που βελτιστοποιείται για αναζήτηση, για παράδειγμα Οδηγίες της Μicrosoft για επιτυχή δημιουργία ευρετηρίου (Microsoft's Guidelines for successful indexing), δημιουργία ενός φιλικού προς το Google τόπου (Creating a Google-friendly site) και Οδηγίες ποιότητας περιεχομένου αναζήτησης Yahoo! (Yahoo! Search Content Quality Guidelines).
Ένας τόπος αγορών οργανώνει τα προϊόντα του σε διάφορες κατηγορίες, όπως γυναικεία ρούχα, αντρικά ρούχα και παιδικά ρούχα. Αυτές έχουν υποκατηγορίες, όπως μπλούζες, παντελόνια, παπούτσια και αξεσουάρ. Κάθε σελίδα περιέχει επίσης μια φόρμα αναζήτησης. Οι χρήστες μπορούν να πληκτρολογήσουν τον αριθμό προϊόντος ή την περιγραφή προϊόντος μέσα στο πεδίο αναζήτησης και να μεταφερθούν απευθείας στο προϊόν αυτό, αντί να χρειάζεται να πλοηγηθούν στις κατηγορίες προϊόντων για να το εντοπίσουν.
Ένα κέντρο βοήθειας περιέχει χιλιάδες σελίδες πληροφοριών βοήθειας σχετικά με τα προϊόντα μιας εταιρείας. Μια φόρμα αναζήτησης επιτρέπει στους χρήστες να αναζητήσουν μόνο τις σελίδες του κέντρου βοήθειας προκειμένου να εντοπίσουν άρθρα που περιέχουν τους όρους αναζήτησης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι η Ιστοσελίδα περιέχει μια φόρμα αναζήτησης ή έναν σύνδεσμο για μια σελίδα αναζήτησης
Πληκτρολογήστε κείμενο στη φόρμα αναζήτησης που προκύπτει στο σύνολο των Ιστοσελίδων
Ενεργοποιήστε την αναζήτηση
Ελέγξτε ότι ο χρήστης κατευθύνεται σε μια σελίδα που περιέχει τον όρο αναζήτησης
Ελέγξτε ότι ο χρήστης μεταφέρεται σε μια σελίδα που περιέχει μια λίστα συνδέσμων για σελίδες που περιέχουν τον όρο αναζήτησης
Ο έλεγχος #1 είναι αληθής και είτε ο έλεγχος #4 ή ο έλεγχος #5 είναι αληθής.
Όλες οι τεχνολογίες που υποστηρίζουν φόρμες
Αυτή η τεχνική σχετίζεται με:
Όταν ετικέτες για πεδία φόρμας τοποθετούνται στο σημείο όπου αναμένονται οπτικά από τον χρήστη, είναι ευκολότερο να κατανοηθούν σύνθετες φόρμες και να εντοπιστούν συγκεκριμένα πεδία. Οι ετικέτες για τα περισσότερa πεδία τοποθετούνται ακριβώς πριν το πεδίο, δηλαδή, για γλώσσες αριστερά προς τα δεξιά, είτε στα αριστερά του πεδίου ή από πάνω και για γλώσσες δεξιά προς τα αριστερά, στα δεξιά του πεδίου ή από πάνω. Ετικέτες για ραδιόπληκτρα και τετράγωνα επιλογής τοποθετούνται ύστερα από το πεδίο.
Αυτές οι θέσεις ορίζονται καθώς αυτή είναι η συνήθης (και επομένως η πιο προβλέψιμη) θέση για τις ετικέτες πεδίων, ραδιοπλήκτρων και τετραγώνων επιλογής.
Οι ετικέτες τοποθετούνται πριν τα πεδία εισόδου καθώς τα πεδία ορισμένες φορές ποικίλλουν σε μήκος. Η τοποθέτηση αυτών πριν επιτρέπει στις ετικέτες να ευθυγραμμιστούν. Καθιστά επίσης ευκολότερο τον εντοπισμό των ετικετών με μεγεθυντή οθόνης, καθώς βρίσκονται ακριβώς πριν το πεδίο και μπορούν επίσης να βρεθούν σε μια κάθετη στήλη (όταν η αρχή των πεδίων ευθυγραμμίζεται κάθετα). Τέλος, εάν το πεδίο έχει δεδομένα, είναι ευκολότερη η κατανόησή του ή ο έλεγχος των δεδομένων εάν κάποιος διαβάζει την ετικέτα πρώτα και έπειτα το περιεχόμενο, αντί για το ανάποδο.
Τα τετράγωνα επιλογής και τα ραδιοπλήκτρα έχουν ένα ομοιόμορφο πλάτος, ενώ οι ετικέτες τους συνήθως δεν έχουν. Η παρουσία πρώτα ενός ραδιοπλήκτρου ή τετραγώνου επιλογής επιτρέπει σε αμφότερα τα κουμπιά και τις ετικέτες να ευθυγραμμιστούν κάθετα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε πεδίο φόρμας στην Ιστοσελίδα:
Ελέγξτε ότι το πεδίο φόρμας έχει μια ορατή ετικέτα.
Εάν το πεδίο φόρμας είναι ένα τεράγωνο επιλογής ή ραδιοπλήκτρο, ελέγξτε ότι η ετικέτα βρίσκεται αμέσως μετά το πεδίο.
Εάν το πεδίο φόρμας δεν είναι ένα τετράγωνο επιλογής ή ραδιοπλήκτρο, ελέγξτε ότι η ετικέτα βρίσκεται αμέσως πριν το πεδίο.
Όλοι οι έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή στους χρήστες ενός μηχανισμού ενεργοποίησης ή απενεργοποίησης τυπικών διακριτικών σημάνσεων.
Πολλές γλώσσες κάνουν χρήση διακριτικών σημάνσεων ή διακριτικών για να υποδείξουν την προφορά των λέξεων ή να βοηθήσουν με τη διάκριση μεταξύ αυτών. Ορισμένες γλώσσες ενδέχεται να χρησιμοποιούν διακριτικά για να υποδηλώσουν φωνήεντα, δίφθογγο, την απουσία φωνήεντος ή συμφώνου ή για άλλους σκοπούς. Αν και το κείμενο χωρίς τέτοια διακριτικά μπορεί να είναι ευανάγνωστο, η προσθήκη των διακριτικών μπορεί να βελτιώσει την αναγνωσιμότητα.
Μια Ιστοσελίδα στα Χαβανέζικα εμφανίζει όλες τις διακριτικές σημάνσεις εξ ορισμού και παρέχει συνδέσμους που επιτρέπουν στους χρήστες να επιλέγουν το επίπεδο προβολής των διακριτικών σημάνσεων:
Μη προβολή διακριτικών σημάνσεων
Χρησιμοποιήστε τη σήμανση ίχνους (‘) για το ?okina, αλλά μην προβάλετε σημεία μακρού.
Εμφάνιση όλων των διακριτικών σημάνσεων
Ο επισκέπτης επιλέγει το επίπεδο που προτιμά και αυτή η προτίμηση αποθηκεύεται σε ένα cookie περιόδου λειτουργίας. Όλες οι μεταγενέστερες σελίδες κατά τη διάρκεια της ίδιας περιόδου λειτουργίας, έχουν πρόσβαση στο cookie και εμφανίζουν ή αποκρύπτουν διακριτικά σύμφωνα με το επιλεγμένο επίπεδο.
Στην πλευρά διακομιστή, το περιεχόμενο αποθηκεύεται με όλες τις διακριτικές σημάνσεις. Εάν ένας επισκέπτης προτιμά λιγότερα ή καθόλου διακριτικά, μια λειτουργία στην πλευρά του διακομιστή αντικαθιστά ή καταργεί τα διακριτικά όπως επιθυμείται, πριν την αποστολή της απάντησης.
Ηλεκτρονικό παράδειγμα στη Χαβανέζικη γλώσσα (Hawaiian language online).
Για κάθε Ιστοσελίδα σε μια ανθρώπινη γλώσσα που χρησιμοποιεί διακριτικές σημάνσεις για τον διαχωρισμό μεταξύ νοημάτων:
Ελέγξτε ότι η προεπιλεγμένη έκδοση του περιεχομένου χρησιμοποιεί διακριτικές σημάνσεις.
Ελέγξτε ότι υπάρχει ένας μηχανισμός ενεργοποίησης ή απενεργοποίησης διακριτικών σημάνσεων.
Ελέγξτε ότι η χρήση του μηχανισμού απενεργοποίησης διακριτικών σημάνσεων, οδηγεί σε περιεχόμενο που δεν εμφανίζει διακριτικές σημάνσεις.
Ελέγξτε ότι η χρήση του μηχανισμού ενεργοποίησης διακριτικών σημάνσεων, οδηγεί σε περιεχόμενο που εμφανίζει διακριτικές σημάνσεις.
Οι έλεγχοι #1 - #4 είναι αληθείς.
Όλες οι τεχνολογίες που παρέχουν φόρμες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στους χρήστες να επανέρχονται από σφάλματα που πραγματοποιούνται όταν τοποθετείται μια παραγγελία, παρέχοντας μια χρονική περίοδο κατά την οποία μπορούν να ακυρώσουν ή αλλάξουν την παραγγελία. Γενικά, μια σύμβαση ή μια παραγγελία είναι μια νόμιμη δέσμευση και δεν μπορεί να ακυρωθεί. Ωστόσο, ένας ιστότοπος μπορεί να επιλέξει να προσφέρει αυτήν τη δυνατότητα και παρέχει σε χρήστες έναν τρόπο για επαναφορά από σφάλματα.
Το περιεχόμενο Ιστού θα χρειάζεται να ενημερώσει τον χρήστη για τη διάρκεια της περιόδου ακύρωσης ύστερα από την υποβολή της φόρμας και για τη διαδικασία που χρειάζεται για να ακυρωθεί η παραγγελία. Η διαδικασία ακύρωσης ενδέχεται να μην είναι εφικτή ηλεκτρονικά. Μπορεί για παράδειγμα να απαιτείται η αποστολή γραπτής ειδοποίησης σε μια διεύθυνση που παρατίθεται στην Ιστοσελίδα.
Ένας ηλεκτρονικός ιστότοπος αγοράς επιτρέπει σε χρήστες να ακυρώνουν αγορές έως και 24 ώρες ύστερα από την πραγματοποίησή τους. Ο ιστότοπος εξηγεί την πολιτική τους και περιλαμβάνει μια σύνοψη της πολιτικής σχετικά με την απόδειξη προμήθειας που αποστέλλεται με ηλεκτρονικό ταχυδρομείο στον χρήστη. Ύστερα από 24 ώρες, η αγορά έχει αποσταλεί στον χρήστη και δεν μπορεί πλέον να ακυρωθεί.
Ένας ιστότοπος πραγματοποιεί πωλήσεις προσαρμοσμένων αθλητικών σακακιών που φτιάχνονται για παραγγελίες. Ο πελάτης επιλέγει το ύφασμα και παρέχει τις αναλογίες του για τον ράφτη. Ο ιστότοπος δίνει στους πελάτες έως τρεις ημέρες για αλλαγή ή ακύρωση μιας παραγγελίας. Όταν το υλικό έχει κοπεί με βάση τις προδιαγραφές του πελάτη, δεν είναι εφικτή πλέον η αλλαγή ή ακύρωση της παραγγελίας. Η εταιρική πολιτική περιγράφεται στον ιστότοπό τους.
Ελέγξτε ότι μια Ιστοσελίδα περιγράφει την χρονική περίοδο ακύρωσης ή αλλαγής μιας παραγγελίας.
Ελέγξτε ότι μια Ιστοσελίδα περιγράφει τη διαδικασία ακύρωσης ή αλλαγής μιας παραγγελίας.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Τεχνολογίες που περιέχουν στοιχεία με δυνατότητα επισήμανσης
Αυτή η τεχνική σχετίζεται με:
Τα λειτουργικά συστήματα έχουν μια εγγενή ένδειξη επισήμανσης, η οποία είναι διαθέσιμη σε πολλούς πράκτορες χρήστη. Η προεπιλεγμένη απόδοση του ενδείκτη επισήμανσης δεν είναι πάντα υψηλής ορατότητας και ενδέχεται να είναι δύσκολο να προβληθεί έναντι ορισμένων υποβάθρων. Ωστόσο, πολλές πλατφόρμες επιτρέπουν στον χρήστη να προσαρμόσει την απόδοση αυτού του ενδείκτη επισήμανσης. Η υποστηρικτική τεχνολογία μπορεί επίσης να αλλάξει την εμφάνιση του εγγενούς ενδείκτη επισήμανσης. Εάν χρησιμοποιείτε τον εγγενή ενδείκτη επισήμανσης, οποιεσδήποτε ρυθμίσεις σε όλο το εύρος του συστήματος για την ορατότητά του θα μεταφέρονται στην Ιστοσελίδα. Εάν σχεδιάζετε τον δικό σας ενδείκτη επισήμανσης, για παράδειγμα χρωματίζοντας ενότητες της σελίδας ως απόκριση σε ενέργεια χρήστη, αυτές οι ρυθμίσεις δεν θα μεταφερθούν και η AT δεν θα είναι σε θέση να εντοπίσει τον ενδείκτη εστίασής σας.
Ο προεπιλεγμένος ενδείκτης επισήμανσης στα Microsoft Windows είναι μια μαύρη, διάστικτη γραμμή ενός pixel, που περιβάλλει το επισημασμένο στοιχείο. Σε μια σελίδα με σκοτεινό παρασκήνιο, αυτό μπορεί να είναι ιδιαίτερα δύσκολο να γίνει αντιληπτό. Ο δημιουργός της σελίδας χρησιμοποιεί την προεπιλογή και ο χρήστης την προσαρμόζει στα Windows ώστε να το μετατρέψει σε πιο φωτεινό χρώμα.
Σε HTML, στοιχεία φόρμας και σύνδεσμοι μπορούν να επισημανθούν εξ ορισμού. Επιπλέον, κάθε στοιχείο με παράμετρο tabinder >=0 μπορεί να λάβει επισήμανση. Αμφότεροι οι τύποι στοιχείων επισήμανσης χρησιμοποιούν τον ενδείκτη επισήμανσης συστήματος και θα καταλάβουν αλλαγές πλατφόρμας στο στυλ ενδείκτη επισήμανσης.
Χρησιμοποιήστε τα χαρακτηριστικά της πλατφόρμας σας για προσαρμογή της εμφάνισης του ενδείκτη επισήμανσης
Μεταβείτε στη σελίδα με το πλήκτρο tab, σημειώνοντας τη διαδρομή της επισήμανσης
Ελέγξτε ότι ο ενδείκτης επισήμανσης για κάθε στοιχείο ελέγχου είναι ορατός
Ελέγξτε ότι το #3 είναι αληθές.
Όλες οι τεχνολογίες που μπορούν να περιέχουν περιεχόμενο βίντεο
Αυτή η τεχνική σχετίζεται με:
Το περιεχόμενο μόνο βίντεο δεν είναι προσβάσιμο για άτομα με τύφλωση και για όσους έχουν χαμηλή όραση. Επομένως, είναι σημαντικό για αυτούς να έχουν μια ηχητική εναλλακτική. Μία λύση είναι η παροχή ενός ηχητικού κομματιού που περιγράφει τις πληροφορίες στο βίντεο. Ο ήχος θα πρέπει να είναι κοινής μορφής ήχου που χρησιμοποιείται στο διαδίκτυο, όπως MP3.
Μια Ιστοσελίδα έχει έναν σύνδεσμο για παρουσίαση μόνο βίντεο μιας προσεδάφισης στον Άρη ενός διαστημόπλοιου. Ο σύνδεσμος προς το βίντεο είναι μια φωτογραφία ενός διαστημόπλοιου. Κοντά στο βίντεο υπάρχει ένας σύνδεσμος με ένα αρχείο ήχου ενός ατόμου που περιγράφει το βίντεο. Αυτό θα έχει περίπου την εμφάνιση του παρακάτω κώδικα σε HTML.
Παράδειγμα κώδικα:
<a href="../video/marslanding.mp4"><img src="../images/spaceship.jpg"
alt="Mars landing, video-only" width="193" height="255"/></a>
<br />
<a href="Mars_landing_audio.mp3">Audio description of "Mars Landing"</a>
Για μια Ιστοσελίδα που περιέχει περιεχόμενο μόνο βίντεο:
Ελέγξτε ότι υπάρχει σύνδεσμος με μια ηχητική εναλλακτική, αμέσως πριν ή μετά το περιεχόμενο μόνο βίντεο.
Ελέγξτε ότι το #1 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν φόρμες
Αυτή η τεχνική σχετίζεται με:
Όταν ένα κουμπί καλεί μια λειτουργία σε ένα πεδίο εισόδου, έχει μια κενή ετικέτα κειμένου και αποδίδεται παρακείμενο στο πεδίο εισόδου, το κουμπί ενεργεί επίσης ως ετικέτα για το πεδίο εισόδου. Αυτή η ετικέτα βοηθά τους χρήστες να κατανοήσουν τον σκοπό του πεδίου χωρίς εισαγωγή επαναλαμβανόμενου κειμένου στην Ιστοσελίδα. Τα κουμπιά που αποδίδουν ετικέτες σε μεμονωμένα πεδία κειμένου, ακολουθούν κατά κανόνα το πεδίο εισόδου.
Σημείωση: Το πεδίο πρέπει να έχει επίσης ένα όνομα που καθορίζεται μέσω προγραμματισμού, σύμφωνα με το Κριτήριο Επιτυχίας 4.1.2 (Success Criterion 4.1.2).
Μια Ιστοσελίδα περιέχει ένα πεδίο κειμένου όπου ο χρήστης μπορεί να εισάγει όρους αναζήτησης και ένα κουμπί με την ετικέτα "Αναζήτηση" για την εκτέλεση της αναζήτησης. Το κουμπί τοποθετείται δεξιά, μετά το πεδίο κειμένου, ώστε να είναι σαφές προς τον χρήστη το πεδίο κειμένου όπου θα εισάγει τον όρο αναζήτησης.
Ένας χρήστης στις Ηνωμένες Πολιτείες πρέπει να συμπληρώσει μια φόρμα. Καθώς οι νόμοι και οι απαιτήσεις είναι διαφορετικοί σε διαφορετικές πολιτείες εντός των Η.Π.Α., ο χρήστης πρέπει να επιλέξει την έκδοση μιας φόρμας για την πολιτεία διαμονής του. Μια αναπτυσσόμενη λίστα επιτρέπει στον χρήστη να επιλέξει μια πολιτεία. Το παρακείμενο κουμπί φέρει την ετικέτα "Λήψη φόρμας για την πολιτεία." Πατώντας το κουμπί θα κατευθύνει τον χρήστη στην Ιστοσελίδα που περιέχει τη φόρμα για την επιλεγμένη πολιτεία.
Για ένα πεδίο και ένα κουμπί χρησιμοποιώντας αυτήν την τεχνική:
Ελέγξτε ότι το πεδίο και το κουμπί είναι το ένα δίπλα στο άλλο στη σειρά ανάγνωσης που ορίζεται μέσω προγραμματισμού.
Ελέγξτε ότι το πεδίο και το κουμπί αποδίδονται το ένα δίπλα στο άλλο.
Όλοι οι έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική αναζητά επιβεβαίωση από τον χρήστη ότι η επιλεγμένη ενέργεια είναι η δική του/της σκόπιμη ενέργεια. Χρησιμοποιήστε αυτή την τεχνική σε περιπτώσεις όπου η ενέργεια δεν μπορεί να αναιρεθεί ύστερα από την διεκπεραίωσή της. Αυτό θα βοηθήσει τους χρήστες να αποφύγουν την υποβολή μιας φόρμας ή διαγραφή δεδομένων κατά λάθος.
Για παράδειγμα, αυτό μπορεί να συμβεί όταν ο χρήστης αναμένει τα κουμπιά "υποβολή" και "άκυρο" να εμφανίζονται με σειρά αντίθετη εκείνης με την οποία παρέχονται και επιλέγει ένα κουμπί πολύ γρήγορα για να προσέξει τη μη αναμενόμενη σειρά. Η παρουσίαση στον χρήστη μιας αίτησης επιβεβαίωσης, του επιτρέπει να αναγνωρίσει το σφάλμα και είτε να διακόψει την υποβολή των δεδομένων ή να διακόψει την απώλεια των δεδομένων που εισάγονται.
Η αίτηση επιβεβαίωσης θα πρέπει να πληροφορεί τον χρήστη για την ενέργεια που επιλέχθηκε και τις συνέπειες σε περίπτωση συνέχειας με την ενέργεια.
Ένας ηλεκτρονικός ιστότοπος ταξιδιών επιτρέπει στους χρήστες να δημιουργήσουν δρομολόγια ταξιδιών που δεσμεύουν θέσεις σε διαφορετικές αεροπορικές εταιρείες. Οι χρήστες ενδέχεται να αναζητούν, τροποποιούν και ακυρώνουν τα τρέχοντα δρομολόγιά τους. Εάν ο χρήστης χρειάζεται να ακυρώσει τα σχέδια ταξιδιού του, εντοπίζει το δρομολόγιο στην Ιστοσελίδα και το διαγράφει από τη λίστα με τα τρέχοντα δρομολόγια. Αυτή η ενέργεια έχει ως αποτέλεσμα την ακύρωση των κρατήσεων θέσης του και δεν αναστρέφεται. Ο χρήστης πληροφορείται ότι η επιλεγμένη ενέργεια θα ακυρώσει τις τρέχουσες κρατήσεις θέσης του και ότι ενδέχεται να μην είναι εφικτό να πραγματοποιήσει μια συγκρίσιμη κράτηση στις ίδιες πτήσεις όταν οι ενέργειές του έχουν διεκπεραιωθεί. Ζητείται από τον χρήστη επιβεβαίωση ή ακύρωση της διαγραφής του δρομολογίου.
Μια εφαρμογή Webmail αποθηκεύει το ηλεκτρονικό ταχυδρομείο ενός χρήστη σε έναν διακομιστή, ώστε να μπορεί να είναι προσβάσιμο από οπουδήποτε στον Ιστό. Όταν ένας χρήστης διαγράφει ένα μήνυμα ηλεκτρονικού ταχυδρομείου, αυτό μεταφέρεται σε έναν φάκελο τύπου κάδου απορριμμάτων, από όπου μπορεί να ανακτηθεί εάν η διαγραφή προέκυψε κατά λάθος. Υπάρχει μια εντολή "Άδειασμα κάδου" για τη διαγραφή των μηνυμάτων στον φάκελο κάδου απορριμμάτων από τον διακομιστή. Όταν ο φάκελος κάδου απορριμμάτων έχει αδειάσει, τα μηνύματα δεν είναι πλέον ανακτήσιμα. Πριν από το άδειασμα του φακέλου κάδου απορριμμάτων, ζητείται από τον χρήστη να επιβεβαιώσει ή να ακυρώσει τη διαγραφή του ηλεκτρονικού ταχυδρομείου στον φάκελο κάδου απορριμμάτων.
Μια φόρμα χρησιμοποιείται για τη συλλογή απαντήσεων για έναν έλεγχο. Όταν το κουμπί "υποβολή" ή "επαναφορά" επιλεγεί, ο χρήστης παρουσιάζεται με μια Ιστοσελίδα που τον πληροφορεί για την επιλογή του και ζητείται η επιβεβαίωσή του για να συνεχίσει. Παράδειγμα 1: "Έχετε επιλέξει επαναφορά της φόρμας. Αυτό θα διαγράψει όλα τα δεδομένα που καταχωρήθηκαν προηγουμένως και δεν θα υποβάλλει οποιεσδήποτε απαντήσεις. Θέλετε να γίνει επαναφορά της φόρμας; [κουμπί ναι] [κουμπί όχι]" Παράδειγμα 2: "Έχετε επιλέξει υποβολή της φόρμας. Αυτό θα υποβάλει δεδομένα που καταχωρήθηκαν ως τελικές απαντήσεις σας και δεν μπορεί να αλλάξει. Θέλετε να γίνει υποβολή της φόρμας; [κουμπί ναι] [κουμπί όχι]"
Ένας τόπος για χρηματιστές επιτρέπει στους χρήστες να αγοράζουν και να πωλούν μετοχές και άλλα δάνεια. Εάν ο χρήστης πραγματοποιήσει μια συναλλαγή κατά τη διάρκεια των ωρών συναλλαγής, εμφανίζεται ένα παράθυρο με πληροφορίες προς τον χρήστη ότι η συναλλαγή είναι άμεση και μη αναστρέψιμη και φέρει κουμπιά με τις ενδείξεις, "συνέχεια" και "άκυρο."
Πραγματοποιήστε εκκίνηση της ενέργειας που δεν μπορεί να αντιστραφεί ή αλλάξει.
Ελέγξτε ότι παρουσιάζεται μια αίτηση επιβεβαίωσης της επιλεγμένης ενέργειας.
Ελέγξτε ότι η ενέργεια μπορεί να επιβεβαιωθεί και να ακυρωθεί.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Πολλά άτομα με νοητικές αναπηρίες έχουν σημαντικό πρόβλημα με μπλοκ κειμένου που είναι στοιχισμένα (ευθυγράμμιση τόσο στο αριστερό, όσο και στο δεξί περιθώριο). Τα διαστήματα μεταξύ των λέξεων δημιουργούν "μεγάλα διαστήματα λευκού" που κατακλύζουν τη σελίδα, κάτι που μπορεί να καταστήσει το κείμενο δυσανάγνωστο για ορισμένα άτομα. Αυτή η αποτυχία περιγράφει περιπτώσεις όπου προκύπτει αυτή η διάταξη κειμένου που προκαλεί σύγχυση. Ο καλύτερος τρόπος να αποφευχθεί αυτό το πρόβλημα είναι η δημιουργία διάταξης κειμένου που είναι πλήρως στοιχισμένο.
Για τις περισσότερες τεχνολογίες, απλά εξαιρέστε κάθε δήλωση ευθυγράμμισης. Για παράδειγμα, το παρακάτω κείμενο θα στοιχηθεί σε HTML στα αριστερά εξ ορισμού, όπου η γλώσσα της σελίδας είναι δεξιά προς αριστερά.
Παράδειγμα κώδικα:
<p>
Lorem ipsum dolor sit amet, ...
</p>
Μια Ιστοσελίδα περιλαμβάνει ενότητες με ανάμεικτη ευθυγράμμιση. Οι παράγραφοι στο σώμα της σελίδας ευθυγραμμίζονται στο αριστερό περιθώριο. Το κείμενο περιλαμβάνει επίσης έναν αριθμό αντλημένων παραθεμάτων που ευθυγραμμίζονται στο δεξί περιθώριο.
Ανοίξτε τη σελίδα σε ένα κοινό πρόγραμμα περιήγησης.
Επαληθεύστε ότι το περιεχόμενο δεν στοιχίζεται (ευθυγράμμιση τόσο στο αριστερό, όσο και στο δεξί περιθώριο).
Η διαδικασία ελέγχου #2 είναι αληθής.
Όλες οι τεχνολογίες όπου ο ήχος αναπαράγεται αυτόματα.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέπεται σε έναν χρήστη να απενεργοποιήσει ήχους που ενεργοποιούνται αυτόματα όταν φορτώνει μια σελίδα. Το στοιχείο ελέγχου της απενεργοποίησης των ήχων θα πρέπει να βρίσκεται κοντά στην αρχή της σελίδας, ώστε να επιτρέπεται στο στοιχείο ελέγχου να γίνεται εύκολα και γρήγορα αντιληπτό από τους χρήστες. Αυτό είναι χρήσιμο για εκείνους που χρησιμοποιούν υποστηρικτικές τεχνολογίες (όπως προγράμματα ανάγνωσης οθόνης, μεγεθυντές οθόνης, μηχανισμούς εναλλαγής κ.λπ.) και εκείνους που δεν χρησιμοποιούν (όπως άτομα με νοητικές, μαθησιακές και γλωσσικές αναπηρίες).
Σε αυτήν την τεχνική ένας συγγραφέας περιλαμβάνει ένα στοιχείο ελέγχου που καθιστά εφικτό για χρήστες να απενεργοποιούν κάθε ήχο που αναπαράγεται αυτόματα. Το στοιχείο ελέγχου θα πρέπει να λειτουργεί μέσω πληκτρολογίου, να βρίσκεται νωρίς στη σειρά στηλοθέτησης και ανάγνωσης και να φέρει εμφανή ετικέτα που να υποδεικνύει ότι θα απενεργοποιήσει τους ήχους που αναπαράγονται.
Μια Ιστοσελίδα περιέχει μια παρουσίαση μέσων βάσει χρόνου που περιλαμβάνει ένα ηχητικό κομμάτι, καθώς και κινούμενο βίντεο που περιγράφει τον τρόπο επισκευής μιας χορτοκοπτικής μηχανής. Η σελίδα περιέχει 2 κουμπιά με την ένδειξη "Παύση" και "Διακοπή", που παρέχουν στον χρήστη έλεγχο για το πότε και εάν θα γίνει αναπαραγωγή των μέσων βάσει χρόνου.
Μια Ιστοσελίδα περιέχει μια ένθετη ταινία μικρού μήκους. Η σελίδα περιέχει ένα κουμπί με την ένδειξη, "Παύση ταινίας", το οποίο επιτρέπει στον χρήστη να κάνει παύση της ταινίας.
Μια Ιστοσελίδα περιέχει μια παρουσίαση Flash που περιλαμβάνει βίντεο και ήχο. Η σελίδα περιέχει ένα κουμπί με την ένδειξη, "Απενεργοποίηση πολυμέσων", το οποίο επιτρέπει στον χρήστη να διακόψει κάθε αναπαραγωγή βίντεο και ήχου.
Φορτώστε μια Ιστοσελίδα.
Ελέγξτε για αυτόματη αναπαραγωγή μουσικής ή ήχων.
Ελέγξτε ότι ένα στοιχείο ελέγχου που επιτρέπει στον χρήστη να απενεργοποιεί τους ήχους, παρέχεται κοντά στην αρχή της σελίδας.
Ελέγξτε ότι το #3 είναι αληθές.
Όλες οι τεχνολογίες που μπορούν να αναπαράγουν ήχο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει σε έναν χρήστη τον έλεγχο της χρήσης ήχων σε περιεχόμενο Ιστού. Κάποιος που χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης ενδέχεται να θεωρήσει ότι αποσπάται σημαντικά η προσοχή του και ότι είναι δύσκολο να ακούσει το πρόγραμμα ανάγνωσης της οθόνης, εάν υπάρχουν ήχοι που προέρχονται και από το περιεχόμενο Ιστού. Η παροχή ενός τρόπου αναπαραγωγής ήχων μόνο κατόπιν αίτησης, δίνει στον χρήστη τον απαραίτητο έλεγχο για την ακρόαση κάθε ήχου χωρίς παρεμβολή με την έξοδο από ένα πρόγραμμα ανάγνωσης οθόνης.
Μια Ιστοσελίδα από μια κοινότητα συζήτησης για την γκρίζα φάλαινα, έχει έναν επαναλαμβανόμενο ήχο παρασκηνίου του τραγουδιού της γκρίζας φάλαινας. Υπάρχουν επίσης ήχοι παφλασμού του νερού. Οι ήχοι δεν αναπαράγονται αυτόματα. Αντίθετα, το περιεχόμενο Ιστού παρέχει έναν σύνδεσμο στην κορυφή της σελίδας που επιτρέπει στον χρήστη να αναπαράγει χειροκίνητα τους ήχους. Το κουμπί έχει την ένδειξη, "Ενεργοποίηση ήχων." Αφού πατήσετε το κουμπί "Ενεργοποίηση ήχων", μπορείτε να ακούσετε τους ήχους. Στη συνέχεια, παρουσιάζεται στον χρήστη μια επιλογή "Απενεργοποίηση ήχων."
Ένας σύνδεσμος παρέχεται προς ένα αρχείο ήχου που περιλαμβάνει τους ήχους των γκρίζων φαλαινών. Το κείμενο συνδέσμου λέει, "Ακούστε το τραγούδι της γκρίζας φάλαινας (mp3)."
Φορτώστε μια Ιστοσελίδα που είναι γνωστό ότι περιέχει ήχους που αναπαράγονται για 3 δευτερόλεπτα ή περισσότερο.
Ελέγξτε ότι δεν αναπαράγονται αυτόματα ήχοι.
Ελέγξτε ότι υπάρχει ένας τρόπος για έναν χρήστη να αναπαράγει χειροκίνητα ήχους.
Ελέγξτε ότι το #3 είναι αληθές.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας έκδοσης της σελίδας που δεν έχει πλήρη στοίχιση (στοίχιση τόσο αριστερά, όσο και δεξιά).
Ενδέχεται να υπάρχουν περιπτώσεις όταν για σκοπούς διάταξης, ένας συγγραφέας να επιθυμεί την πλήρη στοίχιση του κειμένου. Στις περιπτώσεις αυτές, αρκεί η παροχή ενός χαρακτηριστικού που καταργεί την στοίχιση του κειμένου. Το στοιχείο ελέγχου θα πρέπει να είναι εύκολα αντιληπτό, προσβάσιμο και κοντά στην αρχή της σελίδας.
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήση μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) (CSS) και Κατανόηση συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Ένα ηλεκτρονικό κλασσικό μυθιστόρημα σε έναν τόπο που επιχειρεί να αντιγράψει την εμφάνιση του αρχικά δημοσιευμένου έργου, που περιλαμβάνει πλήρη στοίχιση. Ένα κουμπί παρέχεται κοντά στην κορυφή της σελίδας με την ένδειξη, "κατάργηση πλήρους στοίχισης" και μια τεχνική εναλλαγής στυλ χρησιμοποιείται για την ανταλλαγή φύλλου στυλ. Το νέο φύλλο στυλ ευθυγραμμίζει το κείμενο μόνο στα αριστερά.
Ανοίξτε μια σελίδα με πλήρη στοίχιση.
Ελέγξτε ότι υπάρχει ένα χαρακτηριστικό κατάργησης της πλήρους στοίχισης.
Ελέγξτε ότι το χαρακτηριστικό καταργεί την πλήρη στοίχιση.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Οποιαδήποτε τεχνολογία που υποστηρίζει ήχο και βίντεο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας δεύτερης έκδοσης του περιεχομένου βίντεο που παρέχει ηχητικές περιγραφές, ώστε να είναι εφικτό για άτομα που δεν μπορούν να δουν, να είναι σε θέση να καταλαβαίνουν καλύτερα οπτικοηχητικό υλικό.
Εφόσον οι περισσότεροι πράκτορες χρήστη δεν μπορούν να συγχωνεύσουν πολλαπλά ηχητικά κομμάτια, αυτή η τεχνική προσθέτει τις πρόσθετες ηχητικές πληροφορίες σε συγχρονισμένα μέσα, παρέχοντας μια δεύτερη έκδοση της ταινίας όπου το αρχικό ηχητικό κομμάτι και πρόσθετη ηχητική περιγραφή έχουν συνδυαστεί σε ένα μεμονωμένο κομμάτι. Αυτές οι πρόσθετες πληροφορίες επικεντρώνονται σε ενέργειες, χαρακτήρες, αλλαγές σκηνών και κείμενο επί της οθόνης (όχι επεξηγήσεις) που είναι σημαντικό για την κατανόηση του περιεχομένου.
Εφόσον δεν είναι χρήσιμο αυτές οι νέες πληροφορίες να επικαλύπτουν σημαντικές ηχητικές πληροφορίες του αρχικού ηχητικού πλαισίου (ή να επικαλύπτονται από δυνατά ηχητικά εφέ), οι νέες πληροφορίες προστίθενται κατά τη διάρκεια παύσεων του διαλόγου και των ηχητικών εφέ. Αυτό περιορίζει την ποσότητα των συμπληρωματικών πληροφοριών που μπορούν να προστεθούν στο πρόγραμμα.
Η παροχή μιας δεύτερης έκδοσης της ταινίας που περιλαμβάνει ηχητικές περιγραφές ως το κύριο ηχητικό κομμάτι, θα καταστήσει το περιεχόμενο προσβάσιμο για άτομα με τύφλωση που χρειάζεται να ακούνε όχι μόνο τον διάλογο, αλλά και το περιβάλλον επίσης και άλλες πτυχές του βίντεο που δεν επικοινωνούν μόνο από τον διάλογο των χαρακτήρων.
Δύο εκδόσεις ενός βίντεο μιας παράστασης όπερας είναι διαθέσιμα. Η πρώτη έκδοση περιλαμβάνει μόνο τη μουσική. Η δεύτερη έκδοση περιλαμβάνει τόσο τη μουσική, όσο και τη φωνή που περιγράφει τις ενέργειες των ηθοποιών στη σκηνή.
Ένα βίντεο ενός ζογκλέρ που εκτελεί μια παράσταση μπροστά σε μια ομάδα παιδιών, περιλαμβάνει μια έκδοση με ηχητική περιγραφή. Ο αφηγητής της ηχητικής περιγραφής περιγράφει τον αριθμό και τύπο στοιχείων με τα οποία ο ζογκλέρ πραγματοποιεί τα ακροβατικά του, καθώς και τις αντιδράσεις των παιδιών κατά τη διάρκεια της παράστασης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανοίξτε την έκδοση των μέσων όπου σημαντικές οπτικές λεπτομέρειες δεν μπορούν να γίνουν κατανοητές μόνο από το κύριο ηχητικό κομμάτι.
Ακούστε την ταινία.
Ελέγξτε εάν τα κενά στον διάλογο χρησιμοποιούνται για τη μεταφορά σημαντικών πληροφοριών σχετικά με το οπτικό περιεχόμενο.
Εάν οι εναλλακτικές εκδόσεις βρίσκονται σε ξεχωριστή σελίδα, ελέγξτε τη διαθεσιμότητα των συνδέσμων που επιτρέπουν στον χρήστη να λάβει τις άλλες εκδόσεις.
Ελέγξτε ότι το #3 είναι αληθές.
Κάθε τεχνολογία.
Αυτή η τεχνική σχετίζεται με:
Όταν η αντίθεση μεταξύ του κειμένου και του παρασκηνίου του για ορισμένο τμήμα της σελίδας δεν έχουν σχεδιαστεί για να ικανοποιούν το επίπεδο αντίθεσης για το Κριτήριο Επιτυχίας 1.4.3 (Success Criterion 1.4.3) ή 1.4.6, είναι εφικτό να ικανοποιούνται αυτές οι οδηγίες χρησιμοποιώντας την έκφραση "εναλλακτική έκδοση" στις απαιτήσεις συμμόρφωσης 1 (Conformance Requirement 1). Ένας σύνδεσμος ή στοιχείο ελέγχου στη σελίδα μπορεί είτε να αλλάζει τη σελίδα ώστε να συμμορφώνονται όλες οι πτυχές ή μπορεί να οδηγήσει τον θεατή σε μια νέα έκδοση της σελίδας που συμμορφώνεται με το επιθυμητό επίπεδο.
Προκειμένου να χρησιμοποιηθεί αυτή η τεχνική επιτυχώς, τρία πράγματα πρέπει να ισχύουν.
Ο σύνδεσμος ή το στοιχείο ελέγχου στην αρχική σελίδα πρέπει το ίδιο να ικανοποιεί την απαίτηση αντίθεσης του επιθυμητού Κριτηρίου Επιτυχίας. (εάν ο χρήστης δεν μπορεί να δει το στοιχείο ελέγχου, ενδέχεται να μην είναι σε θέση να το χρησιμοποιήσει για μετάβαση στη νέα σελίδα.)
Η νέα σελίδα πρέπει να περιέχει όλες τις ίδιες πληροφορίες και λειτουργίες με την αρχική σελίδα.
Η νέα σελίδα πρέπει να συμμορφώνεται με όλα τα κριτήρια επιτυχίας για το επιθυμητό επίπεδο συμμόρφωσης. (π.χ., η νέα σελίδα δεν μπορεί απλά να έχει το επιθυμητό επίπεδο αντίθεσης, αλλά να μην συμμορφώνεται κατά τ' άλλα).
Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για να ικανοποιηθεί το κριτήριο επιτυχίας 1.4.3, έχοντας αντίθεση κειμένου (ή εικόνων κειμένου) στην εναλλακτική έκδοση της σελίδας 4,5:1 και κάθε μεγάλου κειμένου (ή εικόνων μεγάλου κειμένου) με αντίθεση 3:1 με το υπόβαθρό του. Εάν η εναλλακτική έκδοση της σελίδας έχει όλο το κείμενο (ή τις εικόνες κειμένου) με αντίθεση 7:1 και το μεγάλο κείμενο (ή τις εικόνες μεγάλου κειμένου) με αντίθεση 4,5:1 , τότε θα ικανοποιεί αμφότερα τα κριτήρια επιτυχίας 1.4.3 και 1.4.6.
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήση μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) (CSS) και Κατανόηση συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Μια σελίδα με τίτλους που δεν ικανοποιούν τις απαιτήσεις αντίθεσης 3:1 έχει έναν σύνδεσμο υψηλής αντίθεσης (5:1) στην κορυφή της σελίδας που οδηγεί τον χρήστη σε μια νέα έκδοση της σελίδας με ελάχιστη αντίθεση 4,5:1 σε όλο το κείμενο και τις εικόνες του κειμένου.
Μια σελίδα κάνει χρήση σκιασμένου παρασκηνίου για εφέ, αλλά οδηγεί σε κείμενο με αντίθεση παρασκηνίου 4:1. Ένα στοιχείο ελέγχου στην κορυφή της σελίδας έχει την ένδειξη, "υψηλή αντίθεση". Με κλικ σε αυτό πραγματοποιείται χρήση διαφορετικών στυλ και απόρριψη των χρωμάτων παρασκηνίου για επίτευξη αντίθεσης 7:1.
Ελέγξτε ότι ένας σύνδεσμος ή στοιχείο ελέγχου υφίσταται στην αρχική σελίδα που παρέχει πρόσβαση στην εναλλακτική έκδοση.
Ελέγξτε ότι ο σύνδεσμος ή το στοιχείο ελέγχου στην αρχική σελίδα συμμορφώνεται με όλα τα κριτήρια επιτυχίας για το επίπεδο συμμόρφωσης που ελέγχεται.
Ελέγξτε ότι η εναλλακτική έκδοση ικανοποιεί την αντίθεση και όλα τα υπόλοιπα κριτήρια επιτυχίας για το επίπεδο συμμόρφωσης που ελέγχεται.
Και οι τρεις έλεγχοι είναι αληθείς.
Κάθε τεχνολογία που επιτρέπει σε χρήστες να αποθηκεύσουν προτιμήσεις για επαναχρησιμοποίηση σε άλλες σελίδες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να συμπεριλάβει ένα στοιχείο ελέγχου σε μια Ιστοσελίδα ή σύνολο Ιστοσελίδων, που επιτρέπει σε χρήστες να καθορίσουν προτιμήσεις χρωμάτων προσκηνίου και παρασκηνίου για το περιεχόμενο. Αυτή η τεχνική μπορεί να υλοποιηθεί χρησιμοποιώντας κάθε τεχνολογία που επιτρέπει σε χρήστες να αποθηκεύουν προτιμήσεις που μπορούν να χρησιμοποιούνται στις σελίδες. Χρησιμοποιώντας αυτήν την τεχνική, ένας συγγραφέας περιλαμβάνει ένα στοιχείο ελέγχου επιλογής χρωμάτων στον τόπο, που επιτρέπει στους χρήστες να επιλέγουν και αποθηκεύουν προτιμήσεις χρωμάτων προσκηνίου και παρασκηνίου, για χρήση σε άλλες σελίδες σε έναν τόπο. Οι σελίδες σχεδιάζονται κατάλληλα ώστε να αναζητούν αυτές τις προτιμήσεις και να προσαρμόζονται αντίστοιχα όταν εντοπίζονται αποθηκευμένες ρυθμίσεις.
Πολλοί χρήστες με νοητικές αναπηρίες έχουν πρόβλημα με τυπικό μαύρο κείμενο σε λευκό παρασκήνιο. Ορισμένες φορές, μπορούν να διαβάζουν το κείμενο πολύ καλύτερα χρησιμοποιώντας διαφορετικά χρώματα για το κείμενο και το παρασκήνιο και ορισμένες φορές αυτοί οι χρωματικοί συνδυασμοί είναι πολύ συγκεκριμένοι και όχι κάτι αναμενόμενο από κάποιον άλλο (για παράδειγμα, καφέ ή μπλε).
Ορισμένοι από αυτούς τους χρήστες θα έχουν δυσκολίες κατά τον ορισμό χρωμάτων χρησιμοποιώντας τις ρυθμίσεις χρώματος του προγράμματος περιήγησης ή τις ρυθμίσεις χρωμάτων των λειτουργικών συστημάτων. Η παροχή ενός εργαλείου στην ιστοσελίδα που παρέχει ένα ευρύ φάσμα χρωμάτων προσκηνίου και παρασκηνίου, θα τους επιτρέψει να αλλάζουν εύκολα τα χρώματα, χωρίς να εμβαθύνουν στις ρυθμίσεις του προγράμματος περιήγησης.
Ο χρήστης μπορεί να πληκτρολογήσει δεκαεξαδικές τιμές στα πεδία κειμένου. Ο σύνδεσμος "επιλογή" θα ανοίξει ένα εργαλείο επιλογής χρωμάτων για το γειτονικό πεδίο.
Το εργαλείο επιλογής χρωμάτων άνοιξε για την επιλογή ενός χρώματος.
Ορίστε ένα λειτουργικό παράδειγμα αυτής της τεχνικής που υλοποιείται μέσω PHP, Javascript, CSS και XHTML: Παράδειγμα επιλογής χρωμάτων (Color Picker Example).
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι υπάρχει ένα στοιχείο ελέγχου στη σελίδα που προσδιορίζεται ως εργαλείο επιλογής χρωμάτων.
Ελέγξτε ότι το εργαλείο επιλογής χρωμάτων παρέχει μια ποικιλία επιλογών χρωμάτων για το κείμενο και το παρασκήνιο.
Επιλέξτε νέα χρώματα για το κείμενο και το παρασκήνιο, χρησιμοποιώντας το εργαλείο.
Ελέγξτε ότι το περιεχόμενο ενημερώνεται για χρήση των επιλεγμένων συνδυασμών χρωμάτων.
Οι έλεγχοι #1 και #4 είναι αληθείς.
Κατάλληλη για χρήση σε όλο το γενικό περιεχόμενο Ιστού, συμπεριλαμβανομένων ειδικών περιπτώσεων όπως υλικό που έχει σχεδιαστεί ειδικά για προβολή σε φουαγέ.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός εύκολου τρόπου ικανοποίησης του Κριτηρίου Επιτυχίας για αντικείμενα που αναβοσβήνουν, αλλά είναι μικρά.
Εάν έχετε κάτι που αναβοσβήνει περισσότερο από 3 φορές το δευτερόλεπτο (ώστε να μην είναι δυνατή η χρήση του G19), αλλά η περιοχή αναβοσβησίματος είναι μικρότερη του 25% των 10 μοιρών οπτικού πεδίου (το οποίο αναπαριστά την κεντρική περιοχή όρασης στο μάτι), τότε θα ικανοποιείται αυτόματα.
Οι 10 μοίρες οπτικού πεδίου αναπαριστάνουν την κεντρική περιοχή όρασης στο μάτι. Αυτή η περιοχή φέρει υψηλή συγκέντρωση οπτικών αισθητήρων. Τα φλας στην περιοχή αυτή μεταδίδονται στον οπτικό φλοιό. Για φωτοευαίσθητα άτομα, αυτή η δραστηριότητα φλας (αναβοσβήσιμο) στον οπτικό φλοιό μπορεί να προκαλέσει κρίσεις. Το αναβοσβήσιμο σε άλλες περιοχές του ματιού (που φέρουν πολύ λιγότερους αισθητήρες) έχει πολύ μικρότερη επίδραση στον φλοιό. Συνεπώς, η επισήμανση είναι ακριβώς 10 μοίρες της κεντρικής όρασης.
Εάν το περιεχόμενο αφορά γενική χρήση Ιστού, μπορείτε να χρησιμοποιήσετε τον Τύπο 1:Μικρή ασφαλής περιοχή για περιεχόμενο Ιστού (Formula 1: Small Safe Area for Web Content).
Εάν το περιεχόμενο αφορά σε μια γνωστή προβολή (π.χ. το φουαγέ μιας εταιρείας), τότε θα πρέπει να χρησιμοποιείται ο Τύπος 2:Μικρή ασφαλής περιοχή για γνωστές οθόνες (Formula 2: Small Safe Area for Known Displays).
Τύπος 1: Μικρή ασφαλής περιοχή για περιεχόμενο Ιστού
Οι περισσότεροι συγγραφείς Ιστού δεν γνωρίζουν τον τρόπο μετάφρασης οπτικού πεδίου σε pixel, που είναι ό,τι μπορεί γενικά να αντιμετωπίσουν. Αυτή η τεχνική παρέχει αυτή τη μετάφραση.
Σε αυτό το χρονικό σημείο, η επικρατέστερη προβολή είναι 1024 x 768 και διαγώνιος περίπου 15-17 ίντσες. Κατά την προβολή σε μια τυπική απόσταση προβολής (11-26 ίντσες), ένα οπτικό πεδίο 10 μοιρών θα συλλάβει μια περιοχή περίπου 341 x 256 pixel. Αυτή δεν είναι κυκλική, αλλά ούτε βρίσκεται στην κεντρική όραση των περισσότερων χρηστών και η διαφορά είναι τόσο μικρή (και στην άκρη της κεντρικής όρασης όπου οι αισθητήρες είναι λιγότεροι) που δεν είναι σημαντική.
Καθώς το κριτήριο είναι 25% κάθε οπτικού πεδίου 10 μοιρών, οποιοδήποτε μεμονωμένο συμβάν αναβοσβησίματος σε μια οθόνη (δεν υπάρχει άλλο αναβοσβήσιμο στην οθόνη) που είναι μικρότερο από μια συνεχή περιοχή 21.284 sq pixel (οποιοδήποτε σχήμα), θα υπερβεί τα γενικά όρια και όρια κόκκινου φλας.
Η ανάλυση 1024 x 768 επιλέχθηκε καθώς αναπαριστά το πιο σύνηθες μέγεθος οθόνης. Λειτουργεί επίσης με υψηλότερης ανάλυσης οθόνες, καθώς η πιο συμπαγής πυκνότητα pixel θα οδηγήσει σε μικρότερο και ασφαλέστερο μέγεθος εικόνας.
Οι χρήστες με οθόνες χαμηλής ανάλυσης ή όσοι μεγεθύνουν ή παρακολουθούν τις οθόνες τους από κοντινή απόσταση, θα έχουν υψηλότερο κίνδυνο, ανάλογα με την απόσταση προβολής. Για την αντιμετώπιση των αναγκών αυτής της ομάδας, θα πρέπει να χρησιμοποιηθεί η τεχνική Διασφάλιση ότι κανένα συστατικό στοιχείο του περιεχομένου δεν αναβοσβήνει περισσότερες από τρεις φορές εντός κάθε περιόδου 1 δευτερολέπτου (G19: Ensuring that no component of the content flashes more than three times in any 1-second period) καθώς είναι ανεξάρτητη της ανάλυσης οθόνης ή της απόστασης προβολής.
Τύπος 2: Μικρή ασφαλής περιοχή για γνωστές οθόνες
Για τον υπολογισμό της μικρής ασφαλούς περιοχής (σε pixel) στην οθόνη όταν το μέγεθος οθόνης, η ανάλυση και η απόσταση προβολής είναι γνωστά, χρησιμοποιήστε την ακόλουθη διαδικασία.
Σημείωση: Για διάφορους λόγους (συχνά μη κυκλική διανομή των αισθητήρων κεντρικής όρασης, απλότητα, υπολογιστική εξυπηρέτηση, ιστορικό), μια ορθογώνια προσέγγιση 4:3 των κεντρικών 10 μοιρών οπτικού πεδίου χρησιμοποιείται σε 10 μοίρες πλάτος και 7,5 μοίρες ύψος. Αυτό έχει μια περιοχή 75 τετραγωνικών μοιρών, σε αντίθεση με περιοχή 78,5 τετραγωνικών μοιρών ενός πραγματικού κύκλου 10 μοιρών.
Για τη μετατροπή της απόστασης προβολής σε ορθογώνιο μέγεθος, πολλαπλασιάστε την απόσταση προβολής επί 0,1745 (10 * π / 180) για να λάβετε το πλάτος του ορθογωνίου και πολλαπλασιάστε την απόσταση προβολής επί 0,1309 (7,5 * π / 180) για να λάβετε το ύψος του ορθογωνίου. (Αυτός ο υπολογισμός μπορεί να πραγματοποιηθεί σε ίντσες ή χιλιοστόμετρα ή οποιαδήποτε άλλη μονάδα μήκους.)
Καθορίστε το μέγεθος γωνίας 10 μοιρών σε pixel.
Για να το κάνετε αυτό, πολλαπλασιάστε το πλάτος και ύψος του ορθογωνίου από το βήμα 1 με την ανάλυση της οθόνης, σε pixel ανά μήκος μονάδας, ώστε να λάβετε το οριζόντιο και κάθετο μέγεθος του ορθογωνίου σε pixel.
Για μια προβολή ευρείας οθόνης 1080p (η οποία είναι 1920 επί 1080 pixel), η ανάλυση της οθόνης σε pixel ανά ίντσα είναι 2203, διαιρούμενο με το διαγώνιο μέγεθος οθόνης σε ίντσες.
Για μια προβολή ευρείας οθόνης 720p (η οποία είναι 1365 επί 768 pixel), η ανάλυση της οθόνης σε pixel ανά ίντσα είναι 1566, διαιρούμενο με το διαγώνιο μέγεθος οθόνης σε ίντσες.
Για μια οθόνη υπολογιστή LCD που προσδιορίζει το βήμα pixel σε χιλιοστόμετρα / pixel, η ανάλυση της οθόνης σε pixel ανά ίντσα είναι 25,4 διαιρούμενο με το βήμα pixel σε χιλιοστόμετρα.
Για κάθε οθόνη, εάν γνωρίζετε το πραγματικό διαγώνιο μέγεθος της οθόνης σε ίντσες και την οριζόντια και κάθετη ανάλυση της οθόνης σε pixel, τότε η ανάλυση της οθόνης σε pixel ανά ίντσα είναι η τετραγωνική ρίζα του ( (οριζόντια ανάλυση σε pixel) * (οριζόντια ανάλυση σε pixel) + (κάθετη ανάλυση σε pixel) * (κάθετη ανάλυση σε pixel) ).
Πολλαπλασιάστε το πλάτος του ορθογωνίου επί το ύψος και διαιρέστε με 4.
Ένας συγγραφέας δημιουργεί μια κινούμενη εικόνα που θα προβάλλεται σε μια οθόνη στην αίθουσα υποδοχής μιας εταιρείας. Χρησιμοποιώντας το μέγεθος και την ανάλυση της οθόνης και την πλησιέστερη απόσταση που ένα άτομο μπορεί να σταθεί κατά την προβολή στην οθόνη, υπολογίζεται το μέγεθος του 25% των 10 μοιρών κεντρικής όρασης σε pixel (μέσω του παραπάνω τύπου). Αυτή θα είναι η μικρή ασφαλής περιοχή. Έπειτα μπορούν να προσέξουν να μην αναβοσβήσει ποτέ καμία περιοχή μεγαλύτερη της μικρής ασφαλούς περιοχής.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Υπολογίζεται η μικρή ασφαλής περιοχή.
Ελέγξτε ότι μόνο μία περιοχή της οθόνης αναβοσβήνει τη φορά.
Ελέγξτε ότι το περιεχόμενο που αναβοσβήνει θα ταιριάζει εντός ενός συνεχόμενου κοντέινερ, του οποίου η επιφάνεια είναι μικρότερη της μικρή ασφαλής επιφάνεια.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Περιεχόμενο που αποδέχεται δεδομένα εισόδου χρήστη, με περιορισμούς στη μορφή, την τιμή ή/και τον τύπο των δεδομένων εισόδου.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η πρόταση σωστού κειμένου όπου οι πληροφορίες που παρέχονται από τον χρήστη δεν γίνονται αποδεκτές και είναι γνωστό το πιθανό σωστό κείμενο. Οι προτάσεις μπορεί να περιλαμβάνουν σωστή ορθογραφία ή παρόμοιο κείμενο από μια γνωστή βάση πιθανού κειμένου.
Ανάλογα με τη φόρμα, οι προτάσεις μπορεί να εντοπίζονται δίπλα στο πεδίο όπου προσδιορίστηκε το σφάλμα, αλλού στη σελίδα ή μέσω ενός μηχανισμού αναζήτησης ή αναφοράς όπου αποτελέσματα θα παρατίθενται σε άλλο URI. Όπου είναι εφικτό, οι προτάσεις για διόρθωση θα ενσωματώνονται με τρόπο που είναι εύκολος για τον χρήστη. Για παράδειγμα, μια λάθος υποβολή ενδέχεται να επιστρέψει μια λίστα πιθανών διορθώσεων όπου ο χρήστης μπορεί να επιλέξει ένα τετράγωνο επιλογής ή ραδιόπληκτρο για να υποδείξει ποια επιλογή προοριζόταν. Προτάσεις ή σύνδεσμοι με τις προτάσεις θα τοποθετούνται κοντά στα πεδία φόρμας με τα οποία σχετίζονται, όπως στην κορυφή της φόρμας, πριν από τα πεδία φόρμας ή δίπλα στα πεδία φόρμας που απαιτούν διόρθωση.
Ένα πεδίο φόρμας απαιτεί ο χρήστης να εισάγει μια χρονική περίοδο που μπορεί να εκτείνεται από μέρες έως χρόνια. Ο χρήστης εισάγει τον αριθμό "6". Ο διακομιστής επιστρέφει τη φόρμα με τη μορφή που υποβλήθηκε από τον χρήστη και επίσης περιλαμβάνει ένα προτεινόμενο κείμενο δίπλα στο πεδίο φόρμας: "Ανίχνευση σφάλματος. Μήπως εννοείτε: 6 ημέρες, 6 εβδομάδες, 6 μήνες ή 6 χρόνια;"
Ο χρήστης εισάγει ένα όνομα πόλης με λανθασμένη ορθογραφία. Ο διακομιστής επιστρέφει τη φόρμα με τη μορφή που υποβλήθηκε από τον χρήστη και επίσης περιλαμβάνει ένα μήνυμα στην κορυφή της φόρμας που πληροφορεί τον χρήστη για το σφάλμα και έναν σύνδεσμο για μια λίστα ονομάτων πόλεων που ενδέχεται να εννοούσε ο χρήστης, όπως καθορίζεται από τη σύγκριση της αρχικής καταχώρησης με μια βάση δεδομένων ονομάτων πόλεων.
Μια λειτουργία οργάνωσης ταξιδιού διαδρομής λεωφορείου επιτρέπει στους χρήστες να εισάγουν το σημείο προέλευσης και προορισμού, επιτρέποντας στους χρήστες να εισάγουν διευθύνσεις οδών, διασταυρώσεις και μνημεία της πόλης. Όταν ο χρήστης εισάγει "Kohl,", παρουσιάζεται σε αυτόν μια λίστα με αποτελέσματα αναζήτησης με όμοια αποτελέσματα που φέρει την ένδειξη, "Η αναζήτησή σας για 'Kohl' επέστρεψε τα εξής". Ένα τετράγωνο επιλογής ακολουθεί με τα εξής, "Kohl Center,", "Kohl's Dept. Store-East" και "Kohl's Dept. Store-West" ως επιλογές που μπορεί να επιλέξει ο χρήστης.
Μια αναζήτηση εκτελεί έναν ορθογραφικό έλεγχο στην είσοδο και παρέχει έναν σύνδεσμο προς εναλλακτικές εάν ανιχνευθεί ένα ορθογραφικό λάθος. Όταν ο χρήστης κάνει κλικ στον σύνδεσμο, η αναζήτηση υποβάλλεται εκ νέου αυτόματα με τη σωστή ορθογραφία.
Προσδιορίστε τα πεδία φόρμας όπου το σωστό κείμενο θα πρέπει να συνάγεται από λανθασμένο κείμενο.
Συμπληρώστε τη φόρμα, συμπληρώνοντας σκοπίμως τα προσδιορισμένα πεδία της φόρμας με λάθος κείμενο.
Ελέγξτε ότι ο χρήστης παρουσιάζεται με προτάσεις για το σωστό κείμενο.
Ελέγξτε ότι οι προτάσεις παρέχονται δίπλα στο πεδίο φόρμας ή ένας σύνδεσμος με τις προτάσεις παρέχεται κοντά στο πεδίο φόρμας.
Οι έλεγχοι #3 και #4 είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού στην Ιστοσελίδα για την σταδιακή αύξηση του μεγέθους του κειμένου. Πολλά άτομα με χαμηλή όραση δεν μπορούν να χρησιμοποιήσουν το λογισμικό μεγέθυνσης και ενδέχεται να μην είναι εξοικειωμένοι με ρυθμίσεις του μεγέθους κειμένου στα προγράμματα περιήγησης. Αυτό ενδέχεται να ισχύει κυρίως για ηλικιωμένα άτομα που εκπαιδεύονται στη χρήση υπολογιστών σε προχωρημένη ηλικία και που μπορεί να αντιμετωπίζουν απώλεια όρασης λόγω της ηλικίας τους. Ενδέχεται επίσης να ισχύει για ορισμένα άτομα με νοητικές αναπηρίες που απαιτούν επίσης αυξημένο μέγεθος γραμματοσειράς.
Αυτή η τεχνική παρέχει έναν μηχανισμό που ορισμένοι χρήστες βρίσκουν πιο εύκολο στη χρήση. Ο μηχανισμός ενδέχεται να περιλαμβάνει συνδέσμους ή κουμπιά που θα πραγματοποιούν εναλλαγή της οπτικής παρουσίασης σε διαφορετικό φύλλο στυλ ή θα χρησιμοποιούν αρχεία εντολών για τη δυναμική αλλαγή του μεγέθους κειμένου.
Για την υλοποίηση αυτής της τεχνικής, ένας συγγραφέας παρέχει στοιχεία ελέγχου που επιτρέπουν στον χρήστη να αυξήσει σταδιακά ή να μειώσει το μέγεθος κειμένου όλου του κειμένου στη σελίδα, σε ένα μέγεθος τουλάχιστον 200% του προεπιλεγμένου μεγέθους κειμένου.
Αυτό μπορεί να επιτευχθεί παρέχοντας συνδέσμους, κουμπιά ή συνδεδεμένες εικόνες και τα ίδια τα στοιχεία ελέγχου θα πρέπει να εντοπίζονται όσο το δυνατόν πιο εύκολα (π.χ. εμφανής θέση στη σελίδα, παρουσίαση σε μεγαλύτερο μέγεθος κειμένου, υψηλή αντίθεση κ.λπ.).
Αυτή η τεχνική μπορεί επίσης να χρησιμοποιηθεί σε περιπτώσεις όπου δεν είναι δυνατή η χρήση κλιμακούμενων γραμματοσειρών, όπως περιπτώσεις προϋπάρχοντος κώδικα.
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήση μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκοδσης (C29: Using a style switcher to provide a conforming alternate version) (CSS) και Κατανόηση συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Ένα άρθρο εφημερίδας έχει δύο κουμπιά κοντά στην κορυφή της σελίδας. Το κουμπί "αύξηση μεγέθους κειμένου" έχει ένα κεφαλαίο γράμμα "Κ" με ένα βέλος προς τα επάνω και το κουμπί "μείωση μεγέθους κειμένου" έχει ένα μικρό γράμμα "Κ" με ένα βέλος προς τα κάτω. Υπάρχει κείμενο alt
σε κάθε κουμπί.
Ένας τόπος έχει μια σειρά φύλλων στυλ με διαφορετικό μέγεθος κειμένου. Ο χρήστης μπορεί να επιλέξει οποιοδήποτε από τα φύλλα στυλ, εάν το πρόγραμμα περιήγησής του παρέχει αυτή τη λειτουργία. Κάθε σελίδα περιλαμβάνει επίσης τους συνδέσμους "Αύξηση μεγέθους κειμένου" και "Μείωση μεγέθους κειμένου" που θα αλλάζουν το τρέχον φύλλο στυλ στο κατάλληλο εναλλακτικό φύλλο στυλ.
Ένας τόπος περιλαμβάνει το κείμενο, "Αλλαγή του μεγέθους κειμένου:" που ακολουθείται από τους συνδέσμους κειμένου "Πάνω" και "Κάτω" σε κάθε Ιστοσελίδα. Οι σύνδεσμοι ενεργοποιούν ένα Javascript που αλλοιώνει αντίστοιχα την τιμή της ιδιότητας μεγέθους κειμένου.
Ένας τόπος περιλαμβάνει έναν σύνδεσμο σε κάθε σελίδα με την ένδειξη, "Αλλαγή του μεγέθους κειμένου." Η σελίδα που προκύπτει περιλαμβάνει μια σειρά συνδέσμων που περιλαμβάνουν επιλογές εμφάνισης των διαθέσιμων μεγεθών. Οι σύνδεσμοι φέρουν τις ενδείξεις, "Μικρότερο μέγεθος γραμματοσειράς," "Μικρό μέγεθος γραμματοσειράς," "Προεπιλεγμένο μέγεθος γραμματοσειράς," "Μεγάλο μέγεθος γραμματοσειράς," κ.λπ.. Οδηγίες που προηγούνται της λίστας κατευθύνουν τους χρήστες σε έναν σύνδεσμο για την αλλαγή στο επιθυμητό μέγεθος γραμματοσειράς.
Αυξήστε το μέγεθος κειμένου και ελέγξτε να δείτε εάν το μέγεθος κειμένου αυξάνει.
Ελέγξτε ότι το μέγεθος κειμένου μπορεί να αυξηθεί στο 200% του αρχικού μεγέθους.
Μειώστε το μέγεθος κειμένου στην προεπιλεγμένη τιμή και ελέγξτε να δείτε εάν πραγματικά επιστρέφει στο προεπιλεγμένο μέγεθος.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Όλες οι τεχνολογίες που πραγματοποιούν εκ νέου ροή του κειμένου όταν αλλάζει το μέγεθος παραθύρων.
Αυτή η τεχνική σχετίζεται με:
Ορισμένοι πράκτορες χρήστη υποστηρίζουν την αλλαγή του μεγέθους κειμένου χωρίς αλλαγή άλλων διαστάσεων του κοντέινερ κειμένου. Η απώλεια περιεχομένου ή λειτουργιών μπορεί να προκύψει όταν πραγματοποιείται υπερχείλιση κειμένου στο διάστημα που έχει εκχωρηθεί για αυτό. Ωστόσο, οι ιδιότητες διάταξης ενδέχεται να παρέχουν έναν τρόπο να συνεχίσει αποτελεσματικά η εμφάνιση του περιεχομένου. Τα μεγέθη μπλοκ μπορεί να ορίζονται ως αρκετά φαρδιά ώστε το κείμενο να μην υπερχειλίζει όταν αλλάζει το μέγεθος κατά 200%. Κείμενο ενδέχεται να αναδιπλωθεί όταν δεν χωράει πλέον μέσα στο μπλοκ και το μπλοκ ενδέχεται να είναι αρκετά ψηλό ώστε όλο το κείμενο να συνεχίσει να χωράει στο μπλοκ. Το μπλοκ ενδέχεται να παρέχει γραμμές κύλισης όταν το κείμενο που άλλαξε μέγεθος δεν χωράει πλέον.
Χρησιμοποιούνται HTML και CSS για τη δημιουργία μιας διάταξης δύο στηλών για μια σελίδα κειμένου. Η χρήση της προεπιλεγμένης τιμής της ιδιότητα white-space
, normal
, οδηγεί στην αναδίπλωση του κειμένου. Συνεπώς, καθώς το μέγεθος του κειμένου αυξάνεται στο 200%, πραγματοποιείται εκ νέου ροή του κειμένου και η στήλη του κειμένου μεγαλώνει. Εάν η στήλη είναι πολύ μεγάλη για την οθόνη προβολής, ο πράκτορας χρήστη παρέχει γραμμές κύλισης ώστε ο χρήστης να μπορεί να πραγματοποιήσει κύλιση του κειμένου στην προβολή, καθώς ο συγγραφέας έχει προδιαγράψει τον κανόνα CSS overflow:scroll
ή overflow:auto
.
Μια διάταξη εφημερίδας με μπλοκ κειμένου σε στήλες. Τα μπλοκ έχουν σταθερό πλάτος, αλλά όχι ρυθμισμένο ύψος. Όταν το κείμενο αλλάζει μέγεθος στο πρόγραμμα περιήγησης, το κείμενο αναδιπλώνεται και καθιστά τα μπλοκ ψηλότερα.
Η χρήση σχετικών μονάδων τόσο στο κείμενο, όσο και στο κοντέινερ, επιτρέπει στο κοντέινερ να μεγαλώσει για να εξυπηρετήσει το κείμενο, χωρίς οποιαδήποτε περικοπή. Αυτή η εικόνα εμφανίζει το κείμενο χρησιμοποιώντας "κανονικό" μέγεθος γραμματοσειράς στο Internet Explorer. Το γκρίζο πλαίσιο είναι το κοντέινερ div.
Αυτή η εικόνα εμφανίζει το ίδιο κείμενο και το κοντέινερ που χρησιμοποιεί το "μεγαλύτερο" μέγεθος γραμματοσειράς στο Internet Explorer. Το γκρίζο κοντέινερ έχει μεγαλώσει ώστε να εξυπηρετεί μεγαλύτερο κείμενο.
Παράδειγμα κώδικα:
<style type="text/css">
div { background-color:#ccc; line-height:120%; position:relative; }
div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
</style>
<div class="RelativeRelative">
Now is the time for all good men to come to the aid of their country.
</div>
Αύξηση του μεγέθους κειμένου σε 200%.
Ελέγξτε εάν όλο το περιεχόμενο και οι λειτουργίες είναι διαθέσιμες.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δίνει σε άτομα με αναπηρίες αρκετό χρόνο για την ολοκλήρωση εργασιών που ενδέχεται να απαιτούν περισσότερο χρόνο από κάποιον με αυτές τις αναπηρίες. Ορισμένοι μηχανισμοί, όπως μια ρύθμιση προτίμησης ή ένα στοιχείο ελέγχου στη σελίδα, επιτρέπουν στον χρήστη να αλλάζει τα χρονικά όρια σε τουλάχιστον 10 φορές της προεπιλεγμένης τιμής χρονικού ορίου. Κατά προτίμηση, ο μηχανισμός θα έχει μια μεταβλητή ρύθμιση που επιτρέπει στον χρήστη να αλλάζει το χρονικό όριο σε οποιαδήποτε τιμή στο εύρος του, αλλά που παρέχει επίσης τρόπους αλλαγής του χρονικού ορίου με διακριτές αυξήσεις. Ο χρήστης αλλάζει το χρονικό όριο στην αρχή της περιόδου λειτουργίας του, πριν από οποιαδήποτε δραστηριότητα με χρονικό όριο.
Μια αεροπορική εταιρεία διαθέτει μια εφαρμογή ηλεκτρονικής προμήθειας εισιτηρίων. Εξ ορισμού, η εφαρμογή έχει 1 λεπτό χρονικό όριο για κάθε βήμα της διαδικασίας προμήθειας. Στην αρχή της περιόδου, μια Ιστοσελίδα περιλαμβάνει πληροφορίες με την ένδειξη, "Αναμένουμε ότι κάθε βήμα στη διαδικασία προμήθειας θα απαιτήσει από τους χρήστες ένα λεπτό για ολοκλήρωση. Θα θέλατε να ρυθμίσετε το χρονικό όριο;", που ακολουθείται από διάφορα ραδιόπληκτρα, "1 λεπτό, 2 λεπτά, 5 λεπτά, 10 λεπτά."
Μια εφαρμογή email Ιστού, αποσυνδέει αυτόματα τους χρήστες όταν δεν υπάρχει δραστηριότητα για 30 λεπτά. Η εφαρμογή περιλαμβάνει μια προτίμηση που επιτρέπει στους χρήστες να ρυθμίζουν τον χρόνο σε οποιαδήποτε τιμή.
Ελέγξτε να δείτε εάν υπάρχει ένας μηχανισμός ρύθμισης του χρονικού ορίου σε 10 φορές του προεπιλεγμένου χρονικού ορίου.
Αλλάξτε το χρονικό όριο σε μια νέα τιμή που είναι 10 φορές το προεπιλεγμένο χρονικό όριο.
Εκτελέστε μια ενέργεια που έχει ένα χρονικό όριο.
Περιμένετε μέχρι το προεπιλεγμένο χρονικό όριο να λήξει.
Ελέγξτε ότι το χρονικό όριο δεν λήγει έως τη λήξη του χρονικού ορίου που προσδιορίζεται στο βήμα 2.
Οι έλεγχοι #1 και #5 είναι αληθείς.
Σελίδες που απαιτούν πιστοποίηση χρήστη όπου ο διαθέσιμος χρόνος υποβολής δεδομένων είναι περιορισμένος.
Αυτή η τεχνική σχετίζεται με:
Οι διακομιστές Ιστού [που απαιτούν πιστοποίηση χρήστη συχνά τερματίζουν την περίοδο λειτουργίας μετά από μια χρονική περίοδο εάν δεν υπάρχει δραστηριότητα από τον χρήστη. Εάν ο χρήστης δεν είναι σε θέση να εισάγει δεδομένα αρκετά γρήγορα και ο χρόνος της περιόδου λειτουργίας λήγει πριν υποβληθούν, ο διακομιστής απαιτεί επαναπιστοποίηση προτού συνεχίσει. Όταν αυτό συμβεί, ο διακομιστής μεταβιβάζει (ως δεδομένα σε απόκρυψη) τις πληροφορίες από τη φόρμα στη σελίδα που χρησιμοποιείται για επαναπιστοποίηση. Έπειτα, όταν ο χρήστης επαναπιστοποιηθεί, ο διακομιστής μπορεί να χρησιμοποιήσει τις πληροφορίες που διαβιβάζονται από τη σελίδα επαναπιστοποίησης για την υποβολή της φόρμας απευθείας ή να παρουσιάσει μια σελίδα που περιλαμβάνει τα δεδομένα που θα υποβληθούν για αναθεώρηση. Με αυτήν την τεχνική, ο διακομιστής δεν χρειάζεται να αποθηκεύσει οποιαδήποτε δεδομένα που υποβάλλει ο χρήστης στον διακομιστή. Αυτή είναι μια σημαντική τεχνική για τις περιπτώσεις όπου είτε είναι παράνομη ή κίνδυνος ασφαλείας για τον διακομιστή, η προσωρινή αποθήκευση πληροφοριών. Είναι επίσης χρήσιμη καθώς αποδεσμεύει τον διακομιστή από την ανάγκη διατήρησης των αποθηκευμένων πληροφοριών και επανασύνδεσης με τη νέα πιστοποιημένη περίοδο λειτουργίας.
Σημείωση: Εάν τα δεδομένα που υποβάλλουν οι χρήστες είναι ευαίσθητα ή παρουσιάζουν έναν κίνδυνο ασφαλείας, οι συγγραφείς θα πρέπει να εξετάσουν τη διαδικασία που χρησιμοποιείται για τη διαβίβαση των δεδομένων στη σελίδα επαναπιστοποίησης και, ύστερα από την επαναπιστοποίηση, στη σελίδα που θα επεξεργαστεί τα αρχικά δεδομένα προκειμένου να διασφαλιστεί ότι τα δεδομένα προστατεύονται.
'Ένας χρήστης έχει συνδεθεί για χρήση μιας εφαρμογής wiki και αρχίζει την επεξεργασία μιας σελίδας. Ο χρόνος που απαιτείται για να ολοκληρώσει τις ενέργειες επεξεργασίας, υπερβαίνει τον χρόνο που επιτρέπει ο διακομιστής για περίοδο αδράνειας. Όταν ο χρήστης υποβάλλει τις ενέργειες επεξεργασίας, ειδοποιείται ότι η περίοδος λειτουργίας έχει λήξει και ανακατευθύνεται σε μια σελίδα σύνδεσης. Το αρχείο εντολών που χειρίζεται την αρχική υποβολή φόρμας, διαβιβάζει τις ενέργειες επεξεργασίας ως μια μεταβλητή στη σελίδα σύνδεσης και όταν ο χρήστης συνδεθεί επιτυχώς, διαβιβάζει τις ενέργειες επεξεργασίας του χρήστη πίσω στο αρχείο εντολών που χειρίζεται τις υποβολές φόρμας και οι ενέργειες επεξεργασίας διεκπεραιώνονται σαν να μην είχε προκύψει καμία λήξη χρόνου σύνδεσης.
Ένας χρήστης έχει συνδεθεί σε ένα ασφαλές ιστότοπο αγορών και συμπληρώνει ορισμένες πληροφορίες σε μια φόρμα παραγγελίας. Για λόγους ασφαλείας, η περίοδος λήγει ύστερα από 30 λεπτά, αλλά ο χρήστης δεν υποβάλλει τη φόρμα έως 45 λεπτά ύστερα από τη φόρτωση της σελίδας. Ο χρήστης πληροφορείται για τη λήξη του χρόνου σύνδεσης και ζητείται να συνδεθεί εκ νέου. Εάν ο χρήστης συνδεθεί σωστά, η φόρμα παραγγελίας παρουσιάζεται στον χρήστη με όλα τα δεδομένα που καταχωρήθηκαν προηγουμένως και ο χρήστης μπορεί να αναθεωρήσει την υποβολή του και να υποβάλει τη φόρμα. Εάν η σύνδεση δεν ολοκληρώθηκε επιτυχώς, τότε τα δεδομένα φόρμας απορρίπτονται από τον διακομιστή.
Σε έναν ιστότοπο που απαιτεί σύνδεση χρήστη για την υποβολή δεδομένων:
Συνδεθείτε και ξεκινήστε τη χρονομετρημένη δραστηριότητα.
Αφήστε την περίοδο λειτουργίας να λήξει.
Υποβάλλετε τα δεδομένα.
Εκτελέστε επαναπιστοποίηση.
Ελέγξτε ότι η διαδικασία μπορεί να συνεχίσει και να ολοκληρωθεί χωρίς απώλεια δεδομένων, συμπεριλαμβανομένων των αρχικών δεδομένων και τυχόν αλλαγών που έγιναν μετά την επαναπιστοποίηση.
Ελέγξτε ότι η διαδικασία που χρησιμοποιείται για την αποθήκευση των πληροφοριών που υποβάλλονται στο βήμα 3, δεν αποθηκεύεται στον διακομιστή. (Σημείωση: Αυτό απαιτεί γνώση επί της τεχνολογίας και των χαρακτηριστικών που χρησιμοποιούνται για την υλοποίηση της τεχνικής.)
Οι έλεγχοι #5 και #6 είναι αληθείς.
Έγχρωμο κείμενο όταν το χρώμα χρησιμοποιείται για τη μεταφορά πληροφοριών όπως:
Λέξεις που είναι σύνδεσμοι σε μια παράγραφο
Στοιχεία σε μια λίστα όπου ορισμένα είναι διαφορετικά από άλλα και παρουσιάζονται σε έγχρωμο κείμενο
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός πλεονάζοντος οπτικού στοιχείου για χρήστες που ενδέχεται να μην είναι σε θέση να διακρίνουν τη διαφορά σε χρώματα κειμένου. Το χρώμα χρησιμοποιείται συνήθως για να υποδείξει τη διαφορετική κατάσταση λέξεων που αποτελούν μέρος μιας παραγράφου ή άλλων μπλοκ κειμένου ή όπου ειδικοί χαρακτήρες ή γραφικά δεν μπορούν να χρησιμοποιηθούν για να υποδείξουν ποιες λέξεις έχουν ειδική κατάσταση. Για παράδειγμα, διασκορπισμένες λέξεις στο κείμενο ενδέχεται να είναι σύνδεσμοι υπερκειμένου που επισημαίνονται ως τέτοιοι μέσω τύπωσης σε διαφορετικό χρώμα. Αυτή η τεχνική περιγράφει έναν τρόπο παροχής στοιχείων επιπλέον του χρώματος, ώστε οι χρήστες που ενδεχομένως έχουν δυσκολία αντίληψης των χρωματικών διαφορών ή χαμηλή όραση, να μπορούν να τα προσδιορίσουν.
Για χρήση αυτής της τεχνικής, ο συγγραφέας ενσωματώνει ένα οπτικό στοιχείο επιπλέον του χρώματος για κάθε θέση όπου χρησιμοποιείται μόνο το χρώμα για τη μεταφορά πληροφοριών. Τα οπτικά στοιχεία μπορούν να λάβουν πολλές μορφές, συμπεριλαμβανομένων αλλαγών στο στυλ γραμματοσειράς, προσθήκη υπογράμμισης, έντονη γραφή ή πλάγια γραφή ή αλλαγές στο μέγεθος γραμματοσειράς.
Ένα άρθρο που συγκρίνει τη χρήση όμοιων στοιχείων σε διαφορετικές γλώσσες επισημείωσης χρησιμοποιεί έγχρωμο κείμενο για τον προσδιορισμό των στοιχείων για κάθε γλώσσα. Τα στοιχεία από την πρώτη γλώσσα επισημείωσης προσδιορίζονται χρησιμοποιώντας ΜΠΛΕ κείμενο, έντονης γραφής. Στοιχεία από το δεύτερο παρουσιάζονται ως ΚΟΚΚΙΝΟ κείμενο πλάγιας γραφής.
Ένας ειδησεογραφικός τόπος καταχωρεί τίτλους άρθρων που εμφανίζονται στον τόπο αυτόν. Πρόσθετες πληροφορίες όπως η ενότητα που εμφανίζεται το άρθρο, ο χρόνος δημοσίευσης του άρθρου, μια σχετική θέση ή ένδειξη ότι συνοδεύεται από ζωντανό βίντεο, εμφανίζεται σε ορισμένες περιπτώσεις. Οι πρόσθετες πληροφορίες παρουσιάζονται σε διαφορετικό χρώμα από τον σύνδεσμο για το άρθρο, αλλά κάθε σύνδεσμος παρουσιάζεται σε μεγαλύτερη γραμματοσειρά σε σχέση με το υπόλοιπο κείμενο, έτσι ώστε οι χρήστες να μπορούν να προσδιορίσουν τους συνδέσμους πιο εύκολα.
Ορισμένες φορές, σύντομα στοιχεία ειδήσεων έχουν προτάσεις που είναι επίσης σύνδεσμοι σε περισσότερες πληροφορίες. Αυτές οι προτάσεις τυπώνονται σε χρώμα και χρησιμοποιούν τύπο γραμματοσειράς "sans-serif", ενώ η υπόλοιπη παράγραφος είναι σε μαύρη γραμματοσειρά τύπου "times-roman".
Εντοπίστε όλες τις περιπτώσεις όπου το χρώμα του κειμένου χρησιμοποιείται για τη μεταφορά πληροφοριών.
Ελέγξτε ότι κάθε κείμενο όπου χρησιμοποιείται χρώμα για τη μεταφορά πληροφοριών, έχει επίσης στυλ ή κάνει χρήση μιας γραμματοσειράς που το καθιστά οπτικά διακριτό από άλλο περιβάλλον κείμενο.
Ελέγξτε ότι το #2 είναι αληθές.
Έγχρωμο κείμενο όταν μόνο το χρώμα χρησιμοποιείται για τη μεταφορά πληροφοριών, όπως λέξεις που είναι σύνδεσμοι σε μια παράγραφο
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός πλεονάζοντος οπτικού στοιχείου για χρήστες που ενδέχεται να μην είναι σε θέση να διακρίνουν τη διαφορά σε χρώματα κειμένου. Το χρώμα συνήθως χρησιμοποιείται για να υποδείξει λέξεις που είναι σύνδεσμοι σε μια παράγραφο ή άλλα μπλοκ κειμένου. Για παράδειγμα, διασκορπισμένες λέξεις στο κείμενο ενδέχεται να είναι σύνδεσμοι υπερκειμένου που προσδιορίζονται μόνο από μια διαφορά χρώματος με το περιβάλλον κείμενο. Αυτή η τεχνική περιγράφει έναν τρόπο παροχής πρόσθετων στοιχείων όταν ο χρήστης αφήνει το ποντίκι πάνω από ένα στοιχείο και εστιάζει, ώστε οι χρήστες που ενδεχομένως έχουν δυσκολία αντίληψης των χρωματικών διαφορών ή χαμηλή όραση, να μπορούν να τα προσδιορίσουν.
Με αυτήν την τεχνική, μια διαφορά σχετικής φωτεινότητας (relative luminance) (φωτεινότητα) 3:1 ή μεγαλύτερη με το περιβάλλον κείμενο, μπορεί να χρησιμοποιηθεί εάν πρόσθετη οπτική επιβεβαίωση είναι διαθέσιμη όταν ένας χρήστης δείχνει στον σύνδεσμο ή πλοηγείται σε αυτόν μέσω του πλήκτρου tab. Οπτικές σημάνσεις μπορούν, για παράδειγμα, να πάρουν τη μορφή υπογράμμισης, αλλαγής στο στυλ γραμματοσειράς όπως έντονη ή πλάγια γραφή ή αύξησης του μεγέθους γραμματοσειράς.
Αν και η χρήση αυτής της τεχνικής είναι επαρκής για την ικανοποίηση του Κριτηρίου Επιτυχίας, δεν προτιμάται για τη διαφοροποίηση του κειμένου συνδέσμου. Αυτό συμβαίνει διότι οι σύνδεσμοι που κάνουν χρήση μόνο της σχετικής φωτεινότητας του χρώματος, δεν είναι προφανείς για άτομα με αχρωματοψία στο μαύρο/λευκό. Εάν δεν υπάρχει ένας μεγάλος αριθμός συνδέσμων στο μπλοκ κειμένου, συνιστάται η χρήση υπογραμμίσεων για τους συνδέσμους.
Σημείωση 1:Αυτή η τεχνική αφορά τη χρήση χρώματος, επιπλέον της φωτεινότητας. Σε αυτήν την τεχνική, ο αναλογία αντίθεσης αναφέρεται στην αντίθεση μεταξύ ενός συνδέσμου και των λέξεων που τον περιβάλλουν. Στο κριτήριο επιτυχίας 1.4.3 και 1.4.6, η αναλογία αντίθεσης αναφέρεται στην αντίθεση μεταξύ μιας λέξης και του παρασκηνίου αυτής. Η διαφορά είναι ότι η τεχνική αυτή αφορά την ικανότητα των χρηστών να διακρίνουν τη διαφορά (μια αξιοσημείωτη διαφορά) μεταξύ διαφορετικών κομματιών κειμένου, ενώ ο αναλογία αντίθεσης που χρησιμοποιείται στο κριτήριο επιτυχίας 1.4.3 και 1.4.6 αφορά στην αναγνωσιμότητα του κειμένου με το υπόβαθρό του για διαφορετικές αναπηρίες που αφορούν στο χρώμα και την όραση.
Σημείωση 2:Εάν ένας συγγραφέας επιθυμεί να χρησιμοποιήσει το έγχρωμο τμήμα αυτής της τεχνικής (δηλαδή να χρησιμοποιήσει χρώματα για λέξεις όπου τα χρώματα έχουν επαρκή αντίθεση μεταξύ τους) και ο συγγραφέας επιθυμεί επίσης την επιβεβαίωση του Κριτηρίου Επιτυχίας 1.4.3 (αντίθεση αμφότερων των λέξεων με το υπόβαθρό τους), μπορούν να χρησιμοποιηθούν τα παρακάτω χρώματα. (π.χ., μαύρο κείμενο σε μια παράγραφο σε λευκό παρασκήνιο με τους συνδέσμους να εμφανίζονται ως ένα από τα χρώματα της παρακάτω λίστας.)
Σημείωση 3:Εάν υποστηρικτική τεχνολογία ή προγράμματα περιήγησης Ιστού παρέχουν μια επιλογή σε κάποιο σημείο για την υπογράμμιση όλων των συνδέσμων στις Ιστοσελίδες για τους χρήστες, αυτό θα μπορεί να χρησιμοποιηθεί αντί για έναν μηχανισμό επισήμανσης συνδέσμων που παρέχει ο συγγραφέας.
Ανατρέξτε στην ενότητα Σύνδεσμοι με αναλογία αντίθεσης 3:1 με το περιβάλλον κείμενο (Links with a 3:1 contrast ratio with surrounding text)
Οι σύνδεσμοι υπερκειμένου σε ένα έγγραφο, είναι μπλε μέσης φωτεινότητας (#3366CC) και το κανονικό κείμενο είναι μαύρο (#000000). Καθώς το μπλε κείμενο είναι αρκετά φωτεινό, έχει μια αντίθεση 3:9:1 με το περιβάλλον κείμενο και μπορεί να προσδιοριστεί ως διαφορετικό του περιβάλλοντος κειμένου από άτομα όλων των τύπων αχρωματοψίας, συμπεριλαμβανομένων των ατόμων που δεν μπορούν να διακρίνουν καθόλου χρώματα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εντοπίστε όλες τις περιπτώσεις όπου χρησιμοποιείται μόνο χρώμα για τη μεταφορά πληροφοριών σχετικά με το κείμενο.
Ελέγξτε ότι η σχετική φωτεινότητα (relative luminance) του χρώματος του κειμένου, διαφέρει από τη σχετική φωτεινότητα του περιβάλλοντος κειμένου κατά αναλογία αντίθεσης τουλάχιστον 3:1.
Ελέγξτε ότι η κατάδειξη (τοποθέτηση του ποντικιού πάνω από) του συνδέσμου προκαλεί μια οπτική βελτίωση (όπως μια υπογράμμιση, αλλαγή γραμματοσειράς κ.λπ..)
Ελέγξτε ότι η μεταφορά της επισήμανσης στον σύνδεσμο προκαλεί μια οπτική βελτίωση (όπως μια υπογράμμιση, αλλαγή γραμματοσειράς κ.λπ..)
Οι έλεγχοι #2, #3 και #4 είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να βοηθήσει τον χρήστη να αποφύγει σφάλματα δεδομένων εισόδου μέσω της ενημέρωσής του, εκ των προτέρων, για τους περιορισμούς σχετικά με τη μορφή των δεδομένων που πρέπει να καταχωρήσει. Οδηγίες σχετικά με αυτούς τους περιορισμούς παρέχονται στην κορυφή των φορμών. Αυτή η τεχνική λειτουργεί καλύτερα για φόρμες που έχουν έναν μικρό αριθμό πεδίων ή εκείνες όπου πολλά πεδία φόρμας απαιτούν δεδομένα στην ίδια μορφή. Στις περιπτώσεις αυτές, είναι περισσότερο επαρκής η περιγραφή της μορφής μία φορά στις οδηγίες στην κορυφή της φόρμας, αντί για επανάληψη των ίδιων πληροφοριών για κάθε πεδίο που έχει την ίδια απαίτηση περιορισμένης μορφής.
Ένας τόπος επιχειρηματικής δικτύωσης επιτρέπει στους χρήστες να δημοσιεύουν περιγραφές παλαιότερες θέσεις εργασίας τους. Η φόρμα συγκέντρωσης των πληροφοριών περιλαμβάνει πεδία για το όνομα της επιχείρησης, τον τίτλο εργασίας, ημερομηνίες έναρξης και λήξης απασχόλησης και περιγραφή της εργασίας. Στην κορυφή της φόρμας βρίσκονται οι ακόλουθες οδηγίες:
Εισάγετε απαιτούμενες πληροφορίες σχετικά με τη θέση που επιθυμείτε να προσθέσετε στο προφίλ σας. Οι ημερομηνίες θα πρέπει να εισάγονται στη μορφή ηη/μμ/εεεε."
Ένας εταιρικός κατάλογος επιτρέπει στους χρήστες να προσαρμόσουν πληροφορίες όπως αριθμούς τηλεφώνου και αρμοδιότητες εργασίας μέσω επεξεργασίας του προφίλ τους. Στην κορυφή της φόρμας βρίσκονται οι ακόλουθες οδηγίες:
Μπορείτε να τροποποιήσετε τις πληροφορίες σε κάθε πεδίο. Όταν επιλέξετε "Τέλος", οι αλλαγές σας θα αποθηκευτούν και θα έχετε τη δυνατότητα δημοσίευσης του προφίλ σας. Εάν αποφασίσετε ότι δεν επιθυμείτε να διατηρήσετε τις αλλαγές σας, επιλέξτε το κουμπί "Άκυρο."
Δεν μπορείτε να επεξεργαστείτε τις πληροφορίες που εμφανίζονται ως κείμενο συστήματος στο προφίλ σας (π.χ. δεν περιέχονται σε ένα πεδίο). Αυτές οι πληροφορίες λαμβάνονται από εταιρικές πληροφορίες του τμήματος ανθρωπίνων πόρων. Εάν εντοπίσετε κάτι που είναι λάθος ή δεν είναι ενημερωμένο και δεν μπορείτε να το επεξεργαστείτε, επιλέξτε το εικονίδιο βοήθειας δίπλα στις πληροφορίες για να μάθετε πώς θα τις διορθώσετε.
Οι αριθμοί τηλεφώνου ενδέχεται να περιέχουν μόνο αριθμούς και παύλες (-).
Τα απαραίτητα πεδία επισημαίνονται με έναν αστερίσκο (*) και πρέπει να συμπληρωθούν για την ολοκλήρωση της φόρμας.
Προσδιορίστε στοιχεία ελέγχου φόρμας που θα δεχτούν δεδομένα εισόδου χρήστη μόνο σε συγκεκριμένη μορφή..
Καθορίστε εάν παρέχονται οδηγίες στην κορυφή κάθε φόρμας σχετικά με την αναμενόμενη μορφή για κάθε ένα από τα στοιχεία ελέγχου φόρμας που προσδιορίζονται στο 1.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει εφικτό για χρήστες τον εντοπισμό όλων των πληροφοριών σε έναν μικρό ιστότοπο, παρέχοντας συνδέσμους προς όλες τις Ιστοσελίδες από την αρχική σελίδα. Όταν ο αριθμός των σελίδων στον τόπο είναι αρκετά μικρός, η αρχική σελίδα μπορεί να περιέχει απευθείας πληροφορίες του χάρτη ιστότοπου. Οι άλλες σελίδες στον ιστότοπο περιέχουν συνδέσμους προς την αρχική σελίδα.
Με αυτόν τον τρόπο, η αρχική σελίδα λειτουργεί ως δύο μηχανισμοί σε έναν. Παρέχει τη συνηθισμένη πλοήγηση στις σελίδες. Είναι επίσης ο προφανής χάρτης ιστότοπου για τον τόπο.
Όλες οι Ιστοσελίδες στον τόπο ενδέχεται να περιέχουν συνδέσμους προς όλες τις άλλες σελίδες και εκείνα τα σύνολα συνδέσμων ικανοποιούν το Κριτήριο επιτυχίας 3.2.3 (Συνεπής πλοήγηση) (Success Criterion 3.2.3 (Consistent Navigation)).
'Ένας μικρός εμπορικός ιστότοπος για έναν σύμβουλο περιέχει μια αρχική σελίδα, μια σελίδα επικοινωνίας για την επικοινωνία με τον σύμβουλο, μια σελίδα που περιγράφει το παρασκήνιο του συμβούλου και μια σελίδα με παραδείγματα της εργασίας του συμβούλου. Κάθε σελίδα περιέχει μια γραμμή πλοήγηση που συνδέεται προς όλες τις άλλες σελίδες στον τόπο.
Ελέγξτε ότι η αρχική σελίδα περιέχει συνδέσμους προς όλες τις άλλες σελίδες στον ιστότοπο.
Ελέγξτε ότι όλες οι άλλες σελίδες στον ιστότοπο περιέχουν συνδέσμους προς την αρχική σελίδα.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός στοιχείου ελέγχου στον χρήστη που που επιτρέπει να διακόπτει τη μεταφορά ή το αναβοσβήσιμο περιεχομένου. Καθώς το στοιχείο ελέγχου βρίσκεται στην Ιστοσελίδα, το ίδιο το στοιχείο ελέγχου ικανοποιεί το κατάλληλο επίπεδο της συμμόρφωσης WCAG, π.χ. έχει επαρκή αντίθεση, έχει ένα όνομα που το προσδιορίζει, είναι προσβάσιμο μέσω πληκτρολογίου. Το στοιχείο ελέγχου είτε βρίσκεται στην κορυφή της σελίδας ή είναι παρακείμενο του περιεχομένου που μεταφέρεται. Ένα μεμονωμένο στοιχείο ελέγχου ενδέχεται να σταματήσει όλο το περιεχόμενο που μεταφέρεται ή αναβοσβήνει στη σελίδα ή μπορεί να υπάρχουν ξεχωριστά στοιχεία ελέγχου για ξεχωριστά μέρη του περιεχομένου.
Μια Ιστοσελίδα εμφανίζει τα πιο πρόσφατα αποτελέσματα του χρηματιστηρίου σε μια "ταινία τηλεγράφου" που πραγματοποιεί αυτόματη κύλιση στο κάτω μέρος της οθόνης. Ένα κουμπί "Παύση" επιτρέπει στον χρήστη να διακόψει την ταινία τηλεγράφου. Όταν η ταινία τηλεγράφου επιστρέφει από την παύση, συνεχίζει την εμφάνιση των τρεχουσών πληροφοριών του χρηματιστηρίου.
Μια Ιστοσελίδα τηλεδιάσκεψης εμφανίζει μια ουρά ομιλητών, για άτομα που επιθυμούν να μιλήσουν. Ένα τετράγωνο επιλογής στη σελίδα επιτρέπει στον χρήστη να επιλέξει εάν η προβολή της ουράς θα ενημερώνεται αυτόματα όταν ένα νέο άτομο προστίθεται ή αφαιρείται ή εάν θα ενημερώνεται μόνο όταν ο χρήστης πατά το κουμπί "Ανανέωση". Όταν η ουρά ενημερώνεται αυτόματα, το κουμπί Ανανέωσης απενεργοποιείται.
Ελέγξτε ότι υπάρχει ένα στοιχείο ελέγχου στην Ιστοσελίδα για τη διακοπή της κίνησης.
Ενεργοποιήστε το στοιχείο ελέγχου.
Ελέγξτε ότι η κίνηση, το αναβοσβήσιμο ή η αυτόματη ενημέρωση, έχουν διακοπεί.
Οι έλεγχοι #1 και #3 είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλιστεί ότι το περιεχόμενο που αναβοσβήνει μπορεί να απενεργοποιηθεί χρησιμοποιώντας χαρακτηριστικά πράκτορα χρήστη. Οι πράκτορες χρήστη επιτρέπουν στους χρήστες να διακόπτουν την κίνηση περιεχομένου σε ορισμένες τεχνολογίες. Όταν ο χρήστης ενεργοποιεί αυτό το χαρακτηριστικό, διακόπτεται κάθε κίνηση, συμπεριλαμβανομένου του αναβοσβησίματος.
Ο πιο συνήθης τρόπος διακοπής κίνησης για τους χρήστες είναι το πάτημα του πλήκτρου "escape". Καθώς δεν υπάρχουν διαδικασίες που προηγούνται στην ουρά συμβάντων για το πάτημα αυτού του πλήκτρου, αυτό λαμβάνεται ως μια εντολή διακοπής της κίνησης μεταφερόμενου περιεχομένου ή περιεχομένου που αναβοσβήνει.
Τεχνολογίες για τις οποίες αυτό γενικά ισχύει συμπεριλαμβάνουν:
Graphics Interchange Format (GIF)
Animated Portable Network Graphics (APNG)
Μια σελίδα που περιέχει ένα banner που αναβοσβήνει, το οποίο προορίζεται για να τραβήξει την προσοχή του χρήστη. Το banner είναι μια κινούμενη εικόνα gif που επαναλαμβάνεται αόριστα. Ο χρήστης πατά το πλήκτρο "escape" που προκαλεί διακοπή της κίνησης όλων των κινούμενων εικόνων gif στη σελίδα από τον πράκτορα χρήστη.
Φορτώστε μια σελίδα που περιλαμβάνει περιεχόμενο που αναβοσβήνει.
Ενεργοποιήστε την εντολή διακοπής κίνησης του προγράμματος περιήγησης (συνήθως το πλήκτρο "escape".)
Ελέγξτε να δείτε εάν διακόπηκε το αναβοσβήσιμο.
Ελέγξτε ότι το #3 είναι αληθές.
Κάθε τεχνολογία.
Αυτή η τεχνική σχετίζεται με:
Πολλά άτομα με νοητικές αναπηρίες έχουν πρόβλημα ανάγνωσης κειμένου με μονό διάστημα. Ένα κουμπί που αυξάνει το ύψος της γραμμής θα βοηθήσει στην ανάγνωση του περιεχομένου. Προκειμένου να διατηρηθεί ο διαχωρισμός των παραγράφων, το διάστημα μεταξύ παραγράφων θα πρέπει επίσης να αυξηθεί ώστε να είναι τουλάχιστον 1,5 φορές το διάστημα γραμμής.
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήσης μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) (CSS) και Κατανόηση Συμμορφούμενων Εναλλακτικών Εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Χρήση τυπικής εναλλαγής στυλ σελίδας και κουμπιού ή συνδέσμου στη σελίδα που εναλλάσσει το φύλλο στυλ. Το νέο φύλλο στυλ περιέχει έναν κανόνα αύξησης του ύψους γραμμής και μια κλάση αύξησης του διαστήματος παραγράφου.
Παράδειγμα κώδικα:
p {line-height: 150%; margin-bottom: 2em;}
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι υπάρχει ένα κουμπί ή σύνδεσμος στη σελίδα που αυξάνει το μέγεθος του ύψους της γραμμής και του διαστήματος παραγράφου, το οποίο έχει αντίστοιχη ονομασία.
Ενεργοποιήστε το κουμπί ή σύνδεσμο.
Ελέγξτε ότι το χαρακτηριστικό αυξάνει το ύψος γραμμής και το διάστημα παραγράφου.
Ελέγξτε ότι η αύξηση διαστήματος παραγράφου είναι τουλάχιστον κατά 1,5 φορές μεγαλύτερη από το διάστημα γραμμής.
Οι έλεγχοι #1, #3 και #4 είναι αληθείς.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή στον χρήστη με ένα στοιχείο ελέγχου κοντά στην αρχή της σελίδας που οδηγεί τον χρήστη σε μια συμμορφούμενη εναλλακτική έκδοση της Ιστοσελίδας, όπου μόνο το κείμενο συνδέσμου κάθε συνδέσμου είναι αρκετό για τον προσδιορισμό του σκοπού του εκτός πλαισίου.
Ορισμένοι χρήστες προτιμούν συνδέσμους που είναι αυτόνομοι, όπου δεν υπάρχει ανάγκη εξερεύνησης του περιβάλλοντος του συνδέσμου. Άλλοι χρήστες κρίνουν ότι η συμπερίληψη πληροφοριών περιβάλλοντος σε κάθε σύνδεσμο είναι επαναλαμβανόμενη και μειώνει την ικανότητα τους χρήσης ενός τόπου. Μεταξύ χρηστών υποστηρικτικής τεχνολογίας, τα σχόλια για την ομάδα εργασίας που προτιμάται είναι διίστανται. Αυτή η τεχνική επιτρέπει στους χρήστες να επιλέγουν την προσέγγιση που τους εξυπηρετεί καλύτερα. Χρήστες που χρειάζονται ή προτιμούν πιθανώς μεγαλύτερο, αλλά πλήρες κείμενο συνδέσμου, χρησιμοποιούν αυτήν την έκδοση.
Εάν το στοιχείο ελέγχου της εναλλαγής με την εναλλακτική έκδοση είναι ένας σύνδεσμος, πρέπει να είναι πάντα δυνατή η κατανόηση του σκοπού του στοιχείου ελέγχου απευθείας από το κείμενο συνδέσμου του.
Αυτή η τεχνική παρέχει την εναλλακτική έκδοση της τρέχουσας προβολής σελίδας. Είναι επίσης δυνατή και σε ορισμένες περιπτώσεις συνίσταται, η αποθήκευση αυτής της προτίμησης σε ένα cookie ή προφίλ χρήστη στην πλευρά του διακομιστή, έτσι ώστε οι χρήστες να χρειάζεται μόνο να κάνουν την επιλογή μία φορά σε κάθε τόπο και να μεταφέρονται αυτόματα στην προτιμώμενη έκδοση.
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήση μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version (CSS) και Κατανόηση Συμμορφούμενων Εναλλακτικών Εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Μια Ιστοσελίδα παρουσιάζει βιβλία σε λίστα για λήψη σε διαφορετικές μορφές. Εναλλακτικές εκδόσεις της Ιστοσελίδας κάνουν χρήση απλώς της μορφής βιβλίου ως το κείμενο συνδέσμου ή τον τίτλο βιβλίου και τον τύπο μορφής.
Έκδοση με σύντομο κείμενο συνδέσμου:
Παράδειγμα κώδικα:
...
<h1>Books for download</h1>
<p><a href="books-full-links.html" >Full link Version</a></p>
<ul>
<li>The History of the Web:
<a href="history.docx" class="hist">Word</a>,
<a href="history.pdf" class="hist">PDF</a>,
<a href="history.html" class="hist">HTML</a>
</li>
...
</ul>
Έκδοση με πλήρες κείμενο συνδέσμου:
Παράδειγμα κώδικα:
...
<h1>Books for download</h1>
<p><a href="books-short-links.html" >Short link Version</a></p>
<ul>
<li>The History of the Web:
<a href="history.docx" class="hist">The History of the Web(Word)</a>,
<a href="history.pdf" class="hist">The History of the Web(PDF<)/a>,
<a href="history.html" class="hist">The History of the Web(HTML)</a>
</li>
...
</ul>
Ελέγξτε ότι υπάρχει ένα στοιχείο ελέγχου κοντά στην αρχή της Ιστοσελίδας που αλλάζει το κείμενο συνδέσμου
Ενεργοποιήστε το στοιχείο ελέγχου.
Ελέγξτε ότι όλοι οι σύνδεσμοι στην Ιστοσελίδα που προκύπτει έχουν κείμενο συνδέσμου που περιγράφει τον σκοπό τους.
Οι έλεγχοι #1 και #3 είναι αληθείς.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Είναι καλύτερο για όλα τα αντικείμενα σε μια σελίδα να συμμορφώνονται, αλλά υπάρχουν ορισμένες περιπτώσεις όπου αυτό μπορεί να μην είναι εφικτό. Ενδέχεται να υπάρχουν περιπτώσεις όπου ένα αντικείμενο ή ενότητα περιεχομένου στοχεύει σε άτομα με ορισμένες αναπηρίες, ενώ αυτές οι ίδιοι παράμετροι το καθιστούν μη προσβάσιμο για κάποιον άλλο. Ενδέχεται επίσης να υπάρχουν άλλοι λόγοι για την απουσία ενός συμμορφούμενου αντικειμένου στην Ιστοσελίδα. Όταν ένα αντικείμενο δεν συμμορφώνεται, τότε ένας σύνδεσμος προς μια συμμορφούμενη εναλλακτική έκδοση βρίσκεται παρακείμενος στο μη συμμορφούμενο αντικείμενο, στη γραμμική σειρά ανάγνωσης ή συσχετίζεται με το μη συμμορφούμενο περιεχόμενο. Η συμμορφούμενη εναλλακτική έκδοση μεταφέρει τις ίδιες πληροφορίες με τη μη συμμορφούμενη έκδοση.
Ένα βίντεο ενός τραγουδιού ραπ με τίτλο "Το παιδί του χιπ χοπ" έχει ένα μουσικό παρασκήνιο. Η εισαγωγή ομιλούντων μερών ηχητικής περιγραφής κατά τη διάρκεια των παύσεων στο τραγούδι, θα δημιουργεί παρεμβολές με τις μελωδίες της κιθάρας και τον ρυθμό των κρουστών που ο καλλιτέχνης προσπαθεί να μεταφέρει. Στην Ιστοσελίδα, αμέσως μετά το αντικείμενο βίντεο, υπάρχει ένας σύνδεσμος με την ένδειξη, "Έκδοση ηχητικής περιγραφής του τραγουδιού "Το παιδί του χιπ χοπ"", που περιέχει μια έκδοση του βίντεο που περιέχει τις ηχητικές περιγραφές όσων λαμβάνουν χώρα οπτικά στο βίντεο.
Μια Ιστοσελίδα σχετική με την "Προκήρυξη της Ανεξαρτησίας" περιέχει μια εικόνα του εγγράφου. Δεν υπάρχει επαρκής αντίθεση μεταξύ κειμένου και παρασκηνίου και το χειρόγραφο κείμενο στο έγγραφο είναι δυσανάγνωστο. Ένας σύνδεσμος μεταφέρει τον χρήστη σε μια έκδοση HTML του εγγράφου.
Μια αλληλεπιδραστική κινούμενη εικόνα που δημιουργείται χρησιμοποιώντας τεχνολογία Ιστού που δεν υποστηρίζει προσβασιμότητα, εμφανίζεται σε μια Ιστοσελίδα. Ένας σύνδεσμος σε μια συμμορφούμενη εναλλακτική έκδοση της κινούμενης εικόνας, είναι παρακείμενος του μη συμμορφούμενου περιεχομένου.
Για κάθε μη συμμορφούμενο αντικείμενο σε μια σελίδα:
Ελέγξτε να δείτε εάν υπάρχει ένα μη συμμορφούμενο αντικείμενο στην Ιστοσελίδα.
Ελέγξτε να δείτε εάν υπάρχει σύνδεσμος για μια συμμορφούμενη έκδοση με δυνατότητα προσδιορισμού, απευθείας μετά το μη συμμορφούμενο αντικείμενο στη γραμμική σειρά ανάγνωσης.
Ελέγξτε να δείτε εάν ο σύνδεσμος οδηγεί σε μια συμμορφούμενη έκδοση.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Αυτή η τεχνική σχετίζεται με όλες τις τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Αυτή είναι μια γενική τεχνική που επιτρέπει σε άτομα που δεν μπορούν να χρησιμοποιήσουν μια σελίδα με περιεχόμενο που αναβοσβήνει, να απενεργοποιήσουν το περιεχόμενο αυτό. Η Απαίτηση συμμόρφωσης 1 (Conformance Requirement 1) επιτρέπει τη συμμόρφωση εναλλακτικών σελίδων προς χρήση για ικανοποίηση της συμμόρφωσης. Αυτή η τεχνική είναι ένα παράδειγμα αυτής της προσέγγισης που εφαρμόζεται στο κριτήριο επιτυχίας 2.2.2.
Είναι σημαντικό η σελίδα χωρίς περιεχόμενο που αναβοσβήνει, να περιέχει όλες τις πληροφορίες που βρίσκονταν στη σελίδα με το περιεχόμενο που αναβοσβήνει.
Σημείωση 1:Η κατάργηση του περιεχομένου που αναβοσβήνει από τη σελίδα θα είναι ικανοποιητικό μόνο εάν το περιεχόμενο αυτό ήταν περιττό με περιεχόμενο που δεν αναβοσβήνει στην αρχική σελίδα.
Σημείωση 2:Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήση μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) (CSS) και Κατανόηση Συμμορφούμενων Εναλλακτικών Εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Μια σελίδα με κείμενο που αναβοσβήνει στην κορυφή, προειδοποιεί τους χρήστες ότι δεν θα πρέπει να υποβάλλουν τη σελίδα χωρίς πρώτα να πραγματοποιήσουν εγγραφή. Ένας σύνδεσμος στην κορυφή της σελίδας πραγματοποιεί επαναφόρτωση της σελίδας με αντικατάσταση του κειμένου αναβοσβησίματος με κείμενο που έχει στυλ κατάλληλο ώστε να είναι οπτικά ορατό, αλλά χωρίς να αναβοσβήνει.
Ελέγξτε ότι υπάρχει ένας μηχανισμός επαναφόρτωσης σελίδας για την απενεργοποίηση του αναβοσβησίματος.
Ελέγξτε ότι η σελίδα που επαναφορτώνεται δεν αναβοσβήνει.
Ελέγξτε ότι η σελίδα που επαναφορτώνει έχει όλες τις πληροφορίες και λειτουργίες της αρχικής σελίδας.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Αυτή η τεχνική σχετίζεται με όλες τις γλώσσες επισημείωσης με προδιαγραφές.
Αυτή η τεχνική σχετίζεται με:
Όταν γλώσσες επισημείωσης χρησιμοποιούνται με τρόπο που συμμορφώνεται πλήρως με τις προδιαγραφές τους, όλες οι απαιτήσεις στο κριτήριο 4.1.1 ικανοποιούνται. Επομένως, ενώ η πλήρης συμμόρφωση με τις προδιαγραφές δεν απαιτείται για τη συμμόρφωση με το WCAG 2.0, είναι μια βέλτιστη πρακτική και επαρκής για την ικανοποίηση του Κριτηρίου Επιτυχίας 4.1.1.
Μια σελίδα δημιουργείται με προσοχή ώστε να επιβεβαιώνεται πως όλες οι τεχνολογίες χρησιμοποιούνται σύμφωνα με την προδιαγραφή. Εκτελείται μέσω μιας λειτουργίας επικύρωσης και όλα τα σφάλματα που προσδιορίζονται, διορθώνονται. Οι απαιτήσεις προδιαγραφών που δεν μπορούν να προσδιοριστούν μέσω επικύρωσης ελέγχονται επίσης και οποιεσδήποτε αποτυχίες διορθώνονται.
Ελέγξτε ότι όλες οι τεχνολογίες χρησιμοποιούνται σύμφωνα με την προδιαγραφή.
Σημείωση: Ενώ οι λειτουργίες επικύρωσης μπορεί να είναι σπουδαία εργαλεία για τον εντοπισμό σφαλμάτων, συνήθως εντοπίζουν όλες τις περιπτώσεις όπου το περιεχόμενο αποτυγχάνει στη συμμόρφωση με μια προδιαγραφή.
Ελέγξτε ότι το #1 είναι αληθές.
Όλες οι τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή βοήθειας χρησιμοποιώντας ένα γραφικό εικονίδιο πολυμέσων που παρέχει βοήθεια για τη χρήση της Ιστοσελίδας. Ένα γραφικό εικονίδιο μπορεί να είναι ιδιαίτερα χρήσιμο για άτομα με νοητικές αναπηρίες που μπορεί να έχουν δυσκολίες ανάγνωσης κειμένου. Η χρήση των οπτικών μέσων θα βοηθήσει ορισμένα άτομα να εστιάσουν στο υλικό που παρουσιάζεται.
Σημείωση: Το γραφικό εικονίδιο πολυμέσων πρέπει επίσης να ικανοποιεί το σχετικό κριτήριο επιτυχίας στην Οδηγία 1.2 (Guideline 1.2).
Η αρχική σελίδα μιας ηλεκτρονικής εφαρμογής τραπεζικής, έχει ενσωματωμένο γραφικό εικονίδιο με το όνομα Βάνα. Αυτή προσφέρει σε νέους πελάτες της τραπεζικής ηλεκτρονικής εφαρμογής μια περιήγηση στα χαρακτηριστικά που παρέχει η εφαρμογή. Ο βοηθός μπορεί να ξεκινήσει, να διακοπεί και να παύσει. Ο πελάτης μπορεί να εκτέλεση ενέργειες επιστροφής και γρήγορης προώθησης στο υλικό. Ένα εναλλακτικό κειμένου των πληροφοριών είναι διαθέσιμη μέσω συνδέσμου δίπλα στο γραφικό εικονίδιο.
Μια τοποθεσία για εθελοντές διαθέτει μια σελίδα καλωσορίσματος για νέους εθελοντές. Σε αυτήν, υπάρχει μια φόρμα εφαρμογής. Στη δεξιά πλευρά της σελίδας υπάρχει ένα αλληλεπιδραστικό αρχείο πολυμέσων με ένα γραφικό εικονίδιο που επεξηγεί όλα τα χαρακτηριστικά και τις ενότητες της φόρμας εφαρμογής.
Ελέγξτε ότι υπάρχει βοηθός στην Ιστοσελίδα.
Ελέγξτε ότι ο βοηθός παρέχει πληροφορίες για τη βοήθεια κατανόησης του περιεχομένου της σελίδας.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Αυτή η τεχνική σχετίζεται με όλες τις τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Με την τεχνική αυτή, παρέχεται ο ορθογραφικός έλεγχος και οι προτάσεις για κείμενο. Συχνά, άτομα με νοητικές αναπηρίες δυσκολεύονται με την ορθογραφία μιας λέξης, αλλά ενδέχεται να είναι σε θέση να πετύχουν τη σωστή ορθογραφία μερικώς. Μια εφαρμογή ορθογραφικού ελέγχου θα τους βοηθήσει με εξοικονόμηση χρονοβόρας αναζήτησης της σωστής ορθογραφίας της λέξης. Αυτό ενδέχεται να ισχύει για χρήστες με τύφλωση ή χαμηλή όραση, που μπορεί να κάνουν ένα λάθος κατά την πληκτρολόγηση. Θα βοηθήσει επίσης άτομα με αναπηρίες δεξιότητας που μπορεί να χρησιμοποιούν μια συσκευή κατάδειξης κεφαλής ή που μπορεί να έχουν λογισμικό σάρωσης που καθιστά πολύ αργή και δύσκολη την πληκτρολόγηση. Μια λύση ορθογραφικού ελέγχου που παρέχει προτάσεις λέξεων και έναν απλό μηχανισμό επιλογής μίας και καταχώρησης στο πεδίο εισόδου κειμένου, παρέχει σημαντική βοήθεια σε αυτούς τους χρήστες και άλλους.
Μια μηχανή αναζήτησης έχει ένα πεδίο φόρμας για όρους αναζήτησης. Όταν γίνεται υποβολή της φόρμας, μια εφαρμογή από την πλευρά του διακομιστή ελέγχει την ορθογραφία. Εάν η ορθογραφία δεν συμφωνεί με οποιεσδήποτε λέξεις αυτής της γλώσσα, επιστρέφει μια σελίδα με ένα μήνυμα κειμένου στην κορυφή που λέει "Μήπως εννοείτε..." με έναν σύνδεσμο προς την προτεινόμενη λέξη. Εάν ο χρήστης κάνει κλικ στον σύνδεσμο, ο προτεινόμενος όρος καταχωρείται στο πεδίο φόρμας και πραγματοποιείται εκ νέου η υποβολή.
Μια αεροπορική γραμμή διαθέτει μια εφαρμογή ηλεκτρονικής προμήθειας εισιτηρίων. Όταν ένας χρήστης πληκτρολογήσει το όνομα μιας πόλης στο πεδίο φόρμας, ένα αναπτυσσόμενο μενού εμφανίζει την πόλη που ταιριάζει περισσότερο στην κορυφή του μενού και άλλες προτάσεις παρακάτω.
Ελέγξτε ότι υπάρχει ένα πεδίο φόρμας στη σελίδα.
Εισάγετε μια λέξη με λανθασμένη ορθογραφία.
Ελέγξτε ότι εμφανίζεται η προτεινόμενη ορθογραφία.
Ελέγξτε ότι είναι διαθέσιμος ένας μηχανισμός καταχώρησης της προτεινόμενης λέξης στη φόρμα.
Οι έλεγχοι #3 και #4 είναι αληθείς.
Γενική εφαρμογή.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η βελτίωση του ενδείκτη επισήμανσης στο πρόγραμμα περιήγησης, δημιουργώντας ένα υψηλής ορατότητας στο περιεχόμενο. Ο προεπιλεγμένος ενδείκτης επισήμανσης σε πολλά προγράμματα περιήγησης είναι μια λεπτή, διάστικτη, μαύρη γραμμή. Μπορεί να είναι δύσκολο να δείτε τη γραμμή όταν περιβάλλει ένα στοιχείο φόρμας, το οποίο διαθέτει ήδη διάρθρωση, όταν το στοιχείο με επισήμανση είναι εντός ενός κελιού πίνακα, όταν το στοιχείο με επισήμανση είναι πολύ μικρό ή όταν το παρασκήνιο της σελίδας είναι μαύρου χρώματος.
Με την τεχνική αυτή, όταν ο χρήστης τοποθετεί την επισήμανση σε ένα στοιχείο χρησιμοποιώντας το ποντίκι, το πλήκτρο tab, τα πλήκτρα-βέλη, συντομεύσεις πληκτρολογίου ή οποιαδήποτε άλλη μέθοδο, η εφαρμογή καθιστά την επισήμανση ορατή, χρησιμοποιώντας έναν συνδυασμό ενός χρώματος υψηλής αντίθεσης, μιας παχιάς γραμμής και άλλων οπτικών ενδεικτών, όπως λάμψη.
Μια Ιστοσελίδα έχει ένα σκοτεινό χρώμα παρασκηνίου και φωτεινό κείμενο και συνδέσμους. Όταν η επισήμανση τοποθετείται σε έναν σύνδεσμο, ο σύνδεσμος διαρθρώνεται με ένα μια φωτεινή κίτρινη γραμμή, πλάτους 3 pixel.
Μια Ιστοσελίδα περιλαμβάνει μια φόρμα στο εσωτερικό ενός πίνακα. Τα πλαίσια τόσο των στοιχείων πίνακα, όσο και της φόρμας είναι λεπτές, μαύρες γραμμές. Όταν η επισήμανση τοποθετείται σε ένα στοιχείο φόρμας, το στοιχείο διαρθρώνεται με μια κόκκινη γραμμή πλάτους 5 pixel, η οποία είναι μερικώς διάφανη.
Μια Ιστοσελίδα περιλαμβάνει ένα μενού αλληλεπίδρασης με υπομενού. Ένας χρήστης μπορεί να μεταφέρει την επισήμανση στο μενού χρησιμοποιώντας τα πλήκτρα-βέλη. Καθώς μεταφέρεται η επισήμανση, το τρέχον στοιχείο μενού με επισήμανση αλλάζει το υπόβαθρό του σε ένα διαφορετικό χρώμα, το οποίο έχει αναλογία αντίθεσης 3:1 με τα περιβάλλοντα στοιχεία και αναλογία αντίθεσης 4,5:1 με το δικό του κείμενο.
Εστίαση σε κάθε στοιχείο διεπαφής χρήστη με δυνατότητα επισήμανσης στη σελίδα χρησιμοποιώντας το ποντίκι.
Ελέγξτε ότι υπάρχει ένας ενδείκτης επισήμανσης υψηλής ορατότητας.
Εστίαση σε κάθε στοιχείο διεπαφής χρήστη με δυνατότητα επισήμανσης στη σελίδα χρησιμοποιώντας το πληκτρολόγιο.
Ελέγξτε ότι υπάρχει ένας ενδείκτης επισήμανσης υψηλής ορατότητας.
Οι έλεγχοι #2 και #4 είναι αληθείς.
Κάθε τεχνολογία όπου μια ομαδοποίηση μη κειμενικού περιεχομένου χρησιμοποιείται για την παρουσίαση πληροφοριών ή λειτουργιών.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η αποφυγή άσκοπου διπλότυπου που προκύπτει όταν μια ομαδοποίηση παρακείμενη σε μη κειμενικό περιεχόμενο, χρησιμοποιείται για την παρουσίαση πληροφοριών ή λειτουργιών.
Σε ορισμένες περιπτώσεις, οι σελίδες θα παρουσιάζουν μια ομάδα εικόνων για τη μεταφορά πληροφοριών. Κατά την παρουσίαση μαζί ή σε συγκεκριμένο συνδυασμό, αυτές οι ομαδοποιήσεις μπορούν να μεταφέρουν διαφορετικούς τύπους πληροφοριών. Για παράδειγμα, δύο εικόνες ενός αστεριού όπου μία παρουσιάζεται σε ασπρόμαυρη μορφή, ενώ η άλλη είναι έγχρωμη, μπορούν να χρησιμοποιηθούν σε συνδυασμό για την αναπαράσταση της αξιολόγησης ενός χρήστη. Για παράδειγμα, τρία πλήρη αστέρια που ακολουθούνται από δύο κενά αστέρια μπορεί να αναπαριστάνουν μια αξιολόγηση "τρία στα πέντε αστέρια".
Για τη χρήση αυτής της τεχνικής, ένας συγγραφέας παρέχει ένα εναλλακτικό κειμένου που εξυπηρετεί αντίστοιχο σκοπό για ολόκληρη την ομάδα και τη συσχετίζει με ένα στοιχείο στην ομάδα. Τα άλλα στοιχεία στην ομάδα επισημαίνονται με τρόπο που μπορεί να αγνοηθεί από υποστηρικτικές τεχνολογίες. Με τον τρόπο αυτό, ο χρήστης είναι σε θέση να προσδιορίσει πιο αποτελεσματικά τον σκοπό της ομάδας και μπορεί να αποφύγει διπλότυπα ή σύγχυση που μπορεί να προκληθεί, εάν είχε παρασχεθεί εναλλακτικό κειμένου για κάθε στοιχείο στην ομάδα.
Στο παρακάτω παράδειγμα, εμφανίζεται μια αξιολόγηση ως τρία πλήρη αστέρια και δύο κενά αστέρια. Αν και ένα εναλλακτικό κειμένου θα είχε προσφερθεί για κάθε μία από τις πέντε εικόνες, ο συγγραφέας παρέχει την αξιολόγηση στη μορφή "3 από 5 αστέρια" για την πρώτη εικόνα και έχει επισημάνει τις άλλες μέσω κειμένου null alt.
Παράδειγμα κώδικα:
<p>Rating:
<img src="star1" alt="3 out of 5 stars">
<img src="star1" alt="">
<img src="star1" alt="">
<img src="star2" alt="">
<img src="star2" alt="">
</p>
Στο παράδειγμα αυτό, κάθε κουμπί έχει ένα σύνολο εικόνων για υπόδειξη του επιπέδου συμμόρφωσης με τις δηλωμένες οδηγίες WCAG. Αυτή η προσέγγιση καθιστά δυνατή την αποφυγή ανακοινώσεων της μορφής "Εικόνα Α, Εικόνα Α, Εικόνα Α" κ.λπ. από τις υποστηρικτικές τεχνολογίες.
Παράδειγμα κώδικα:
<p>Conformance Level:</p>
<button name="A"><img src="a.png" alt="A" /></button> <br />
<button name="AA"><img src="a.png" alt="AA" /><img src="a.png" alt="" /></button> <br />
<button name="AAA"><img src="a.png" alt="AAA" /><img src="a.png" alt="" /><img src="a.png" alt="" /></button>
Ελέγξτε ότι ένα στοιχείο στην ομάδα περιλαμβάνει ένα εναλλακτικό κειμένου που εξυπηρετεί τον αντίστοιχο σκοπό για ολόκληρη την ομάδα.
Ελέγξτε ότι τα άλλα στοιχεία στην ομάδα επισημαίνονται με τρόπο που μπορεί να αγνοηθεί από υποστηρικτικές τεχνολογίες.
Ελέγξτε ότι τα στοιχεία που επισημαίνονται με τρόπο που μπορεί να αγνοηθεί από υποστηρικτικές τεχνολογίες, είναι παρακείμενα του στοιχείου που περιέχει το εναλλακτικό κειμένου για την ομάδα.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλο το περιεχόμενο.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να βοηθήσει χρήστες με νοητικές αναπηρίες, τύφλωση και απώλεια όρασης να κατανοήσουν τι θα συμβεί όταν αλληλεπιδράσουν με μια λειτουργία σε μια Ιστοσελίδα. Εάν υπάρχουν διαφορετικές ετικέτες στα συστατικά στοιχεία της διεπαφής χρήστη (π.χ. στοιχεία, σύνδεσμοι, αντικείμενα JavaScript κ.λπ.) που έχουν ίδια λειτουργία, ο χρήστης δεν θα γνωρίζει ότι έχει έρθει σε επαφή με ένα συστατικό στοιχείο με την ίδια λειτουργία και δεν θα γνωρίζει τι να περιμένει. Αυτό μπορεί να οδηγήσει σε πολλά άσκοπα σφάλματα. Συνίσταται επίσης αυτή η προσέγγιση για τη συνεπή δημιουργία ετικετών να εφαρμοστεί σε ολόκληρο τον ιστότοπο.
Μια Ιστοσελίδα έχει ένα πεδίο φόρμας στην κορυφή της σελίδας με ετικέτα "Αναζήτηση". Στο κάτω μέρος της σελίδας υπάρχει άλλο πεδίο φόρμας που παρέχει την ίδια λειτουργία. Φέρει επίσης την ετικέτα "Αναζήτηση".
Μια εικόνα με ένα θαυμαστικό χρησιμοποιείται για να κατευθύνει χρήστες προς ενότητες της σελίδας που παρέχουν πρόσθετες πληροφορίες. Κάθε φορά που η εικόνα με το θαυμαστικό εμφανίζεται, έχει το ίδιο εναλλακτικό κειμένου, "περισσότερες πληροφορίες."
Ένας σύνδεσμος για τη σελίδα "Επικοινωνία μαζί μας" ενός ιστότοπου φέρει το κείμενο συνδέσμου "Επικοινωνία". Στο κάτω μέρος της σελίδας υπάρχει ένας σύνδεσμος που επίσης οδηγεί στη σελίδα "Επικοινωνία μαζί μας". Φέρει επίσης το κείμενο συνδέσμου "Επικοινωνία".
Ελέγξτε ότι κάθε συστατικό στοιχείο σχετίζεται με κείμενο που το προσδιορίζει (π.χ. ετικέτα, όνομα ή εναλλακτικό κειμένου).
Ελέγξτε ότι αυτό το συσχετισμένο κείμενο είναι πανομοιότυπο για κάθε συστατικό στοιχείο διεπαφής χρήστη με την ίδια λειτουργία.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Αυτή η τεχνική σχετίζεται με όλες τις τεχνολογίες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού για άτομα που δεν μπορούν να ολοκληρώσουν εργασίες εντός ενός ορισμένου χρονικού ορίου, για την απενεργοποίηση του χρονικού ορίου.
Είναι σημαντικό ο μηχανισμός απενεργοποίησης του χρονικού ορίου να μπορεί να ολοκληρωθεί χωρίς χρονικό όριο στον ίδιο και πριν λήξει το χρονικό όριο για τη σελίδα. Για γίνει αυτό, ο μηχανισμός θα πρέπει να είναι διαθέσιμος στην κορυφή της σελίδας ή κοντά σε αυτήν, ώστε να μπορεί να εντοπιστεί και ενεργοποιηθεί γρήγορα από άτομα με μια σειρά από αναπηρίες.
Μια σελίδα έχει μια καταχώρηση τίτλων ειδήσεων που ενημερώνονται αυτόματα κάθε λεπτό. Στην κορυφή της σελίδας υπάρχει ένας σύνδεσμος που απενεργοποιεί την ενημέρωση.
Ελέγξτε ότι υπάρχει ένας μηχανισμός για την απενεργοποίηση οποιωνδήποτε χρονικών ορίων κοντά στην κορυφή της σελίδας.
Επαληθεύστε ότι το χρονικό όριο για τη σελίδα είναι αρκετά μεγάλο για έναν χρήστη ώστε να μπορεί εύκολα να πλοηγηθεί στον μηχανισμό, ακόμα και εάν είναι 10 φορές πιο αργός από τους περισσότερους χρήστες.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Περιεχόμενο που αποδέχεται τα δεδομένα εισόδου του χρήστη.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η μείωση της προσπάθειας που απαιτείται ώστε οι χρήστες να επιβεβαιώσουν ότι μια ενέργεια, όπως η υποβολή μιας φόρμας Ιστού, έχει ολοκληρωθεί επιτυχώς. Αυτό μπορεί να πραγματοποιηθεί μέσω παροχής πληροφοριών που παρουσιάζονται συνεχώς και υποδεικνύουν ρητά την επιτυχία μιας ενέργειας, αντί για την απαίτηση από έναν χρήστη να πλοηγηθεί σε περιεχόμενο για να εντοπίσει εάν η ενέργεια ήταν επιτυχής.
Σημαντική προσπάθεια αναμένεται από χρήστες που δεν μπορούν να πραγματοποιήσουν εύκολα σάρωση σε πληροφορίες για την επιβεβαίωση της ενέργειάς τους (όπως υποβολή δεδομένων που έχουν καταχωρηθεί επιτυχώς σε μια βάση δεδομένων, αποστολή σε ένα άτομο ή προσθήκη σε περιεχόμενο που είναι υπό επεξεργασία).
Ένας χρήστης συνδέεται σε ένα σύστημα και λαμβάνει μια απάντηση που υποδεικνύει ότι: "Έχετε συνδεθεί επιτυχώς," έτσι ώστε να μην χρειάζεται να πλοηγηθεί στην οθόνη για να εντοπίσει έναν ενδείκτη της σύνδεσής του, όπως το όνομα χρήστη του ή ίσως τον σύνδεσμο σύνδεσης που αντικαθίσταται από έναν σύνδεσμο αποσύνδεσης. Η εύρεση αυτών των στοιχείων μπορεί να είναι χρονοβόρα.
Ένας χρήστης συμπληρώνει ένα κουίζ ή ένα τεστ και το υποβάλλει. Η απάντηση τον πληροφορεί ότι το τεστ υποβλήθηκε επιτυχώς, ώστε να μην χρειάζεται να πλοηγηθεί στα δεδομένα, όπως μια λίστα τεστ που έχουν υποβληθεί, για να επιβεβαιώσει ότι το τεστ παρατίθεται στο σημείο αυτό.
Ένας επισκέπτης δημιουργεί έναν λογαριασμό σε έναν ιστότοπο. Ύστερα από την υποβολή της φόρμας, πληροφορίες προτείνουν ότι "Η εγγραφή υποβλήθηκε επιτυχώς...". Εάν συνδεθεί αυτόματα ύστερα από την εγγραφή, η απάντηση λέει επίσης "...και έχετε συνδεθεί." Εάν απαιτείται επιβεβαίωση, οι πληροφορίες περιλαμβάνουν ένα μήνυμα της μορφής "...ένα μήνυμα ηλεκτρονικού ταχυδρομείου σας έχει αποσταλεί, στο οποίο πρέπει να απαντήσετε για να επιβεβαιώσετε την εγγραφή σας."
Ένας χρήστης υποβάλλει μια φόρμα με πληροφορίες που απευθύνονται σε υποστηρικτικό προσωπικό. Οι πληροφορίες υποδεικνύουν ότι "Το μήνυμα στάλθηκε επιτυχώς και θα πρέπει να λάβετε μια απάντηση εντός των επόμενων 48 ωρών."
Συμπληρώστε τα πεδία φόρμας χωρίς σφάλματα.
Υποβάλλετε τη φόρμα.
Ελέγξτε ότι ένα μήνυμα πληροφοριών στην οθόνη επιβεβαιώνει την επιτυχία της υποβολής.
Ελέγξτε ότι το #3 είναι αληθές.
Έγγραφα HTML και XHTML που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφευχθούν άσκοπα διπλότυπα που εμφανίζονται όταν παρακείμενες εκδόσεις κειμένου και εικονιδίων ενός συνδέσμου περιέχονται σε έγγραφο.
Πολλά είδη συνδέσμων έχουν κείμενο και σύνδεσμο εικονιδίου τον έναν δίπλα στον άλλον. Συχνά το κείμενο και ο δεσμός εικονιδίου αποδίδονται σε ξεχωριστούς συνδέσμους, εν μέρει για να δημιουργήσουν μια ελαφριά οπτική διάκριση μεταξύ τους. Οπτικά, εμφανίζονται να έχουν τον ίδιο σύνδεσμο, αλλά πολλοί άνθρωποι τους εκλαμβάνουν ως δύο ταυτόσημους συνδέσμους και αυτό μπορεί να προκαλέσει σύγχυση, Για να αποφευχθεί αυτό, μερικοί συγγραφείς παραλείπουν εναλλακτικό κειμένου από την εικόνα, αλλά αυτό σημαίνει μη ικανοποίηση του Κριτηρίου Επιτυχίας 1.1.1 (Success Criterion 1.1.1), διότι το εναλλακτικό κειμένου δεν θα εξυπηρετεί τον ίδιο σκοπό με τον γραφικό σύνδεσμο. Η προτιμώμενη μέθοδος αντιμετώπισης αυτού του φαινομένου είναι η τοποθέτηση του κειμένου και της εικόνας μαζί σε έναν σύνδεσμο και η παροχή εναλλακτικού κειμένου null στην εικόνα για την εξάλειψη διπλότυπου του κειμένου.
Μερικές φορές το κείμενο και ο σύνδεσμος εικονιδίου αποδίδονται σε ξεχωριστά, παρακείμενα κελιά πίνακα για τη διευκόλυνση της διάταξης σελίδας. Αν και το WCAG 2 δεν απαγορεύει τη χρήση πινάκων διάταξης, συνιστώνται διατάξεις που βασίζονται σε CSS προκειμένου να διατηρείται η καθορισμένη σημασιολογική έννοια των στοιχείων πίνακα HTML και να διατηρείται η πρακτική κωδικοποίησης διαχωρισμού της παρουσίασης από το περιεχόμενο. Εάν χρησιμοποιείται CSS, αυτή η τεχνική μπορεί να εφαρμοστεί για τον συνδυασμό των συνδέσμων.
Το εικονίδιο και το κείμενο περιέχονται στο ίδιο στοιχείο a
.
Παράδειγμα κώδικα:
<a href="products.html">
<img src="icon.gif" alt="" />
Products page
</a>
Ένας σύνδεσμος περιέχει ένα εικονίδιο και κείμενο, και η βοήθεια του ιστότοπου αναφέρεται στο εικονίδιο. Το img
έχει εναλλακτικό κειμένου που είναι το όνομα που χρησιμοποιήθηκε για το εικονίδιο στη βοήθεια του ιστότοπου, η οποία περιγράφει το κλικ πάνω στο εικονίδιο αρχικής σελίδας.
Παράδειγμα κώδικα:
<a href="foo.htm">
<img src="house.gif" alt="home page icon"/>
Go to the home page
</a>
Αυτό το παράδειγμα δείχνει μια περίπτωση αποτυχίας στην εφαρμογή της τεχνικής. Δεσμός εικονιδίου και δεσμός κειμένου βρίσκονται δίπλα-δίπλα. Το εναλλακτικό κειμένου για την εικόνα είναι ίδια με τον σύνδεσμο κειμένου δίπλα της, προκαλώντας το φαινόμενο του "τραυλίσματος" καθώς ο σύνδεσμος διαβάζεται δυο φορές.
Παράδειγμα κώδικα:
<a href="products.html">
<img src="icon.gif" alt="Products page" />
</a>
<a href="products.html">
Products page
</a>
Αυτό το παράδειγμα δείχνει μια περίπτωση αποτυχίας στην εφαρμογή της τεχνικής. Δεσμός εικονιδίου και δεσμός κειμένου βρίσκονται δίπλα-δίπλα. Σε μια προσπάθεια αφαίρεσης του "τραυλίσματος", το εναλλακτικό κειμένου για την εικόνα είναι null. Ωστόσο, τώρα ένας από τους συνδέσμους έχει άγνωστο προορισμό, που είναι το δικό του προβληματικό κείμενο συνδέσμου.
Παράδειγμα κώδικα:
<a href="products.html">
<img src="icon.gif" alt="" />
</a>
<a href="products.html">
Products page
</a>
Αυτό το παράδειγμα δείχνει μια λανθασμένη υλοποίηση αυτής της τεχνικής. Το εικονίδιο και το κείμενο περιέχονται στο ίδιο στοιχείο a. Ωστόσο, το εναλλακτικό κειμένου για το εικονίδιο είναι αντίγραφο του κειμένου συνδέσμου και οδηγεί σε ένα φαινόμενο "τραυλίσματος" καθώς η περιγραφή διαβάζεται δύο φορές.
Παράδειγμα κώδικα:
<a href="products.html">
<img src="products.gif" alt="Products page"/>
Products page
</a>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε a
στο περιεχόμενο που περιέχει στοιχείο img
:
Ελέγξτε ότι δεν υπάρχει παρακείμενο στοιχείο a
με την ίδια παράμετρο href
και την ίδια περιγραφή
Για κάθε a
στο περιεχόμενο που περιέχεται σε πίνακα:
Ελέγξτε ότι δεν υπάρχει στοιχείο a
σε παρακείμενο κελί πίνακα με την ίδια παράμετρο href
και την ίδια περιγραφή
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας λογικής σειράς στηλοθέτησης όταν η προεπιλεγμένη σειρά στηλοθέτησης δεν επαρκεί. Συχνά, η τεχνική Τοποθέτησης των αλληλεπιδραστικών στοιχείων σε σειρά που συμφωνεί με ακολουθίες και σχέσεις εντός του περιεχομένου (G59: Placing the interactive elements in an order that follows sequences and relationships within the content) είναι επαρκής και αυτή η τεχνική δεν είναι απαραίτητη. Είναι πολύ εύκολο να εισαχθούν λάθη χρηστικότητας όταν ρυθμίζεται ρητά η σειρά στηλοθέτησης.
Σε ορισμένες περιπτώσεις, ο συγγραφέας μπορεί να θέλει να καθορίσει σειρά στηλοθέτησης που ακολουθεί σχέσεις στο περιεχόμενο χωρίς να ακολουθήσει τη σειρά των αλληλεπιδραστικών στοιχείων στον κώδικα. Σε αυτές τις περιπτώσεις, είναι δυνατός ο καθορισμός εναλλακτικής σειράς με χρήση της παραμέτρου tabindex
του αλληλεπιδραστικού στοιχείου. Η παράμετρος tabindex
έχει τιμή μεταξύ 0 και 32767.
Όταν εκτελείται πλοήγηση στα αλληλεπιδραστικά στοιχεία με χρήση του πλήκτρου tab, η επισήμανση στα στοιχεία ακολουθεί την αύξουσα σειρά της τιμής της παραμέτρου tabindex
. Στοιχεία με τιμή tabindex
μεγαλύτερη από μηδέν θα επισημανθούν πριν τα στοιχεία χωρίς tabindex
ή με tabindex
ίση με 0. Αφού επισημανθούν όλα τα στοιχεία με παράμετρο "tabindex" υψηλότερη από 0, τα υπόλοιπα αλληλεπιδραστικά στοιχεία επισημαίνονται με τη σειρά που εμφανίζονται στην Ιστοσελίδα.
Μια φόρμα γενεαλογικής αναζήτησης ψάχνει εγγραφές γάμων. Η φόρμα αναζήτησης περιλαμβάνει διάφορα πεδία εισαγωγής δεδομένων για τη νύφη και τον γαμπρό. Η φόρμα έχει σήμανση με χρήση ενός πίνακα δεδομένων που περιλαμβάνει τα πεδία του γαμπρού στην πρώτη στήλη και τα πεδία της νύφης στη δεύτερη. Η σειρά στο περιεχόμενο είναι γραμμή-γραμμή, αλλά ο συγγραφέας θεωρεί πιο λογική την πλοήγηση στήλη-στήλη. Με αυτό τον τρόπο, όλα τα κριτήρια του γαμπρού μπορούν να συμπληρωθούν πριν την μετακίνηση στα κριτήρια στα κριτήρια της νύφης. Οι παράμετροι tabindex
των πεδίων εισαγωγής δεδομένων χρησιμοποιούνται, για να καθοριστεί μια σειρά στηλοθέτησης που εκτελεί πλοήγηση στήλη-στήλη.
Παράδειγμα κώδικα:
<form action="#" method="post">
<table summary="the first column contains the search criteria
of the groom, the second column the search criteria of
of the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form>
Μια Ιστοσελίδα περιέχει ένα πεδίο αναζήτησης στην επάνω δεξιά γωνία. Το πεδίο έχει tabindex="1", άρα θα εμφανιστεί πρώτο στην σειρά στηλοθέτησης, ακόμα κι αν δεν είναι πρώτο στη σειρά περιεχομένου.
Οι τιμές Tabindex
δεν χρειάζεται να είναι σειριακές, ούτε πρέπει να ξεκινούν από κάποια συγκεκριμένη τιμή. Οι τιμές δεν χρειάζεται να είναι μοναδικές. Η πλοήγηση σε στοιχεία με ταυτόσημες τιμές tabindex
εκτελείται με τη σειρά που εμφανίζονται στη ροή χαρακτήρων. Άρα, στο ακόλουθο παράδειγμα, η σειρά στηλοθέτησης θα είναι ένα, τρία, δύο, τέσσερα.
Παράδειγμα κώδικα:
<a href="" tabindex="1">one</a>
<a href="" tabindex="2">two</a>
<a href="" tabindex="1">three</a>
<a href="" tabindex="2">four</a>
Σε ενότητες περιεχομένου όπου η σειρά στηλοθέτησης ακολουθεί τη σειρά περιεχομένου, ίσως είναι λιγότερο επίφοβο για σφάλμα να δώσετε σε όλα τα στοιχεία την ίδια τιμή tabindex αντί να καθορίσετε διαφορετικό αριθμό για κάθε στοιχείο. Μετά, είναι εύκολο να αναδιατάξετε τα στοιχεία αυτά ή να προσθέσετε νέα και να διατηρήσετε μια λογική σειρά στηλοθέτησης.
Παράδειγμα κώδικα:
<a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long
after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
...
<a href="xxx" tabindex = "1">Twentieth link in list</a>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε εάν χρησιμοποιείται η παράμετρος tabindex
Εάν χρησιμοποιείται η παράμετρος tabindex
, ελέγξτε ότι η σειρά στηλοθέτησης που καθορίστηκε από τις παραμέτρους tabindex
ακολουθεί σχέσεις στο περιεχόμενο.
Ελέγξτε ότι το #2 είναι αληθές.
Έγγραφα HTML και XHTML που περιέχουν στοιχεία area
.
Αυτή η τεχνική σχετίζεται με:
Η προδιαγραφή HTML 4.01 εξηγεί ότι το κείμενο της παραμέτρου alt
θα εμφανιστεί όταν το στοιχείο δεν μπορεί να αποδοθεί κανονικά. Οι πράκτορες χρήστη θα εμφανίσουν το κείμενο της παραμέτρου alt
όταν δεν εμφανίζονται οι εικόνες. Ωστόσο, οι οπτικοί πράκτορες χρήστης δεν θα εμφανίσουν το κείμενο της παραμέτρου alt για στοιχεία περιοχής χαρτών εικόνας όταν η πρόσβαση είναι μέσω πληκτρολογίου ή όταν δεν εμφανίζονται εικόνες και ενδέχεται να πραγματοποιηθεί περικοπή των στοιχείων περιοχής, εάν το εγγενές μέγεθος της εικόνας δεν χρησιμοποιείται. Επιπλέον, η εμφάνιση του κειμένου της παραμέτρου alt σε απάντηση της παραμονής του δείκτη του ποντικιού, δεν εμφανίζεται στο σετ μεγέθους γραμματοσειράς ή συνδυασμού χρωμάτων στον πράκτορα χρήστη.
Η παράμετρος title
προορίζεται για την παροχή πρόσθετων πληροφοριών. Ωστόσο, η υφιστάμενη υλοποίηση τους πράκτορες χρήστη είναι πρόσβαση είτε στην παράμετρο title ή alt, αλλά όχι και στις δύο. Οι πράκτορες χρήστη θα εμφανίσουν γενικά το κείμενο της παραμέτρου title
όταν το ποντίκι τοποθετηθεί πάνω από το στοιχείο που περιέχει την παράμετρο title
. Για παράδειγμα, το Internet Explorer θα εμφανίσει το κείμενο alt
κατά την παραμονή του δείκτη του ποντικιού, εάν δεν υπάρχει κείμενο title
, τα Firefox και Opera εμφανίζουν μόνο το κείμενο title
κατά την παραμονή του δείκτη του ποντικιού και δεν χρησιμοποιούν το κείμενο της παραμέτρου alt
για τον σκοπό αυτό. Επομένως, για να διασφαλιστεί ότι το κείμενο της παραμέτρου alt είναι ορατό κατά την παραμονή του δείκτη του ποντικιού, το ίδιο κείμενο θα πρέπει να χρησιμοποιείται στην παράμετρο title.
Έτσι, όταν χρησιμοποιούνται χάρτες εικόνας, η επιτυχής υλοποίηση αυτής της τεχνικής θα απαιτεί οποιοδήποτε από τα εξής:
Διασφάλιση ότι η τιμή της παραμέτρου alt του στοιχείου περιοχής εμφανίζεται σε απάντηση της επίτευξης εστίασης (συμπεριλαμβανομένης επισήμανσης πληκτρολογίου) και ότι αυτό ισχύει σε αμφότερες τις περιπτώσεις όπου εικόνες είτε φορτώνονται, είτε όχι. Ή
Ένας πλεονάζοντας μηχανισμός εξυπηρετεί τον ίδιο σκοπό με τα στοιχεία περιοχής που είναι παρόντα στην Ιστοσελίδα.
Σκοπός αυτής της τεχνικής είναι η παροχή εναλλακτικών κειμένου που εξυπηρετούν τον ίδιο σκοπό με τις επιλέξιμες περιοχές μιας αντιστοίχισης εικόνων. Μια αντιστοίχιση εικόνων είναι μια εικόνα που χωρίζεται σε επιλέξιμες περιοχές, οι οποίες ορίζονται από στοιχεία area
. Κάθε περιοχή είναι ένας σύνδεσμος προς μια άλλη Ιστοσελίδα ή άλλο μέρος της τρέχουσας Ιστοσελίδας. Η παράμετρος alt
κάθε στοιχείου area
εξυπηρετεί τον ίδιο σκοπό με την επιλέξιμη περιοχή της εικόνας.
Αυτό το παράδειγμα χρησιμοποιεί την παράμετρο alt
του στοιχείου area
για την παροχή κειμένου που περιγράφει τον σκοπό των περιοχών αντιστοίχισης εικόνας.
Παράδειγμα κώδικα:
<img src="welcome.gif" usemap="#map1"
alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab" />
</map>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε στοιχείο area
σε αντιστοίχιση εικόνων:
Ελέγξτε ότι το στοιχείο area
έχει μια παράμετρο alt
.
Ελέγξτε ότι το εναλλακτικό κειμένου που ορίζεται από την παράμετρο alt, εξυπηρετεί τον ίδιο σκοπό με το μέρος της εικόνας αντιστοίχισης εικόνων που παραπέμπονται από το στοιχείο area
της αντιστοίχισης εικόνας.
Οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Όλα τα έγγραφα HTML και XHTML, συμπεριλαμβανομένων αυτών σε μεμονωμένα πλαίσια ενός συνόλου πλαισίων, έχουν ένα στοιχείο title
στην ενότητα head
που καθορίζει σε μια απλή φράση τον σκοπό του εγγράφου. Αυτό βοηθά τους χρήστες να προσανατολιστούν εντός του ιστότοπου γρήγορα χωρία να πρέπει να αναζητήσουν πληροφορίες προσανατολισμού στο σώμα της σελίδας.
Σημειώστε ότι το (υποχρεωτικό) στοιχείο title
, το οποίο εμφανίζεται μόνο μία φορά σε έγγραφο, είναι διαφορετικό από την παράμετρο title
, η οποία μπορεί να εφαρμοστεί σχεδόν σε κάθε στοιχείο HTML και XHTML.
Αυτό το παράδειγμα καθορίζει τον τίτλο ενός εγγράφου.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The World Wide Web Consortium</title>
</head>
<body>
...
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε τον πηγαίο κώδικα του εγγράφου HTML ή XHTML και ελέγξτε ότι εμφανίζεται ένα μη κενό στοιχείο title
στην ενότητα head
.
Ελέγξτε ότι το στοιχείο title
περιγράφει το έγγραφο.
Οι έλεγχοι 1 και 2 είναι αληθείς.
Έγγραφα που φορτώνουν μέσα με το στοιχείο object
, όταν η μορφή μέσων δεν είναι μια τεχνολογία περιεχομένου υποστήριξης προσβασιμότητας.
Αυτή η τεχνική σχετίζεται με:
Ένα χρησιμοποιείται το στοιχείο object
, προβείτε στην παροχή ενός εναλλακτικού κειμένου (text alternative) στο περιεχόμενο του στοιχείου:
Αυτό το παράδειγμα δείχνει ένα εναλλακτικό κειμένου για ένα Java applet με χρήση του στοιχείου object
.
Παράδειγμα κώδικα:
<object classid="java:Press.class" width="500" height="500">
As temperature increases, the molecules in the balloon...
</object>
Αυτό το παράδειγμα αξιοποιεί το γεγονός ότι είναι δυνατή η ένθεση των στοιχείων object
για την παροχή εναλλακτικών αναπαραστάσεων πληροφοριών.
Παράδειγμα κώδικα:
<object classid="java:Press.class" width="500" height="500">
<object data="Pressure.mpeg" type="video/mpeg">
<object data="Pressure.gif" type="image/gif">
As temperature increases, the molecules in the balloon...
</object>
</object>
</object>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Δεν υπάρχουν διαθέσιμοι έλεγχοι για την τεχνική αυτή.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Οι υποστηρικτικές τεχνολογίες παρέχουν διαφορετικά επίπεδα υποστήριξης για εκφώνηση της παραμέτρου title. Ορισμένα δεν περιλαμβάνουν χαρακτηριστικά που επιτρέπουν σε χρήστες να έχουν πρόσβαση σε πληροφορίες που παρέχονται μέσω της παραμέτρου title.
Η υλοποίηση αυτής της τεχνικής με την παράμετρο title
είναι επαρκής μόνο όταν η παράμετρος title
υποστηρίζει την προσβασιμότητα. Το περιεχόμενο της παραμέτρου title
χρειάζεται να είναι διαθέσιμο για όλους τους χρήστες πληκτρολογίου (όχι μόνο εκείνους με λογισμικό μετατροπής κειμένου σε ομιλία) προκειμένου η παράμετρος αυτή να υποστηρίζει την προσβασιμότητα.
Tα JAWS 6.2 (και νεότερη έκδοση) και WindowEyes 5.0 (και νεότερη έκδοση), υποστηρίζουν τα στοιχεία abbr και acronym. Μπορούν όλα να ρυθμιστούν για εκφώνηση της παραμέτρου title όταν αυτά τα στοιχεία εμφανίζονται, αλλά αυτή δεν είναι προεπιλεγμένη ρύθμιση και συχνά δεν ενεργοποιείται από τους χρήστες.
Πολλοί πράκτορες χρήστη γραφικών αποδίδουν κείμενο εσώκλειστο εντός στοιχείου abbr
ή acronym
με μια διάστικτη με τελείες γραμμή κάτω ή γύρω από αυτό. Επιπρόσθετα, όταν το ποντίκι αφεθεί πάνω από το στοιχείο, εμφανίζεται η επέκταση ως εργαλείο βοήθειας.
Στο Internet Explorer 7 και σε παλαιότερες εκδόσεις, τα στοιχεία με σήμανση χρήσης του στοιχείου abbr
δεν εμφανίζονται μαζί με οποιαδήποτε πρόσθετη μορφοποίηση. Για το IE 6 και παλαιότερες εκδόσεις, η εκτεταμένη έκδοση δεν εμφανίζεται ως ένα εργαλείο βοήθειας όταν το ποντίκι αφεθεί πάνω από το στοιχείο.
Εντός ενός δεδομένου πράκτορα χρήστη ή υποστηρικτικής τεχνολογίας, τα στοιχεία abbr
και acronym
παρουσιάζονται στους χρήστες με τον ίδιο τρόπο.
Σκοπός αυτής της τεχνικής είναι η παροχή αναπτυγμάτων ή ορισμών για συντμήσεις με χρήση των στοιχείων abbr
και acronym
.
Είναι πάντα κατάλληλη η χρήση του στοιχείου abbr
για κάθε σύντμηση, ιδίως ακρωνύμια και αρκτικόλεξα. Όταν χρησιμοποιούνται οι HTML και XHTML, τα αρκτικόλεξα και τα ακρωνύμια μπορούν να έχουν σήμανση με χρήση του στοιχείου acronym
. Η XHTML 2.0 προτείνει την εξάλειψη του στοιχείου acronym
προς όφελος ενός μια γενικού στοιχείου abbr
.
Παράδειγμα κώδικα:
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
Παράδειγμα κώδικα:
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit
brought by members of the National Writers Union against ......</p>
Παράδειγμα κώδικα:
<p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p>
Παράδειγμα κώδικα:
<p><acronym title="World Wide Web">WWW</acronym></p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το ανάπτυγμα ή ο ορισμός παρέχεται για κάθε σύντμηση μέσω του στοιχείου abbr
ή του acronym
.
Ελέγξτε ότι το #1 είναι αληθές.
Έγγραφα HTML και XHTML που περιέχουν συνδέσμους, (στοιχεία <a href>)
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει τον σκοπό ενός συνδέσμου με την παροχή περιγραφικού κειμένου ως περιεχόμενο του στοιχείου a
. Η περιγραφή επιτρέπει στον χρήστη να ξεχωρίσει αυτό το σύνδεσμο από άλλους συνδέσμους στην Ιστοσελίδα και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο. Το URI του προορισμού δεν είναι γενικώς επαρκώς περιγραφικό.
'Όταν μια εικόνα είναι το μόνο περιεχόμενο ενός συνδέσμου, το εναλλακτικό κειμένου για την εικόνα περιγράφει τη μοναδική λειτουργία του συνδέσμου.
Όταν το περιεχόμενο ενός συνδέσμου περιέχει κείμενο και μία ή περισσότερες εικόνες, εάν το κείμενο επαρκεί για να περιγράψει τους σκοπούς του συνδέσμου, οι εικόνες μπορούν να έχουν ένα κενό εναλλακτικό κειμένου. (Δείτε την τεχνική Χρήσης κειμένου null alt και παραμέτρου no title σε στοιχεία Img για εικόνες που η ΑΤ πρέπει να παραβλέψει (H67: Using null alt text and no title attribute on img elements for images that AT should ignore) (HTML) .) Όταν οι εικόνες μεταφέρουν πληροφορίες πέραν του σκοπού του συνδέσμου, πρέπει να έχουν επίσης ένα κατάλληλο κείμενο alt.
Περιγραφή του σκοπού ενός συνδέσμου σε HMTL στο κειμενικό περιεχόμενο του στοιχείου a
element.
Παράδειγμα κώδικα:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>
Χρήση της παραμέτρου alt
για το στοιχείο img
για την περιγραφή του σκοπού ενός γραφικού συνδέσμου
Παράδειγμα κώδικα:
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a>
Χρήσης κενής παραμέτρου alt όταν το στοιχείο anchor (a
) περιέχει κείμενο που περιγράφει τους σκοπούς ενός συνδέσμου επιπρόσθετα του στοιχείου img
. Σημειώστε ότι το κείμενο συνδέσμου θα εμφανιστεί στη σελίδα δίπλα στην εικόνα.
Παράδειγμα κώδικα:
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>
Ένας σύνδεσμος περιέχει ένα εικονίδιο και κείμενο, και η βοήθεια του ιστότοπου αναφέρεται στο εικονίδιο. Το img
έχει εναλλακτικό κειμένου που είναι το όνομα που χρησιμοποιήθηκε για το εικονίδιο στη βοήθεια του ιστότοπου, η οποία περιγράφει το κλικ πάνω στο εικονίδιο αρχικής σελίδας.
Παράδειγμα κώδικα:
<a href="foo.htm">
<img src="house.gif" alt="icon"/>
Home page
</a>
Ένας σύνδεσμος περιέχει κείμενο και ένα εικονίδιο και το εικονίδιο παρέχει πρόσθετες πληροφορίες σχετικά με τον στόχο.
Παράδειγμα κώδικα:
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Ελέγξτε ότι κείμενο ή εναλλακτικό κειμένου για μη κειμενικό περιεχόμενο περιλαμβάνεται στο στοιχείο a
Εάν ένα στοιχείο img
είναι το μόνο περιεχόμενο του στοιχείου a
, ελέγξτε ότι το εναλλακτικό κειμένου περιγράφει τον σκοπό του κειμένου.
Εάν το στοιχείο a
περιέχει ένα ή περισσότερα στοιχεία img
και το εναλλακτικό κειμένου του/των στοιχείων img
είναι κενή, ελέγξτε ότι το κείμενο του συνδέσμου περιγράφει τον σκοπό του συνδέσμου
Εάν το στοιχείο a
περιέχει μόνο κείμενο, ελέγξτε ότι το κείμενο περιγράφει τον σκοπό του συνδέσμου
Οι παραπάνω έλεγχοι είναι αληθείς.
Περιεχόμενο που περιλαμβάνει στοιχεία ελέγχου φόρμας.
Αυτή η τεχνική σχετίζεται με:
Ο σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού που επιτρέπει στους χρήστες να υποβάλουν ρητά αίτηση για αλλαγές στο περιβάλλον. Η επιδιωκόμενη χρήση ενός κουμπιού υποβολής είναι να παράγει μια αίτηση HTTP που υποβάλλει δεδομένα που καταχωρήθηκαν σε μια φόρμα, άρα είναι ένα κατάλληλο στοιχείο ελέγχου προς χρήση για να προκληθεί αλλαγή στο περιβάλλον.
Αυτό είναι ένα βασικό παράδειγμα φόρμας με κουμπί υποβολής.
Παράδειγμα κώδικα:
<form action="http://www.example.com/cgi/subscribe/" method="post"><br />
<p>Enter your e-mail address to subscribe to our mailing list.</p><br />
<label for="address">Enter email address:</label><input type="text"
id="address" name="address" />
<input type="submit" value="Subscribe" /><br />
</form>
Το ακόλουθο παράδειγμα χρησιμοποιεί ένα αρχείο εντολών στην πλευρά του διακομιστή (που καθορίζεται στην παράμετρο action
), το οποίο ανακατευθύνει τον χρήστη στη σελίδα που αιτήθηκε.
Παράδειγμα κώδικα:
<form action="http://www.example.com/cgi/redirect/" method="get"><br />
<p>Navigate the site.</p><br />
<select name="dest"><br />
<option value="/index.html">Home</option/><br />
<option value="/blog/index.html">My blog</option/><br />
<option value="/tutorials/index.html">Tutorials</option/><br />
<option value="/search.html">Search</option/><br />
</select><br />
<input type="submit" value="Go to Page" /><br />
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Το "Αναπτυσσόμενα μενού πλοήγησης σε HTML" (Navigational pulldown menus in HTML) του Jukka Korpela εξετάζει μερικές τεχνικές που δουλεύουν ή όχι.
Βρείτε όλες τις φόρμες στο περιεχόμενο
Για κάθε φόρμα, ελέγξτε ότι διαθέτει κουμπί υποβολής (input type="submit", input type="image", ή button type="submit")
Το #2 είναι αληθές
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Υφιστάμενοι πράκτορες χρήστη και υποστηρικτική τεχνολογία δεν παρέχουν σχόλια για τον χρήστη όταν σύνδεσμοι έχουν διαθέσιμο περιεχόμενο της παραμέτρου title
.
Ορισμένοι πράκτορες χρήστη γραφικών θα εμφανίζουν ένα εργαλείο βοήθειας όταν το ποντίκι αφήνεται πάνω από ένα στοιχείο anchor που περιέχει την παράμετρο title
. Ωστόσο, οι υφιστάμενοι πράκτορες χρήστη δεν παρέχουν πρόσβαση στο περιεχόμενο παραμέτρου title
μέσω του πληκτρολογίου.
Το εργαλείο βοήθειας σε ορισμένους κοινούς πράκτορες χρήστη εξαφανίζεται ύστερα από μια σύντομη χρονική περίοδο (περίπου 5 δευτερόλεπτα). Αυτό μπορεί να οδηγήσει σε δυσκολίες πρόσβασης στο περιεχόμενο της παραμέτρου title
για εκείνους τους χρήστες που μπορούν να χρησιμοποιούν ποντίκι, αλλά έχουν δυσκολίες λεπτών κινήσεων χειρισμού και ενδέχεται να οδηγήσει σε προβλήματα για χρήστες που χρειάζονται περισσότερο χρόνο ανάγνωσης του εργαλείου βοήθειας.
Οι υφιστάμενοι πράκτορες χρήστη γραφικών δεν παρέχουν μηχανισμούς ελέγχου της παρουσίασης του περιεχομένου παραμέτρου title
. Ο χρήστης δεν μπορεί να αλλάξει το μέγεθος του κειμένου του εργαλείου βοήθειας ή να ελέγξει τα χρώματα προσκηνίου και παρασκηνίου. Η τοποθέτηση και θέση του εργαλείου βοήθειας δεν μπορεί να ελεγχθεί από χρήστες, προκαλώντας αδύνατη την πρόσβαση ορισμένων χρηστών μεγεθυντή οθόνης σε ουσιαστικά τμήματα του περιεχομένου της παραμέτρου title
, διότι το εργαλείο βοήθειας δεν μπορεί να εμφανιστεί πλήρως εντός της οθόνης προβολής.
Ορισμένοι πράκτορες χρήστη επιτρέπουν την πρόσβαση σε συμπληρωματικές πληροφορίες μέσω του μενού περιβάλλοντος. Για παράδειγμα, ο συνδυασμός πλήκτρων Shift+F10, που ακολουθείται από το P, θα εμφανίσει το περιεχόμενο παραμέτρου title
μαζί με άλλες συμπληρωματικές πληροφορίες στο Mozilla/Firefox.
Η προδιαγραφή HTML 4.01 εξηγεί ότι το κείμενο της παραμέτρου alt
θα εμφανιστεί όταν το στοιχείο δεν μπορεί να αποδοθεί κανονικά. Έτσι, οι οπτικοί πράκτορες χρήστη θα εμφανίσουν το κείμενο της παραμέτρου alt
όταν δεν εμφανίζονται οι εικόνες. Η παράμετρος title
προορίζεται για την παροχή πρόσθετων πληροφοριών. Οι πράκτορες χρήστη θα εμφανίσουν γενικά το κείμενο της παραμέτρου title
όταν το ποντίκι τοποθετηθεί πάνω από το στοιχείο που περιέχει την παράμετρο title
. Το Internet Explorer θα εμφανίσει το κείμενο alt
σε συμβάν mouse-over εάν δεν υπάρξει κείμενο title
. Οι εφαρμογές περιήγησης Firefox και Opera εμφανίζουν μόνο το κείμενο title
σε συμβάν mouse-over και δεν χρησιμοποιούν το κείμενο της παραμέτρου alt
για αυτό τον σκοπό. Έτσι, εάν θέλετε το κείμενο της παραμέτρου alt
να είναι ορατό σε συμβάν mouse-over, συμπεριλάβετε επίσης το κείμενο με χρήση της παραμέτρου title
.
Οι υποστηρικτικές τεχνολογίες παρέχουν διαφορετικά επίπεδα υποστήριξης για εκφώνηση της παραμέτρου title. Ορισμένα δεν περιλαμβάνουν χαρακτηριστικά που επιτρέπουν σε χρήστες να έχουν πρόσβαση σε πληροφορίες που παρέχονται μέσω της παραμέτρου title.
Το JAWS 7.0 και νεότερες εκδόσεις θα εκφωνήσει την τιμή των παραμέτρων title, ανάλογα με μια ρύθμιση του JAWS. Αυτή η ρύθμιση μπορεί να αλλάξει προσωρινά ή μόνιμα μέσα από το JAWS.
Το WindowEyes 5.5 και νεότερες εκδόσεις, έχει μια ειδική συντόμευση, ins-E, που θα εκφωνήσει πρόσθετες πληροφορίες, συμπεριλαμβανομένης της παραμέτρου title, για το στοιχείο με επισήμανση.
Η υλοποίηση αυτής της τεχνικής με την παράμετρο title
είναι επαρκής μόνο όταν η παράμετρος title
υποστηρίζει την προσβασιμότητα. Το περιεχόμενο της παραμέτρου title
χρειάζεται να είναι διαθέσιμο για όλους τους χρήστες πληκτρολογίου (όχι μόνο εκείνους με λογισμικό μετατροπής κειμένου σε ομιλία) προκειμένου η παράμετρος αυτή να υποστηρίζει την προσβασιμότητα.
Σκοπός αυτής της τεχνικής είναι να δείξει πώς χρησιμοποιείται μια παράμετρος title
σε στοιχείο anchor για την παροχή πρόσθετου κειμένου περιγραφής ενός συνδέσμου. Η παράμετρος title
χρησιμοποιείται για την παροχή πρόσθετων πληροφοριών, για να διασαφηνιστεί ή να περιγραφεί περαιτέρω ο σκοπός ενός συνδέσμου. Εάν οι συμπληρωματικές πληροφορίες που παρέχονται μέσω της παραμέτρου title
είναι κάτι που ο χρήστης θα πρέπει να γνωρίζει πριν ακολουθήσει τον σύνδεσμο, όπως μια ειδοποίηση, τότε θα πρέπει να παρέχονται στο κείμενο συνδέσμου αντί για την παράμετρο title
.
Λόγω των εκτεταμένων περιορισμών του πράκτορα χρήστη κατά την υποστήριξη της πρόσβασης στην παράμετρο title, οι συγγραφείς θα πρέπει να είναι προσεκτικοί κατά την εφαρμογή αυτής της τεχνικής. Για τον λόγο αυτό, προτιμάται η χρήση από τον συγγραφέα της τεχνικής Χρήσης CSS για την απόκρυψη τμήματος του κειμένου συνδέσμου (C7: Using CSS to hide a portion of the link text (CSS) ή της τεχνικής Παροχής κειμένου συνδέσμου που περιγράφει τον σκοπό ενός συνδέσμου για στοιχεία anchor (H30: Providing link text that describes the purpose of a link for anchor elements) (HTML) .
Παράδειγμα κώδικα:
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>
Σε HTML 4.01, η παράμετρος target="_blank"
μπορεί να χρησιμοποιηθεί σε στοιχείο anchor, για να υποδείξει ότι το URI που καθορίζεται από την παράμετρο href, θα ανοίξει σε νέο παράθυρο. Αυτό το παράδειγμα δείχνει τη χρήση της παραμέτρου title
του στοιχείου anchor για την παροχή πληροφοριών ότι ο σύνδεσμος θα ανοίξει σε νέο παράθυρο.
Παράδειγμα κώδικα:
<a href="http://example.com/subscribe.html"
target="_blank"
title="link opens in new window">
Subscribe to email notifications about breaking news
</a>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Εξετάστε τον πηγαίο κώδικα για στοιχεία anchor.
Για κάθε στοιχείο anchor με παράμετρο title
, ελέγξτε ότι η παράμετρος title
μαζί με το κείμενο συνδέσμου περιγράφει τον σκοπό του συνδέσμου.
Ελέγξτε ότι το #1 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η χρήση σημείων Unicode δεξιά προς αριστερά, για την παράκαμψη του αλγόριθμου διπλής κατεύθυνσης HTML όταν αυτός παράγει μη επιθυμητά αποτελέσματα. Αυτό μπορεί να είναι απαραίτητο, για παράδειγμα, όταν τοποθετούνται ουδέτεροι χαρακτήρες, όπως διαστήματα ή στίξη, μεταξύ διαφορετικών κειμένων διπλής κατεύθυνσης. Οι ιδέες που χρησιμοποιούνται σε αυτή την τεχνική περιγράφονται στην ενότητα "Τι πρέπει να γνωρίζετε για τον αλγόριθμο bidi και την εμβόλιμη επισημείωση" (What you need to know about the bidi algorithm and inline markup).
Σημεία Unicode δεξιά προς αριστερά και αριστερά προς δεξιά μπορούν να εισάγονται απευθείας ή μέσω οντοτήτων χαρακτήρων ή αναφορών αριθμητικών χαρακτήρων, όπως φαίνεται εδώ.
σημείο αριστερά προς δεξιά: ή (U+200E)
σημείο δεξιά προς αριστερά: ή (U+200F)
Λόγων του αλγόριθμου διπλής κατεύθυνσης (bidi), ένα πρόγραμμα επεξεργασίας πηγαίου κώδικα ενδέχεται να μην εμφανίζει οντότητες χαρακτήρων ή αναφορές αριθμητικών χαρακτήρων όπως αναμένεται.
Αυτό το παράδειγμα δείχνει μια αραβική φράση στη μέση μιας αγγλικής πρότασης. Το θαυμαστικό αποτελεί μέρος της αραβικής φράσης και πρέπει να εμφανιστεί στα αριστερά. Επειδή βρίσκεται μεταξύ αραβικών και λατινικών χαρακτήρων και η συνολική κατεύθυνση της παραγράφου είναι αριστερά προς δεξιά (LTR), ο αλγόριθμος διπλής κατεύθυνσης θα τοποθετήσει το θαυμαστικό στα δεξιά της Αραβικής φράσης.
Ο τίτλος είναι "Ù…ÙØªØ§Ø Ù…Ø¹Ø§ÙŠÙŠØ± الويب!" στα Αραβικά.
Η οπτικής σειράς έκδοση ASCII (κείμενο RTL με κεφαλαία γράμματα, LTR με πεζά):
ο τίτλος είναι "HCTIWS SDRADNATS BEW!" στα Αραβικά.
Η εισαγωγή σημείου Unicode δεξιά προς αριστερά στον κώδικα αμέσως μετά το θαυμαστικό, το τοποθετεί σωστά όταν εμφανίζετε το προβαλλόμενο κείμενο (δείτε παρακάτω). Μπορείτε να χρησιμοποιήσετε έναν χαρακτήρα "escape" ή τον (ορατό) χαρακτήρα ελέγχου για την εισαγωγή του σημείου δεξιά προς αριστερά.
Ο τίτλος είναι "Ù…ÙØªØ§Ø Ù…Ø¹Ø§ÙŠÙŠØ± الويب!â€" στα Αραβικά.
Έκδοση ASCII οπτικής σειράς:
ο τίτλος είναι "!HCTIWS SDRADNATS BEW" στα Αραβικά.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Συγγραφή τεχνικών για διεθνοποίηση XHTML & HTML: Καθορισμός γλώσσας περιεχομένου 1.0" (Authoring Techniques for XHTML & HTML Internationalization: Handling Bidirectional Text 1.0)
Εμβόλιμη ανάμειξη κατεύθυνσης κειμένου (Mixing text direction inline)
Προβλήματα με πηγαίο κείμενο διπλής κατεύθυνσης (Problems with bidirectional source text)
Εξετάστε την προέλευση για σημεία όπου το κείμενο αλλάζει κατεύθυνση
Όταν το κείμενο αλλάζει κατεύθυνση, ελέγξτε εάν ουδέτεροι χαρακτήρες, όπως διαστήματα ή στίξη, εμφανίζονται δίπλα στο κείμενο που αποδίδεται στη μη προεπιλεγμένη κατεύθυνση.
Όταν το #2 είναι αληθές και ο αλγόριθμος διπλής κατεύθυνσης HTML παράγει τη λανθασμένη τοποθέτηση των ουδέτερων χαρακτήρων, ελέγξτε εάν οι ουδέτεροι χαρακτήρες ακολουθούνται από σημεία Unicode δεξιά προς αριστερά ή αριστερά προς δεξιά που προκαλούν την τοποθέτηση ουδέτερων χαρακτήρων ως μερών των προηγούμενων χαρακτήρων.
Ελέγξτε ότι το #3 είναι αληθές.
applet
Έγγραφα HTML και XHTML που φορτώνουν Java applets όπου το applet
δεν είναι αποδοκιμαζόμενο.
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική δεν υποστηρίζεται καλά από υποστηρικτικές τεχνολογίες. Η προδιαγραφή HTML εξηγεί ότι τα εναλλακτικά κειμένου για applet θα προβάλλονται όταν το στοιχείο δεν μπορεί να αποδοθεί. Επομένως, τα εναλλακτικά κειμένου που συμπεριλαμβάνονται στο σώμα των στοιχείων applet
ενδέχεται να μην είναι διαθέσιμα σε χρήστες, εκτός εάν ο πράκτορας χρήστη είτε δεν υποστηρίζει ή έχει διαμορφωθεί για μη απόδοση των applet.
Τα IE 6 για Windows και Firefox 1.5 και Opera 9 για Windows, αντιμετωπίζουν την εναλλακτική κειμένου για στοιχείο applet διαφορετικά. Το IE θα προβάλλει το κείμενο σώματος του στοιχείου applet και όχι την παράμετρο alt. Τα Firefox και Opera θα εμφανίζουν την παράμετρο alt, αλλά όχι το κείμενο σώματος.
Παροχή ενός εναλλακτικού κειμένου για ένα applet μέσω της παραμέτρου alt για απόδοση ετικέτας σε ένα applet και παροχή του εναλλακτικού κειμένου στο σώμα του στοιχείου applet. Σε αυτήν την τεχνική, αμφότεροι οι μηχανισμοί απαιτούνται λόγω της μεταβλητής υποστήριξης της παραμέτρου alt και του κειμένου σώματος του applet από πράκτορες χρήστη.
Παράδειγμα κώδικα:
<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
tic-tac-toe game
</applet>
Εμφάνιση του πηγαίου κώδικα του στοιχείου applet
Ελέγξτε ότι το στοιχείο applet περιέχει μια παράμετρο alt με ένα εναλλακτικό κειμένου για το applet
Ελέγξτε ότι το στοιχείο applet περιέχει ένα εναλλακτικό κειμένου για το applet στο σώμα του στοιχείου applet
Οι έλεγχοι #2 και #3 είναι αληθείς.
Εφαρμόζεται σε περιεχόμενο που χρησιμοποιεί κουμπιά υποβολής εικόνας.
Αυτή η τεχνική σχετίζεται με:
Για στοιχεία εισαγωγής δεδομένων τύπου 'image', η παράμετρος alt
του στοιχείου input
χρησιμοποιείται για την παροχή μιας λειτουργικής ετικέτας. Αυτή η ετικέτα υποδεικνύει τη λειτουργία του κουμπιού, αλλά δεν επιχειρεί να περιγράψει την εικόνα. Η ετικέτα είναι ιδιαίτερα σημαντική εάν υπάρχουν πολλαπλά κουμπιά υποβολής στη σελίδα που οδηγούν σε διαφορετικά αποτελέσματα.
Το στοιχείο input
χρησιμοποιείται για τη δημιουργία πολλών ειδών στοιχείων ελέγχου φόρμας. Αν και το DTD των HTML και XHTML επιτρέπει την παράμετρο alt
σε όλα, πρέπει να χρησιμοποιηθεί μόνο στα κουμπιά υποβολής εικόνας. Η υποστήριξη των πρακτόρων χρήστη για αυτή την παράμετρο σε άλλους τύπους στοιχείων ελέγχου φόρμας δεν ορίζεται καλά και χρησιμοποιούνται άλλοι μηχανισμοί για την παροχή ετικέτας σε αυτά τα στοιχεία ελέγχου.
Ένα στοιχείο input
με παράμετρο alt
Παράδειγμα κώδικα:
<form action="http://example.com/prog/text-read" method="post">
<input type="image" name="submit" src="button.gif" alt="Submit" />
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για όλα τα στοιχεία εισαγωγής δεδομένων με τιμή "image" της παραμέτρου type, ελέγξτε για την παρουσία παραμέτρου alt.
Ελέγξτε ότι η παράμετρος alt υποδεικνύει τη λειτουργία του κουμπιού.
Τα #1 και #2 είναι αληθή
alt
σε στοιχεία εικόνων img
Εικόνες που χρησιμοποιούνται εντός των εγγράφων HTML.
Αυτή η τεχνική σχετίζεται με:
Όταν χρησιμοποιείται στοιχείο img
, προσδιορίστε μια εναλλακτική λύση συντόμου κειμένου με την παράμετρο alt
. Σημείωση. Η τιμή αυτής της παραμέτρου αναφέρεται ως "alt text".
Όταν μια εικόνα περιέχει λέξεις που είναι σημαντικές για την κατανόηση του περιεχομένου, το κείμενο alt θα πρέπει να περιλαμβάνει αυτές τις λέξεις. Αυτό θα επιτρέπει στο κείμενο alt να αναπαράγει την ίδια λειτουργία στη σελίδα, όπως στην εικόνα. Να σημειωθεί ότι δεν περιγράφει απαραίτητα τα οπτικά χαρακτηριστικά της ίδιας της εικόνας, αλλά πρέπει να μεταφέρει το ίδιο νόημα με την εικόνα.
Μια εικόνα σε έναν ιστότοπο παρέχει έναν σύνδεσμο προς ένα δωρεάν ενημερωτικό δελτίο. Η εικόνα περιέχει το κείμενο "Free newsletter. Get free recipes, news, and more. Learn more." Το κείμενο alt συμφωνεί με το κείμενο στην εικόνα.
Παράδειγμα κώδικα:
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more." />
Μια εικόνα σε έναν ιστότοπο απεικονίζει το σχέδιο ορόφου ενός κτιρίου. Η εικόνα σε έναν χάρτη εικόνας με κάθε δωμάτιο σε μια περιοχή αλληλεπιδραστικού χάρτη. Το κείμενο alt είναι "The building's floor plan. Select a room for more information about the purpose or content of the room." Η οδηγία "select a room" υποδηλώνει ότι η εικόνα είναι αλληλεπιδραστική.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε κάθε στοιχείο img
στο περιεχόμενο
Ελέγξτε ότι κάθε στοιχείο img
που μεταφέρει το νόημα, περιέχει μια παράμετρο alt
.
Εάν η εικόνα περιέχει λέξεις που είναι σημαντικές για την κατανόηση του περιεχομένου, οι λέξεις περιλαμβάνονται στο εναλλακτικό κειμένου.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Πίνακες δεδομένων HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να συσχετίζει επεξηγήσεις για πίνακες δεδομένων μέσω προγραμματισμού, όπου οι επεξηγήσεις παρέχονται στην παρουσίαση. Η επεξήγηση για έναν πίνακα είναι ένα αναγνωριστικό πίνακα και ενεργεί ως ένας τίτλος ή επικεφαλίδα για τον πίνακα.
Το στοιχείο caption
είναι η κατάλληλη επισημείωση για τέτοιο κείμενο και διασφαλίζει ότι το αναγνωριστικό πίνακα παραμένει συσχετισμένο με τον πίνακα, συμπεριλαμβανομένης της οπτικής πλευράς (εξ ορισμού). Επιπλέον, η χρήση του στοιχείου caption
επιτρέπει σε λογισμικό ανάγνωσης οθόνης να πλοηγηθεί απευθείας στην επεξήγηση για έναν πίνακα, εάν υπάρχει ένας.
Το στοιχείο caption
μπορεί να χρησιμοποιηθεί είτε ο πίνακας περιλαμβάνει παράμετρο summary
, είτε όχι. Το στοιχείο caption
προσδιορίζει τον πίνακά, ενώ η παράμετρος summary
δίνει μια επισκόπηση του σκοπού ή εξηγεί τον τρόπο πλοήγησης στον πίνακα. Εάν χρησιμοποιούνται και τα δύο, το στοιχείο caption
δεν πρέπει να έχει διπλότυπες πληροφορίες στην παράμετρο summary
.
Αν και το WCAG 2.0 δεν απαγορεύει τη χρήση πινάκων διάταξης, συνιστώνται διατάξεις που βασίζονται σε CSS προκειμένου να διατηρείται η καθορισμένη σημασιολογική έννοια των στοιχείων table
HTML και XHTML και να διατηρείται η πρακτική κωδικοποίησης διαχωρισμού της παρουσίασης από το περιεχόμενο. Εάν ένας πίνακας χρησιμοποιείται για διάταξη, το στοιχείο caption
δεν χρησιμοποιείται. Ο σκοπός ενός πίνακα διάταξης είναι ο έλεγχος της τοποθέτησης περιεχομένου. Ο ίδιος ο πίνακας είναι "διάφανος" στον χρήστη. Ένα στοιχείο caption
θα "έσπαγε" τη διαφάνεια δίνοντας προσοχή στον πίνακα.
Παράδειγμα κώδικα:
<table>
<caption>Schedule for the week of March 6</caption>
...</table>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε για πίνακες διάταξης: καθορίστε εάν το περιεχόμενο έχει σχέση με άλλο περιεχόμενο τόσο στη στήλη, όσο και στη γραμμή.
Εάν "όχι", ο πίνακας είναι ένας πίνακας διάταξης.
Εάν "όχι", ο πίνακας είναι ένας πίνακας δεδομένων.
Εάν ο πίνακας είναι ένας πίνακας διάταξης, ελέγξτε ότι ο πίνακας δεν περιλαμβάνει ένα στοιχείο caption
.
Εάν ο πίνακας είναι ένας πίνακας δεδομένων και περιλαμβάνει ένα στοιχείο caption
, ελέγξτε ότι το caption
προσδιορίζει τον πίνακα.
Εάν υπάρχει και παράμετρος summary
και στοιχείο caption
για αυτόν τον πίνακα δεδομένων, ελέγξτε ότι η summary
δημιουργεί διπλότυπο του caption
.
Για πίνακες διάταξης, το #2 είναι αληθές.
Για πίνακες δεδομένων, τα #3 και #4 είναι αληθή.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ορισμών για λέξεις ή φράσεις με παρουσίασή τους σε λίστα ορισμών. Η λίστα έχει σήμανση με χρήση του στοιχείου dl
. Εντός της λίστας, κάθε όρος τοποθετείται σε ξεχωριστό στοιχείο dt
και ο ορισμός τους μεταβαίνει στο στοιχείο dd
που το ακολουθεί αμέσως μετά. Η παράμετρος title
μπορεί να χρησιμοποιηθεί για την παροχή πρόσθετων πληροφοριών σχετικά με τη λίστα ορισμών.
Χρησιμοποιώντας τα στοιχεία dl
, dt
και dd
, διασφαλίζεται ότι οι σχέσεις μεταξύ όρων και των ορισμών τους διατηρείται εάν αλλάξει η μορφή της παρουσίασης και ότι η λίστα όρων και ορισμών λαμβάνεται ως μία μονάδα στο χειρισμό της.
Οι λίστες ορισμών είναι πιο εύκολες στη χρήση όταν οι ορισμοί τοποθετούνται σε αλφαβητική σειρά. Οι λίστες ορισμών χρησιμοποιούνται κατά κανόνα σε γλωσσάρι.
Μια λίστα ορισμών ναυτικών όρων που χρησιμοποιούνται σε έναν ιστότοπο για ιστιοπλοΐα
Παράδειγμα κώδικα:
<dl title="Nautical terms">
<dt>Knot</dt>
<dd>
<p>A <em>knot</em> is a unit of speed equaling 1
nautical mile per hour (1.15 miles per hour or 1.852
kilometers per hour).</p>
</dd>
<dt>Port</dt>
<dd>
<p><em>Port</em> is the nautical term (used on
boats and ships) that refers to the left side
of a ship, as perceived by a person facing towards
the bow (the front of the vessel).</p>
</dd>
<dt>Starboard</dt>
<dd>
<p><em>Starboard</em> is the nautical term (used
on boats and ships) that refers to the right
side of a vessel, as perceived by a person
facing towards the bow (the front of the vessel).</p>
</dd>
</dl>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε σύνολο λέξεων και τους ορισμούς τους που παρουσιάζονται ως λίστα:
Ελέγξτε ότι η λίστα περιέχεται σε στοιχείο dl
.
Ελέγξτε ότι κάθε λέξη που ορίζεται στη λίστα, περιέχεται σε στοιχείο dt
.
Ελέγξτε ότι ο ορισμός για κάθε λέξη εμφανίζεται στο στοιχείο dd
αμέσως μετά το στοιχείο dt
της λέξης.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να χρησιμοποιηθεί η επισημείωση επικεφαλίδας HTML και XHTML για τη μεταφορά της δομής του περιεχομένου.
Η χρήση επικεφαλίδων μόνο για την αλλαγή της εμφάνισης του κειμένου δεν μεταφέρει την οργάνωση του περιεχομένου και μπορεί να προκαλέσει σύγχυση σε χρήστες που χρησιμοποιούν επικεφαλίδες για να αντιληφθούν τη δομή ή βασίζονται σε αυτές για την πλοήγηση. Αντίθετα, κατά την εφαρμογή της μορφής έντονης γραφής, ή ακόμα "class=heading", με αποτέλεσμα την οπτική απεικόνιση μιας επικεφαλίδας, οι υποστηρικτικές τεχνολογίες δεν θα αναγνωρίσουν το κείμενο αυτό ως επικεφαλίδες.
Σε αυτό το παράδειγμα, το κύριο περιεχόμενο της σελίδας είναι η μεσαία στήλη μιας σελίδας 3 στηλών. Ο τίτλος του κύριου περιεχομένου συμφωνεί με τον τίτλο της σελίδας και επισημαίνεται ως h1
, αν και δεν είναι το πρώτο στοιχείο στη σελίδα. Το περιεχόμενο στην πρώτη και τρίτη στήλη είναι μικρότερης σημασίας και επισημαίνεται ως h2
.
Παράδειγμα κώδικα:
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<div class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</div>
<!-- main contents -->
<div class="main">
<h1>Stock Market up today</h1>
<!-- article text here -->
</div>
<!-- right panel -->
<div class="left-nav">
<h2>Related links</h2>
<!-- content here -->
</div>
</body>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι χρησιμοποιείται επισημείωση επικεφαλίδας όταν το περιεχόμενο είναι επικεφαλίδα
Ελέγξτε ότι δεν χρησιμοποιείται επισημείωση επικεφαλίδας όταν το περιεχόμενο δεν είναι επικεφαλίδα
Οι έλεγχοι #1 και #2 είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να συσχετίσει κάθε κελί δεδομένων (σε πίνακα δεδομένων) με τις κατάλληλες κεφαλίδες. Αυτή η τεχνική προσθέτει παράμετρο headers
σε κάθε κελί δεδομένων (στοιχείο td
). Προσθέτει επίσης παράμετρο id
σε κάθε κελί που χρησιμοποιείται ως κεφαλίδα για άλλα κελιά. Η παράμετρος headers
ενός κελιού περιέχει μια λίστα παραμέτρων id
των συσχετισμένων κελιών κεφαλίδας. Εάν υπάρχουν περισσότερες από μία παραμέτρους id
, χωρίζονται με διαστήματα.
Αυτή η τεχνική χρησιμοποιείται όταν κελιά δεδομένων συσχετίζονται με περισσότερες από μία κεφαλίδα γραμμής ή/και στήλης. Αυτό επιτρέπει σε εφαρμογές ανάγνωσης οθόνης να εκφωνήσουν τις κεφαλίδες που συσχετίζονται με κάθε κελί δεδομένων, όταν οι σχέσεις είναι υπερβολικά περίπλοκες για να προσδιοριστούν με χρήση μόνο του στοιχείου th
ή του στοιχείου th
με την παράμετρο scope
. Η χρήση αυτής της τεχνικής κάνει επίσης αντιληπτές τις περίπλοκες σχέσεις όταν αλλάζει η μορφή παρουσίασης.
Αυτή η τεχνική δεν συνιστάται για πίνακες διάταξης καθώς η χρήση της υποδηλώνει σχέση μεταξύ κελιών που δεν έχουν κάποιο νόημα, όταν χρησιμοποιούνται πίνακες για διάταξη.
Παράδειγμα κώδικα:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Πληροφορίες κεφαλίδας με κελιά δεδομένων" (header information with data cells)
Ελέγξτε για πίνακες διάταξης: καθορίστε εάν το περιεχόμενο έχει σχέση με άλλο περιεχόμενο τόσο στη στήλη, όσο και στη γραμμή. Εάν "όχι", ο πίνακας είναι ένας πίνακας διάταξης. Εάν "όχι", ο πίνακας είναι ένας πίνακας δεδομένων.
Για πίνακες δεδομένων, ελέγξτε ότι κάθε κελί που είναι συσχετισμένο με περισσότερες από μία κεφαλίδες γραμμής ή/και στήλης περιέχει μια παράμετρο headers
που εμφανίζει σε λίστα την παράμετρο id
για όλες τις συσχετισμένες κεφαλίδες με αυτό το κελί.
Για πίνακες δεδομένων όπου κάθε κελί περιέχει μια παράμετρο id
ή headers
,
Ελέγξτε ότι κάθε id
που εμφανίζεται στην παράμετρο headers
του κελιού δεδομένων συμφωνεί με την παράμετρο id
ενός κελιού που χρησιμοποιείται ως στοιχείο header
Ελέγξτε ότι η παράμετρος headers
ενός κελιού δεδομένων περιέχει την παράμετρο id
όλων των συσχετισμένων κεφαλίδων με το κελί δεδομένων
Ελέγξτε ότι όλα τα αναγνωριστικά είναι μοναδικά (δηλαδή, δεν υπάρχουν δύο στοιχεία στη σελίδα με το ίδιο αναγνωστικό)
Εάν ο πίνακας είναι πίνακας διάταξης, κανένα κελί δεν περιέχει παραμέτρους headers
ή id
Εάν ο πίνακας είναι πίνακας δεδομένων και κάθε κελί περιέχει μια παράμετρο id
, οι έλεγχοι #3.1, #3.2 και #3.3 είναι αληθείς.
Εάν ο πίνακας είναι πίνακας δεδομένων και κάθε κελί είναι συσχετισμένο με περισσότερες από μία κεφαλίδες γραμμής ή/και στήλης, ο έλεγχος #2 είναι αληθής.
Στοιχεία ελέγχου HTML, XHTML που χρησιμοποιούν εξωτερικές ετικέτες
Αυτή η τεχνική σχετίζεται με:
Οι προδιαγραφές HTML και XHTML επιτρέπουν έμμεσες και ρητές ετικέτες. Ωστόσο, ορισμένες υποστηρικτικές τεχνολογίες δεν χειρίζονται σωστά έμμεσες ετικέτες (για παράδειγμα, <label>First name <input type="text" name="firstname"></label>
).
Το JAWS 7.10 ελέγχθηκε σε Windows XP με Internet Explorer 6.0 και Firefox 1.5. Διαβάζει την ετικέτα για ρητές και έμμεσες ετικέτες πεδίων κειμένου, τόσο σε κατάσταση λειτουργίας δείκτη εικονικού Η/Υ, όσο και ανάγνωσης φορμών. Στην κατάσταση φορμών δεν διαβάζει την ετικέτα για έμμεσές ετικέτες σε τετράγωνα επιλογής και ραδιοπεδία.
Το WindowEyes 5.5 ελέγχθηκε σε Windows XP με Internet Explorer 6.0 και Firefox 1.5. Θα εκφωνεί πάντα την ετικέτα για πεδίο φόρμας ρητής ετικέτας. Δεν εκφωνεί την ετικέτα για στοιχείο ελέγχου φόρμας έμμεσης ετικέτας στην κατάσταση ενεργούς περιήγησης, αλλά εκφωνεί την έμμεση ετικέτα όταν γίνεται μετάβαση μεταξύ στοιχείων ελέγχου στην κατάσταση ανενεργούς περιήγησης.
Οι πράκτορες χρήστη εμφανίζουν ένα εργαλείο βοήθειας όταν το ποντίκι αφήνεται πάνω από ένα στοιχείο input
που περιέχει την παράμετρο title
. Οι παράμετροι title εκτίθενται σε υποστηρικτική τεχνολογία και εμφανίζονται ως εργαλεία βοήθειας σε πολλά προγράμματα περιήγησης γραφικών. Τα εργαλεία βοήθειας δεν μπορούν να ενεργοποιηθούν μέσω του πληκτρολογίου, έτσι αυτές οι πληροφορίες ενδέχεται να μην είναι διαθέσιμες για χρήστες πληκτρολογίου με όραση.
Εάν δεν υπάρχει διαθέσιμη παράμετρος label
, τα JAWS και Window-Eyes εκφωνούν την παράμετρο title
όταν το στοιχείο ελέγχου φόρμας επισημαίνεται
Το JAWS 6.0 και νεότερες εκδόσεις μπορούν να ρυθμιστούν για εκφώνηση και των δύο παραμέτρων label
και title
, όταν τα δύο στοιχεία είναι διαφορετικά. Όμως, πολύ λίγοι γνωρίζουν αυτή τη ρύθμιση.
Το WindowEyes 5.5 έχει μια ειδική συντόμευση, ins-E, που θα εμφανίσει πρόσθετες πληροφορίες, συμπεριλαμβανομένης της παραμέτρου title, για το στοιχείο με επισήμανση.
Σκοπός αυτής της τεχνικής είναι να χρησιμοποιηθεί το στοιχείο label
για τη ρητή συσχέτιση ενός στοιχείου ελέγχου φόρμας με ετικέτα. Ένα στοιχείο label
επισυνάπτεται με το συγκεκριμένο στοιχείο ελέγχου φόρμας μέσω της χρήσης της παραμέτρου for
. Η τιμή της παραμέτρου for
πρέπει να είναι η ίδια με την τιμή της παραμέτρου id
στο στοιχείο ελέγχου φόρμας.
Η παράμετρος id
ίσως έχει την ίδια τιμή με την παράμετρο name
, αλλά πρέπει να παρασχεθούν και οι δύο και η id
πρέπει να είναι μοναδική στην Ιστοσελίδα.
Αυτή η τεχνική είναι επαρκής για τα κριτήρια επιτυχίας 1.1.1, 1.3.1 και 4.1.2, είτε είναι ορατό το στοιχείο label
ή όχι. Δηλαδή, ενδέχεται να είναι σε απόκρυψη μέσω CSS. Ωστόσο, για το κριτήριο επιτυχίας 3.3.2 το στοιχείο label
πρέπει να είναι ορατό καθώς παρέχει υποστήριξη σε όλους τους χρήστες που χρειάζονται βοήθεια για την κατανόηση του σκοπού του πεδίου.
Να σημειωθεί ότι το στοιχείο label
είναι τοποθετημένο μετά τα στοιχεία input
των type="checkbox"
και type="radio"
.
Σημείωση 1:Στοιχεία που χρησιμοποιούν ετικέτες ρητού συσχετισμού, είναι:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
Σημείωση 2:Το στοιχείο label
δεν χρησιμοποιείται για τα ακόλουθα καθώς οι ετικέτες για αυτά τα στοιχεία παρέχονται μέσω της παραμέτρου value (για κουμπιά υποβολής και επαναφοράς), της παραμέτρου alt (για κουμπιά εικόνας) ή το ίδιο το περιεχόμενο στοιχείου (κουμπί).
Κουμπιά υποβολής και εκκαθάρισης (input type="submit"
ή input type="reset"
)
Κουμπιά εικόνας (input type="image"
)
Κρυφά πεδία εισαγωγής δεδομένων (input type="hidden"
)
Κουμπιά αρχείου εντολών (στοιχεία button
ή <input type="button">
)
Το πεδίο κειμένου στο παράδειγμα παρακάτω έχει τη ρητή ετικέτα "Όνομα:". Η παράμετρος for
του στοιχείου label
συμφωνεί με την παράμετρο id
του στοιχείου input
.
Παράδειγμα κώδικα:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
Παράδειγμα κώδικα:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
Μικρή, σχετική ομάδα ραδιοπλήκτρων, με σαφή περιγραφή και ετικέτες για κάθε μεμονωμένο στοιχείο.
Σημείωση: Για την παροχή σαφών συσχετισμών και οδηγιών για ένα μεγάλο σύνολο σχετικών ραδιοπλήκτρων, θα πρέπει να εξεταστεί η τεχνική Παροχής περιγραφής ομάδων στοιχείων ελέγχου φόρμας με χρήση στοιχείων fieldset και legend (H71: Providing a description for groups of form controls using fieldset and legend elements ).
Παράδειγμα κώδικα:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για όλα τα στοιχεία input
τύπου text
, file
ή password
, για όλα τα στοιχεία textareas
και για όλα τα στοιχεία select
στην Ιστοσελίδα:
Ελέγξτε ότι υπάρχει ένα στοιχείο label
που προσδιορίζει τον σκοπό του στοιχείου ελέγχου πριν το στοιχείο input
Ελέγξτε ότι η παράμετρος for
για το στοιχείο label
συμφωνεί με την παράμετρο id του στοιχείου input
Ελέγξτε ότι το στοιχείο label
είναι ορατό.
Για όλα τα στοιχεία input
τύπου λασίου ελέγχου ή ραδιοπλήκτρου στην Ιστοσελίδα:
Ελέγξτε ότι υπάρχει ένα στοιχείο label
που προσδιορίζει τον σκοπό του στοιχείου ελέγχου ύστερα από το στοιχείο input
Ελέγξτε ότι η παράμετρος for
για το στοιχείο label
συμφωνεί με την παράμετρο id
του στοιχείου input
Ελέγξτε ότι το στοιχείο label
είναι ορατό.
Οι έλεγχοι #1 και #2 είναι αληθείς. Για το κριτήριο επιτυχίας 3.3.2, ο έλεγχος #3 είναι αληθής.
Έγγραφα HTML και XHTML που περιλαμβάνουν εικόνες που δεν μπορούν να περιγραφούν σε μια εναλλακτική λύση σύντομου κειμένου.
Αυτή η τεχνική σχετίζεται με:
Μερικές παλαιότερες υποστηρικτικές τεχνολογίες δεν υποστηρίζουν την παράμετρο longdesc
.
Σκοπός αυτή της τεχνικής είναι η παροχή πληροφοριών σε αρχείο που καθορίζεται από την παράμετρο longdesc
όταν μια εναλλακτική λύση σύντομου κειμένου δεν μεταφέρει κατάλληλα τη λειτουργία ή τις πληροφορίες στην εικόνα. Η παράμετρος longdesc
είναι ένα Ενιαίο Αναγνωριστικό Πόρων (URI), ο στόχος του οποίου περιέχει μια εκτεταμένη περιγραφή του μη κειμενικού περιεχομένου
Παράδειγμα κώδικα:
<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το στοιχείο img
έχει μια παράμετρο longdesc.
Ελέγξτε ότι η τιμή της παραμέτρου longdesc
είναι ένα έγκυρο URI ενός υφιστάμενου πόρου.
Ελέγξτε ότι το περιεχόμενο στον στόχο αυτού του URI περιέχει μια μεγάλη περιγραφή, η οποία περιγράφει το αρχικό μη κειμενικό περιεχόμενο που σχετίζεται με αυτή.
Τα στοιχεία από #1 έως 3 είναι όλα αληθή
noembed
με embed
Έγγραφα που φορτώνουν πρόσθετες λειτουργίες με το στοιχείο embed
.
Αυτή η τεχνική σχετίζεται με:
Σημείωση: Αν και το στοιχείο embed
υποστηρίζεται ευρέως στους πράκτορες χρήστη, δεν είναι έγκυρο μέρος της HTML ή XHTML.
Σκοπός αυτής της τεχνικής είναι η παροχή εναλλακτικού περιεχομένου για το στοιχείο embed
σε στοιχείο noembed
. Το noembed
αποδίδεται μόνο εάν δεν υποστηρίζεται το embed
. Ενώ μπορεί να τοποθετηθεί οπουδήποτε στη σελίδα, μια καλή ιδέα είναι να περιληφθεί ως θυγατρικό στοιχείο του embed
, έτσι ώστε να είναι σαφές σε υποστηρικτικές τεχνολογίες ότι ένα εναλλακτικό κειμένου είναι συσχετισμένο με το στοιχείο embed
που περιγράφει.
Παράδειγμα κώδικα:
<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
</noembed>
</embed>
Παράδειγμα κώδικα:
<embed src="moviename.swf" width="100" height="80"
pluginspage="http://example.com/shockwave/download/" />
<noembed>
<img alt="Still from Movie" src="moviename.gif"
width="100" height="80" />
</noembed>;
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε εάν το στοιχείο embed
έχει θυγατρικό στοιχείο noembed
Ελέγξτε εάν το στοιχείο embed
έχει στοιχείο noembed
που το ακολουθεί ακριβώς μετά.
Το #1 είναι αληθές ή το #2 είναι αληθές.
HTML, XHTML
Αυτή η τεχνική σχετίζεται με:
Οι υποστηρικτικές τεχνολογίες περιλαμβάνουν μη συνεκτική υποστήριξη για διάφορες χρήσεις της παραμέτρου type
που χρησιμοποιείται για να υποδείξει στυλ αρίθμησης και κουκίδων.
Σκοπός αυτής της τεχνικής είναι να δημιουργήσει λίστες σχετικών στοιχείων με χρήση κατάλληλων στοιχείων λίστας για τους σκοπούς τους. Το στοιχείο ol
χρησιμοποιείται όταν η λίστα είναι ταξινομημένη και το στοιχείο ul
χρησιμοποιείται όταν η λίστα δεν είναι ταξινομημένη. Οι λίστες ορισμών (dl
) χρησιμοποιούνται για να ομαδοποιήσουν όρους με τους ορισμούς τους. Αν και η χρήση αυτής της σήμανσης μπορεί να κάνει πιο ευανάγνωστες τις λίστες, η επισημείωση δεν χρειάζεται για όλες τις λίστες. Για παράδειγμα, προτάσεις που περιέχουν λίστες που διαχωρίζονται με κόμμα μπορεί να μην χρειάζονται επισημείωση λίστας.
Όταν χρησιμοποιείται επισημείωση που μορφοποιεί στοιχεία οπτικά ως λίστα αλλά δεν υποδεικνύει τη σχέση λίστας, οι χρήστες ίσως δυσκολευτούν να εκτελέσουν πλοήγηση στις πληροφορίες. Ένα παράδειγμα τέτοιας οπτικής μορφοποίησης περιλαμβάνει αστερίσκους στο περιεχόμενο στην αρχή κάθε στοιχείου λίστας και χρήση στοιχείων <br>
για διαχωρισμό των στοιχείων της λίστας.
Μερικές υποστηρικτικές τεχνολογίες επιτρέπουν σε χρήστες να μεταβούν από λίστα σε λίστα ή από στοιχείο σε στοιχείο. Τα φύλλα στυλ μπορούν να χρησιμοποιηθούν για αλλαγή της παρουσίασης των λιστών με παράλληλη διατήρησης της ακεραιότητάς τους.
Αυτό το παράδειγμα χρησιμοποιεί μια ταξινομημένη λίστα για να δείξει την ακολουθία των βημάτων σε μια διαδικασία.
Παράδειγμα κώδικα:
<ol>
<li>Mix eggs and milk in a bowl.</li>
<li>Add salt and pepper.</li>
</ol>
Αυτό το παράδειγμα δείχνει μια μη ταξινομημένη λίστα των στοιχείων που θα αγοραστούν στο κατάστημα.
Παράδειγμα κώδικα:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>
Αυτό το παράδειγμα χρησιμοποιεί μια λίστα ορισμών για να ομαδοποιήσει έναν ορισμό με τον όρο που ορίζεται.
Παράδειγμα κώδικα:
<dl>
<dt>blink</dt>
<dd>turn on and off between .5 and 3 times per second
</dd>
</dl>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Μη ταξινομημένες λίστες (UL), ταξινομημένες λίστες (OL) Και στοιχεία λίστας (LI)" (Unordered lists (UL), ordered lists (OL), and list items (LI))
HTML 4.01 Λίστες ορισμών:τα στοιχεία DL, DT και DD (Definition lists: the DL, DT, and DD elements)
Ελέγξτε ότι το περιεχόμενο που έχει οπτική εμφάνιση λίστας (με ή χωρίς κουκίδες) σημειώνεται ως μη ταξινομημένη λίστα.
Ελέγξτε ότι το περιεχόμενο που έχει οπτική εμφάνιση λίστας με αρίθμηση σημειώνεται ως ταξινομημένη λίστα.
Ελέγξτε ότι το περιεχόμενο είναι σημειωμένο ως λίστα ορισμών όταν οι όροι και οι ορισμοί τους παρουσιάζονται με τη μορφή λίστας.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Μερικά σημασιολογικά στοιχεία δεν υποστηρίζονται από υποστηρικτικές τεχνολογίες. Στοιχεία και παράμετροι που είναι γνωστά για την περιορισμένη υποστήριξή τους, περιλαμβάνουν τα code
, del
, dfn
, ins
, kbd
, s
, sub
, sup
, tt
και q
. Για αυτά τα στοιχεία, οι συγγραφείς ενθαρρύνονται να εξετάζουν εάν θα τα χρησιμοποιούν με τρόπο που απαιτεί από χρήστες να είναι σε θέση να έχουν πρόσβαση σε σημασιολογική έννοια της επισημείωσης, ώστε να κατανοούν το περιεχόμενο και όπου η κατανόηση της σημασιολογίας είναι απαραίτητη, να παρέχουν αυτές τις πληροφορίες σε κείμενο.
Τα περισσότερα προγράμματα ανάγνωσης οθόνης δεν παρέχουν αυτόματες ειδοποιήσεις σχετικά με τα στοιχεία em
, strong
, b
ή i
.
Το JAWS περιέχει υποστήριξη για blockquote
και cite
. Το WindowEyes περιέχει υποστήριξη για blockquote
, q
και cite
.
Τα Firefox 1.0 (Windows) και νεότερες εκδόσεις, Opera 7.54 (Windows) και νεότερες εκδόσεις, Mozilla 1.7.3 (Windows) και νεότερες εκδόσεις, αυτομάτως παράγουν εισαγωγικά γύρω από τα στοιχεία q
, αλλά όχι το Internet Explorer 6 για Windows.
Τα Firefox 1.0 (Windows) και νεότερες εκδόσεις, Opera 7.54 (Windows) και νεότερες εκδόσεις, Mozilla 1.7.3 (Windows) και νεότερες εκδόσεις, αυτομάτως παράγουν εισαγωγικά γύρω από τα στοιχεία q, αλλά όχι το Internet Explorer 6 για Windows.
Σκοπός αυτής της τεχνικής είναι να δείξει πώς μπορεί να χρησιμοποιηθεί η σημασιολογική επισημείωση για σημείωση ειδικού ή κειμένου με έμφαση, ώστε να είναι δυνατός ο καθορισμός του μέσω προγραμματισμού. Η χρήση σημασιολογικής επισημείωσης για σημείωση ειδικού ή κειμένου με έμφαση παρέχει δομή στο έγγραφο. Οι πράκτορες χρήστη μπορούν έπειτα να κάνουν αντιληπτή τη δομή στον χρήστη, για παράδειγμα χρησιμοποιώντας μια διαφορετική οπτική παρουσίαση για διαφορετικούς τύπους δομών, ή μια διαφορετική φωνή ή τόνο σε μια ακουστική παρουσίαση.
Οι περισσότεροι πράκτορες χρήστη θα διακρίνουν οπτικά κείμενο που έχει προσδιοριστεί με σημασιολογική επισημείωση. Μερικές υποστηρικτικές τεχνολογίες παρέχουν έναν μηχανισμό καθορισμού των χαρακτηριστικών περιεχομένου που έχουν δημιουργηθεί με χρήση της κατάλληλη σημασιολογικής επισημείωσης.
Δείτε τα αποδιδόμενα παραδείγματα σημασιολογικού κειμένου (rendered examples of semantic text).
Αυτό το παράδειγμα δείχνει πώς χρησιμοποιούνται τα στοιχεία em
και strong
για να δοθεί έμφαση σε κείμενο. Τα στοιχεία em
και strong
έχουν σχεδιαστεί για να υποδεικνύουν δομική έμφαση που μπορεί να αποδοθεί σε μια ποικιλία τρόπων (αλλαγές στυλ γραμματοσειράς, αλλαγές διακύμανσης φωνής, κ.λπ.).
Παράδειγμα κώδικα:
...What she <em>really</em> meant to say was, "This is not ok,
it is <strong>excellent</strong>"!...
Αυτό το παράδειγμα δείχνει τη χρήση του στοιχείου blockquote
για σήμανση εκτεταμένων παραθεμάτων που μπορεί να απαιτούν αλλαγή παραγράφου. Δείχνει ακόμα τη χρήση του στοιχείου cite
για τον προσδιορισμό μιας παραπομπής.
Παράδειγμα κώδικα:
<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
<blockquote>
<p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell, would find the first violets and lilies.
There, too, after a fit of temper, I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>
Ακολουθεί η χρήση του στοιχείου q
για τη σήμανση ενός πιο σύντομου παραθέματος. Εισαγωγικά παρέχονται γύρω από το στοιχείο q
καθώς πολλοί πράκτορες χρήστη δεν υποστηρίζουν αυτό το στοιχείο ακόμα και έτσι δεν το προβάλλουν κατάλληλα (δείτε σημειώσεις UA). Οι κανόνες CSS ακύρωσης της αυτόματης παραγωγής εισαγωγικών, παρέχονται για εκείνους τους πράκτορες χρήστη που υποστηρίζουν το στοιχείο q
, για να τους αποτρέψουν από την παραγωγή εισαγωγικών αυτόματα επιπλέον των εισαγωγικών που παρέχονται από τον συγγραφέα, με αποτέλεσμα περιεχόμενο διπλών εισαγωγικών. Στο μέλλον, όταν το στοιχείο q
υποστηρίζεται περισσότερο ευρέως, η ανάγκη παροχής εισαγωγικών και ακύρωσης των εισαγωγικών που παράγονται από το πρόγραμμα περιήγησης θα καταργηθεί.
Παράδειγμα κώδικα:
q:before { content: ""; }
q:after { content: ""; }
Παράδειγμα κώδικα:
<p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world.</q>"</p>
Οι εκθέτες και οι δείκτες δημιουργούνται με χρήση των στοιχείων sup
και sub
.
Παράδειγμα κώδικα:
<p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 Στοιχεία φράσης:EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR και ACRONYM (Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM)
HTML 4.01 Παραθέματα:Τα στοιχεία BLOCKQUOTE και Q (Quotations: The BLOCKQUOTE and Q elements)
HTML 4.01 Δείκτες και εκθέτες:τα στοιχεία SUB και SUP (Δείκτες και εκθέτες: the SUB and SUP elements)
Διόρθωση εισαγωγικών στο Internet Explorer (Fixing Quotes in Internet Explorer)
Εξετάστε το περιεχόμενο για πληροφορίες που μεταφέρονται μέσω παραλλαγών στην παρουσίαση του κειμένου.
Ελέγξτε ότι η κατάλληλη σημασιολογική επισημείωση (όπως em, strong, cite, blockquote, quote, sub
και sup
) έχει χρησιμοποιηθεί για τη σήμανση του κειμένου που μεταφέρει πληροφορίες μέσω παραλλαγών σε κείμενο.
Ελέγξτε ότι το #2 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει πώς ομαδοποιούνται σύνδεσμοι σε λογικά σύνολα. Όταν σύνδεσμοι ομαδοποιούνται σε λογικά σύνολα (για παράδειγμα, σε μια γραμμή πλοήγησης ή κύριο μενού που εμφανίζεται σε κάθε σελίδα ενός ιστότοπου), πρέπει να έχουν σήμανση ως μονάδα. Οι γραμμές πλοήγησης είναι συνήθως το πρώτο πράγμα που συναντά κανείς σε μια σελίδα. Άτομα με όραση μπορούν να συχνά να αγνοούν μέρη της πλοήγησης και να ξεκινούν την ανάγνωση του περιεχομένου της σελίδας. Κάποιος που χρησιμοποιεί μια εφαρμογή ανάγνωσης οθόνης πρέπει πρώτα να ακούσει το κείμενο κάθε συνδέσμου στη γραμμή πλοήγησης πριν διαβάσει το περιεχόμενο που τον ενδιαφέρει Υπάρχουν αρκετοί τρόποι για τη σήμανση περιεχομένου, έτσι ώστε ο χρήστης εφαρμογής ανάγνωσης οθόνης να μπορεί να μεταπηδήσει πάνω από τη γραμμή πλοήγησης και να αποφύγει την ανάγνωση όλων των συνδέσμων.
Ομαδοποιήστε συνδέσμους με έναν από τους ακόλουθους μηχανισμούς (με φθίνουσα σειρά προτίμησης):
ul
ή ol
map
Σε αυτό το παράδειγμα, οι σύνδεσμοι ομαδοποιούνται με χρήση των στοιχείων ul
και li
.
Παράδειγμα κώδικα:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><p><a href="kitchen.html">Kitchen</a></p></li>
<li><p><a href="bedbath.html">Bed & Bath</a></p></li>
<li><p><a href="dining.html">Fine Dining</a></p></li>
<li><p><a href="lighting.html">Lighting</a></p></li>
<li><p><a href="storage.html">Storage</a><li><p>
</ul>
Είναι δυνατή η χρήση CSS για να δοθεί στυλ στα στοιχεία λίστας, έτσι ώστε αυτή η τεχνική να μπορεί να χρησιμοποιηθεί σε μια ποικιλία οπτικών εμφανίσεων.
Ακολουθεί ένα στυλ που αφαιρεί τις κουκίδες λίστας και την αριστερή απόσταση που δημιουργεί την εσοχή και τοποθετεί τα μεμονωμένα στοιχεία λίστας σε οριζόντιο ροή.
Παράδειγμα κώδικα:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}
Αυτό το στυλ αφαιρεί τις κουκίδες λίστας και την αριστερή απόσταση και εμφανίζει τα στοιχεία σε κινητό μπλοκ.
Παράδειγμα κώδικα:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}
Σε αυτό το παράδειγμα, το στοιχείο map
ομαδοποιεί ένα σύνολο συνδέσμων, η παράμετρος title
το προσδιορίζει ως γραμμή πλοήγησης.
Παράδειγμα κώδικα:
<map title="Navigation Bar">
<p>
[<a href="home.html">Home</a>]
[<a href="search.html">Search</a>]
[<a href="new.html">New and highlighted</a>]
[<a href="sitemap.html">Site map</a>]
</p>
</map>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
Εξετάστε το περιεχόμενο για στοιχεία anchor
που ομαδοποιούνται.
Ελέγξτε ότι τα στοιχεία anchor ομαδοποιούνται με χρήση λίστας ή στοιχείων map
.
Ελέγξτε ότι το #1 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να παρουσιάσει πληροφορίες με στηλοθέτες με τρόπο που διατηρεί τις σχέσεις εντός των πληροφοριών ακόμα κι όταν οι χρήστες δεν μπορούν να δουν τον πίνακα ή αλλάζει η μορφή παρουσίασης. Οι πληροφορίες θεωρούνται ως έχουσες στηλοθέτες όταν οι λογικές σχέσεις μεταξύ κειμένου, αριθμών, εικόνων ή άλλων δεδομένων υπάρχουν σε δύο διαστάσεις (κάθετα και οριζόντια). Αυτές οι σχέσεις εκφράζονται σε στήλες και γραμμές, και οι στήλες πρέπει να μπορούν να αναγνωριστούν, προκειμένου να γίνουν αντιληπτές οι λογικές σχέσεις.
Η χρήση του στοιχείου HTML table
με τα θυγατρικά στοιχεία tr
, th
και td
καθιστούν αντιληπτές αυτές τις σχέσεις. Οι τεχνικές, όπως η εισαγωγή στηλοθετών για τη δημιουργία στηλών ή η χρήση του στοιχείου HTML pre
, είναι καθαρά οπτικές και οι οπτικά υπονοούμενες λογικές σχέσεις χάνονται εάν ο χρήστης δεν μπορεί να δει τον πίνακα ή η οπτική παρουσίαση αλλάζει.
Αυτό το παράδειγμα χρησιμοποιεί σήμανση για απλό πίνακα δεδομένων. Η πρώτη γραμμή δείχνει τις ημέρες της εβδομάδας. Τα χρονικά διαστήματα εμφανίζονται στην πρώτη στήλη. Αυτά τα κελιά σημειώνονται με το στοιχείο th
. Προσδιορίζει τις ημέρες της εβδομάδας ως κεφαλίδες στηλών και τα χρονικά διαστήματα ως κεφαλίδες γραμμών.
Οι εφαρμογές ανάγνωσης οθόνης εκφωνούν πληροφορίες κεφαλίδων που αλλάζουν καθώς ο χρήστης εκτελεί πλοήγηση στον πίνακα. Έτσι, όταν οι χρήστες εφαρμογών ανάγνωσης οθόνης μετακινηθούν προς αριστερά ή δεξιά σε μια γραμμή, θα ακούσουν την ημέρα της εβδομάδας (την κεφαλίδα της στήλης) και μετά τη συνάντηση (εάν υπάρχει). Θα ακούσουν το χρονικό διάστημα καθώς μετακινούνται πάνω ή κάτω εντός της ίδιας στήλης.
Παράδειγμα κώδικα:
<table>
<tr>
<td></td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet with Sam</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:00-10:00</th>
<td></td>
<td></td>
<td>Doctor Williams</td>
<td>Sam again</td>
<td>Leave for San Antonio</td>
</tr>
</table>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Στοιχείο πίνακα" (Table Element)
HTML 4.01 Σειρές Πίνακα:Το στοιχείο TR (Table rows: The TR element)
HTML 4.01 Κελιά πίνακα:Τα στοιχεία TH και TD (Κελιά πίνακα: The TH and TD elements)
Ελέγξτε για παρουσία πληροφοριών σε στηλοθέτες.
Για κάθε εμφάνιση πληροφοριών σε στηλοθέτες:
Ελέγξτε ότι χρησιμοποιείται επισημείωση πίνακα με τα στοιχεία table
, tr
, th
και td
τουλάχιστον.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
object
Έγγραφα που φορτώνουν μέσα με το στοιχείο object
.
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική δεν υποστηρίζεται καλά από υποστηρικτικές τεχνολογίες και η υποστήριξη για πολλές εφαρμογές περιήγησης είναι λανθασμένη.
Σκοπός αυτής της τεχνικής είναι η παροχή εναλλακτικού κειμένου για περιεχόμενο που αποδίδεται με χρήση του στοιχείου object. Το σώμα του στοιχείου object μπορεί να χρησιμοποιηθεί για την παροχή ενός πλήρους εναλλακτικού κειμένου για το object ή μπορεί να περιέχει πρόσθετο μη κειμενικό περιεχόμενο με εναλλακτικά κειμένου.
Παράδειγμα κώδικα:
<object classid="http://www.example.com/analogclock.py">
<p>Here is some text that describes the object and its operation.</p>
</object>
Παράδειγμα κώδικα:
<object classid="http://www.example.com/animatedlogo.py">
<img src="staticlogo.gif" alt="Company Name" />
</object>
Παράδειγμα κώδικα:
<object data="companylogo.gif" type="image/gif">
<p>Company Name</p>
</object>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το σώμα κάθε στοιχείου object
περιέχει ένα εναλλακτικό κειμένου για το αντικείμενο.
Το #1 είναι αληθές.
dfn
για τον προσδιορισμό του ορίζοντος στιγμιότυπου της λέξηςHTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτή της τεχνικής είναι η χρήση του στοιχείου dfn
, για να σημειωθεί η χρήση μιας λέξης ή φράσης, εκεί όπου ορίζεται. Το στοιχείο dfn
χρησιμοποιείται για να υποδείξει την ορίζουσα εμφάνιση του εσώκλειστου όρου. Με άλλα λόγια, σημειώνει την εμφάνιση του όρου εκεί όπου δίνεται ο ορισμός του όρου. Σημειώστε ότι εσωκλείει τον όρο, όχι τον ορισμό. Αυτή η τεχνική θα χρησιμοποιείται μαζί με την τεχνική Χρήσης εμβόλιμων ορισμών (G112: Using inline definitions) για την παροχή του ορισμού.
Το ακόλουθο snippet κώδικα δείχνει τη χρήση του στοιχείου dfn
.
Παράδειγμα κώδικα:
<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text .</p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Στοιχείο DFN" (DFN Element)
Προσδιορισμός όλων των λέξεων που ορίζονται εμβόλιμα στο κείμενο, δηλαδή, εκεί όπου εμφανίζεται ο ορισμός σε πρόταση κοντά σε εμφάνιση της λέξης.
Ελέγξτε ότι κάθε λέξη που ορίζεται εμβόλιμα, περιέχεται σε στοιχείο dfn
.
Ελέγξτε ότι το #2 είναι αληθές.
dir
σε εμβόλιμο στοιχείο για την επίλυση προβλημάτων με ένθετες εκτελέσεις κατεύθυνσηςHTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να προσδιορίσει αλλαγές στην κατεύθυνση του κειμένου που περιλαμβάνει ένθετες εκτελέσεις κατεύθυνσης με την παροχή της παραμέτρου dir
σε εμβόλιμα στοιχεία. Μια ένθετη εκτέλεση κατεύθυνσης είναι μια εκτέλεση κειμένου που περιλαμβάνει κείμενο ανάμεικτης κατεύθυνσης, για παράδειγμα, μια παράγραφο στα Αγγλικά που περιέχει μια εβραϊκή πρόταση σε παράθεση, η οποία με τη σειρά της περιέχει μια αγγλική φράση. Η χρήση της παραμέτρου dir
σε εσωκλείον span
ή άλλο εμβόλιμο στοιχείο μπορεί να είναι απαραίτητη διότι ο αλγόριθμος διπλής κατεύθυνσης Unicode (Unicode bidirectional algorithm) μπορεί να παράγει ανεπιθύμητα αποτελέσματα όταν κείμενο ανάμεικτης κατεύθυνσης περιέχει διαστήματα ή στίξη. Οι ιδέες που χρησιμοποιούνται σε αυτή την τεχνική περιγράφονται στην ενότητα "Τι πρέπει να γνωρίζεται για τον αλγόριθμο bidi και την εμβόλιμη επισημείωση" (What you need to know about the bidi algorithm and inline markup).
Αυτό το παράδειγμα ορίζει την κατεύθυνση κειμένου μιας ένθετης φράσης, ανάμεικτης κατεύθυνσης, στα Εβραϊκά και Αγγλικά, να είναι δεξιά προς αριστερά. Επειδή όλο το παράθεμα είναι στα Εβραϊκά, και άρα εκτελείται από δεξιά προς αριστερά, το κείμενο "W3C" και το κόμμα πρέπει να εμφανιστούν στα αριστερά (δηλ. μετά) του εβραϊκού κειμένου, όπως εδώ:
Ο τίτλος είναι στα Εβραϊκά "פעילות ×”×‘×™× ×ו×, W3C".
Η οπτικής σειράς έκδοση ASCII (κείμενο RTL με κεφαλαία γράμματα, LTR με πεζά):
ο τίτλος είναι στα Εβραϊκά "w3c ,YTIVITCA NOITAZILANOITANRETNI".
Ο διπλής κατεύθυνσης αλγόριθμος Unicode δεν αρκεί μόνος του για να επιτύχει το σωστό αποτέλεσμα και αφήνει το κείμενο 'W3C' στη δεξιά πλευρά του παραθέματος:
Ο τίτλος είναι στα Εβραϊκά "פעילות ×”×‘×™× ×ו×, W3C".
Έκδοση ASCII οπτικής σειράς:
ο τίτλος είναι στα Εβραϊκά "YTIVITCA NOITAZILANOITANRETNI, w3c".
Η ακόλουθη επισημείωση θα παράγει το αναμενόμενο αποτέλεσμα:
Παράδειγμα κώδικα:
<p>The title says "<span lang="he"
dir="rtl">פעילות ×”×‘×™× ×ו×, W3C</span>" in Hebrew.</p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Κληρονομιά πληροφοριών κατεύθυνσης κειμένου (Inheritance of text direction information)
"Συγγραφή τεχνικών για διεθνοποίηση XHTML & HTML: Καθορισμός γλώσσας περιεχομένου 1.0" (Authoring Techniques for XHTML & HTML Internationalization: Handling Bidirectional Text 1.0)
Εξετάστε την κατεύθυνση κειμένου στο έγγραφο
Εάν η κατεύθυνση του κειμένου είναι δεξιά προς αριστερά, ελέγξτε ότι για το προγονικό στοιχείο με παράμετρο dir
, η παράμετρος έχει την τιμή "rtl".
Εάν η κατεύθυνση του κειμένου είναι αριστερά προς δεξιά, ελέγξτε ότι δεν υπάρχει γονικό στοιχείο με παράμετρο dir
ή ότι για το πλησιέστερο γονικό στοιχείο με παράμετρο dir
, η παράμετρος έχει τιμή "ltr".
Οι έλεγχοι #2 και #3 είναι αληθείς για όλο το κείμενο.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Πρόσθετες δευτερεύουσες ετικέτες για περιοχή, αρχείο εντολών, παραλλαγή ή άλλες πτυχές, ενδέχεται να οδηγήσουν σε σφάλματα στην εναλλαγή της γλώσσας με παλαιότερες εκδόσεις σε ορισμένα προγράμματα ανάγνωσης οθόνης.
Το JAWS 8.0 μπορεί να διαμορφωθεί για να αλλάζει αυτόματα γλώσσα με βάση την παράμετρο lang. Ωστόσο, πραγματοποιεί εναλλαγή μόνο σε κύριες γλώσσες όπως υποδεικνύεται από τον πρωτεύοντα κωδικό. Εάν μια τοπική παραλλαγή γλώσσας υποδεικνύεται με δευτερεύον κωδικό γλώσσας, το JAWS θα χρησιμοποιήσει την προεπιλεγμένη παραλλαγή για την οποία διαμορφώνεται.
Σκοπός αυτής της τεχνικής είναι να προσδιορίσει την προεπιλεγμένη γλώσσα του κειμένου σε ένα έγγραφο με την παροχή της παραμέτρου lang
ή/και xml:lang
στο στοιχείο html
.
Ο προσδιορισμός της γλώσσας του εγγράφου είναι σημαντικός για μια σειρά λόγων:
Επιτρέπει στο λογισμικό μετάφρασης braille να αντικαταστήσει τους κωδικούς στοιχείων ελέγχου για τονισμένους χαρακτήρες και να εισάγει κωδικούς στοιχείων ελέγχου που είναι απαραίτητοι για να αποτραπεί η εσφαλμένη δημιουργία ανάγλυφων (braille) συρρικνώσεων επιπέδου 2.
Οι λειτουργίες σύνθεσης ομιλίας που υποστηρίζουν πολλαπλές γλώσσες θα είναι σε θέση να προσανατολίσουν και να προσαρμόσουν την προφορά και τη σύνταξη που είναι συγκεκριμένες για τη γλώσσα της σελίδας, εκφωνώντας το κείμενο με τον κατάλληλο τονισμό και την κατάλληλη προφορά.
Η σημείωση της γλώσσας μπορεί να συμβάλει σε μελλοντικές εξελίξεις της τεχνολογίας, για παράδειγμα, χρήστες που δεν μπορούν οι ίδιοι να μεταφράσουν μεταξύ γλωσσών, θα είναι σε θέση να χρησιμοποιούν μηχανήματα για τη μετάφραση άγνωστων λέξεων.
Η σημείωση της γλώσσας μπορεί επίσης να βοηθήσει τους πράκτορες χρήστη στην παροχή ορισμών με χρήση λεξικού.
Η HTML 4.01 χρησιμοποιεί την παράμετρο lang
στο στοιχείο html
. Η XHTML για κείμενο/html χρησιμοποιεί την παράμετρο lang
και την παράμετρο xml:lang
του στοιχείου html
, προκειμένου να ικανοποιήσει τις απαιτήσεις της XHTML και να παρέχει συμβατότητα με προγενέστερες εκδόσεις με HTML. Η XHTML για εφαρμογή/xhtml+xml χρησιμοποιεί την παράμετρο xml:lang
του στοιχείου html
. Αμφότερες οι παράμετροι lang
και xml:lang
μπορούν να λάβουν μόνο μία τιμή.
Σημείωση 1: Η HTML προσφέρει μόνο τη χρήση της παραμέτρου lang
, ενώ η XHTML 1.0 (ως ένα μεταβατικό μέτρο) επιτρέπει αμφότερες τις παραμέτρους και η XHTML 1.1 επιτρέπει μόνο την xml:lang
.
Σημείωση 2:Οι αποδεκτές τιμές για τις παραμέτρους lang και xml:lang υποδεικνύονται στην ενότητα "Πόροι" παρακάτω. Ετικέτες γλώσσας χρησιμοποιούν έναν πρωτεύοντα κωδικό για να υποδείξουν τη γλώσσα και τους προαιρετικούς δευτερεύοντες κωδικούς (διαχωρισμένους με ενωτικούς χαρακτήρες), ώστε να υποδείξουν παραλλαγές της γλώσσας. Για παράδειγμα, η αγγλική γλώσσα υποδεικνύεται με τον πρωτεύοντα κωδικό "en", ενώ η βρετανική αγγλική και αμερικανική αγγλική διακρίνονται μεταξύ τους μέσω των "en-GB" και "en-US" αντίστοιχα. Η χρήση του πρωτεύοντα κωδικού είναι σημαντική για αυτήν την τεχνική. Η χρήση δευτερευόντων κωδικών είναι προαιρετική, αλλά ενδέχεται να είναι χρήσιμη σε ορισμένες περιπτώσεις.
Αυτό το παράδειγμα ορίζει το περιεχόμενο ενός εγγράφου HTML να είναι στη γαλλική γλώσσα.
Παράδειγμα κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
Το παράδειγμα καθορίζει το περιεχόμενο ενός εγγράφου XHTML 1.0 με τον τύπο περιεχομένου για κείμενο/html, να είναι στη γαλλική γλώσσα. Και οι δύο παράμετροι lang
και xml:lang
καθορίζονται, προκειμένου να ικανοποιούν τις απαιτήσεις της XHTML και να παράσχουν συμβατότητα με προγενέστερες εκδόσεις με HTML.
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
Το παράδειγμα καθορίζει το περιεχόμενο ενός εγγράφου XHTML 1,1 με τον τύπο περιεχομένου για εφαρμογή/xhtml+xml, να είναι στη γαλλική γλώσσα. Καθορίζεται μόνο η παράμετρος xml:lang
.
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
BCP 47: Ετικέτες για τον προσδιορισμό γλωσσών (Tags for the Identification of Languages)
Δήλωση γλώσσας σε XHTML και HTML (Declaring Language in XHTML and HTML)
"Συγγραφή τεχνικών για διεθνοποίηση XHTML & HTML: Καθορισμός γλώσσας περιεχομένου 1.0" (Authoring Techniques for XHTML & HTML Internationalization: Specifying the language of content 1.0)
Ετικέτες γλώσσας σε HTML και XML (Language tags in HTML and XML)
Εξετάστε το στοιχείο html
του εγγράφου.
Ελέγξτε ότι το στοιχείο html
φέρει μία παράμετρο lang
ή/και xml:lang
.
Ελέγξτε ότι η τιμή της παραμέτρου lang
συμμορφώνεται με το "BCP 47: Ετικέτες για τον προσδιορισμό γλωσσών" ( BCP 47: Tags for the Identification of Languages) ή με τον απόγονό της και αντανακλά την πρωτεύουσα γλώσσα που χρησιμοποιείται στην Ιστοσελίδα.
Οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Πρόσθετες δευτερεύουσες ετικέτες για περιοχή, αρχείο εντολών, παραλλαγή ή άλλες πτυχές, ενδέχεται να οδηγήσουν σε σφάλματα στην εναλλαγή της γλώσσας με παλαιότερες εκδόσεις σε ορισμένα προγράμματα ανάγνωσης οθόνης.
Το JAWS 8.0 μπορεί να διαμορφωθεί για να αλλάζει αυτόματα γλώσσα με βάση την παράμετρο lang. Ωστόσο, πραγματοποιεί εναλλαγή μόνο σε κύριες γλώσσες όπως υποδεικνύεται από τον πρωτεύοντα κωδικό. Εάν μια τοπική παραλλαγή γλώσσας υποδεικνύεται με δευτερεύον κωδικό γλώσσας, το JAWS θα χρησιμοποιήσει την προεπιλεγμένη παραλλαγή για την οποία διαμορφώνεται.
Σκοπός αυτής της τεχνικής είναι να προσδιορίσει σαφώς κάθε αλλαγή γλώσσας σε μια σελίδα χρησιμοποιώντας την παράμετρο lang
ή xml:lang
, ανάλογα με την έκδοση HTML ή XHTML που χρησιμοποιείτε.
Η HTML 4.01 χρησιμοποιεί την παράμετρο lang
σε στοιχεία. Η XHTML για κείμενο/html χρησιμοποιεί την παράμετρο lang
και την παράμετρο xml:lang
σε στοιχεία, προκειμένου να ικανοποιήσει τις απαιτήσεις της XHTML και να παράσχει συμβατότητα προς τα πίσω με HTML. Η XHTML για εφαρμογή/xhtml+xml χρησιμοποιεί την παράμετρο xml:lang
σε στοιχεία.
Σημείωση: Η HTML προσφέρει μόνο τη χρήση της παραμέτρου lang
, ενώ η XHTML 1.0 (ως ένα μεταβατικό μέτρο) επιτρέπει αμφότερες τις παραμέτρους και η XHTML 1.1 επιτρέπει μόνο την xml:lang
.
Οι αποδεκτές τιμές για τις παραμέτρους lang και xml:lang υποδεικνύονται στην ενότητα "Πόροι" παρακάτω. Ετικέτες γλώσσας χρησιμοποιούν έναν πρωτεύοντα κωδικό για να υποδείξουν τη γλώσσα και τους προαιρετικούς δευτερεύοντες κωδικούς (διαχωρισμένους με ενωτικούς χαρακτήρες), ώστε να υποδείξουν παραλλαγές της γλώσσας. Για παράδειγμα, η αγγλική γλώσσα υποδεικνύεται με τον πρωτεύοντα κωδικό "en", ενώ η βρετανική αγγλική και αμερικανική αγγλική διακρίνονται μεταξύ τους μέσω των "en-GB" και "en-US" αντίστοιχα. Η χρήση του πρωτεύοντα κωδικού είναι σημαντική για αυτήν την τεχνική. Η χρήση δευτερευόντων κωδικών είναι προαιρετική, αλλά ενδέχεται να είναι χρήσιμη σε ορισμένες περιπτώσεις.
Αυτό το παράδειγμα δείχνει τη χρήση της παραμέτρου xml:lang
κατά τον ορισμό ενός παραθέματος στα γερμανικά. Είναι δυνατή η συμπερίληψη αυτού του snippet από ένα έγγραφο XHTML 1.1 όπου δεν επιτρέπεται η lang
.
Παράδειγμα κώδικα:
<blockquote xml:lang="de">
<p>
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, daß kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
könnte er ja Stadtmusikant werden.
</p>
</blockquote>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε στοιχείο στο έγγραφο:
Ελέγξτε ότι η ανθρώπινη γλώσσα του περιεχομένου του στοιχείου είναι η ίδια με την κληρονομημένη γλώσσα για το στοιχείο, όπως καθορίζεται στο "HTML 4.01, Κληρονόμηση κωδικών γλώσσας" (HTML 4.01, Inheritance of language codes)
Για κάθε παράμετρο lang
στο έγγραφο:
Ελέγξτε ότι η τιμή της παραμέτρου lang
συμμορφώνεται με τις Ετικέτες για τον προσδιορισμό γλωσσών ( BCP 47: Tags for the Identification of Languages) ή τον απόγονό του
Για κάθε παράμετρο xml:lang στο έγγραφο:
Ελέγξτε ότι η τιμή της παραμέτρου xml:lang
συμμορφώνεται με τις Ετικέτες για τον προσδιορισμό γλωσσών ( BCP 47: Tags for the Identification of Languages) ή τον απόγονό του
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Το στοιχείο συνδέσμου έχει μη συνεκτική υποστήριξη πράκτορα χρήστη και υποστηρικτικής τεχνολογίας.
Μερικοί πράκτορες χρήστη παρέχουν μια προαιρετική γραμμή πλοήγησης που θα απεικονίζει τις πληροφορίες που καθορίζονται στο στοιχείο link. Οι τρέχουσες εκδόσεις των εφαρμογών περιήγησης Mozilla και Opera παρέχουν αυτή τη λειτουργία. Τα IE 6.0 και Firefox 1.5 δεν προσφέρουν αυτή τη λειτουργία αλλά μπορεί να είναι διαθέσιμη μέσω επεκτάσεων ή add-on.
Δείτε την ενότητα "Το στοιχείο 'link' σε (X)HTML" (The 'link'-Element in (X)HTML) για περισσότερες πληροφορίες για υποστήριξη εφαρμογών περιήγησης για το link
.
Σκοπός αυτής της τεχνικής είναι να περιγράψει πώς το στοιχείο link
μπορεί να παράσχει μεταδεδομένα σχετικά με τη θέση μιας σελίδας HTML εντός ενός συνόλου Ιστοσελίδων ή να βοηθήσει στον εντοπισμό περιεχομένου σε σύνολο Ιστοσελίδων. Η τιμή των παραμέτρων rel
υποδεικνύει τον τύπο σχέσης που περιγράφεται και η παράμετρος href
παρέχει σύνδεσμο προς το έγγραφο με αυτή τη σχέση. Πολλαπλά στοιχεία link
μπορούν να παράσχουν πολλαπλές σχέσεις. Αρκετές τιμές της rel
είναι χρήσιμες:
Έναρξη: Αναφέρεται στο πρώτο έγγραφο στη συλλογή εγγράφων.
Επόμενες Αναφέρεται στο επόμενο έγγραφο σε μια γραμμική ακολουθία εγγράφων.
Προηγ.: Αναφέρεται στο προηγούμενο έγγραφο σε μια ταξινομημένη σειρά εγγράφων.
Περιεχόμενα: Αναφέρεται σε έγγραφο που λειτουργεί ως πίνακας περιεχομένων.
Δείκτης: Αναφέρεται σε έγγραφο που παρέχει ευρετήριο για το τρέχον έγγραφο.
Μια Ιστοσελίδα για το κεφάλαιο 2 ενός ηλεκτρονικού βιβλίου μπορεί να περιέχει τους ακόλουθους συνδέσμους εντός της ενότητας head
.
Παράδειγμα κώδικα:
<link rel="Contents" href="Contents.html" title="Table of Contents" />
<link rel="Index" href="Index.html" title="Index" />
<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Επέκταση γραμμής εργαλείων συνδέσμων για Firefox (Link Toolbar extension for Firefox)
"Χρήση <συνδέσμων> στο έγγραφό σας" (Use <link>s in your document) από τα Quality Web Tips της W3C
"LINK - Σχέσεις εγγράφου" (LINK - Document Relationship) από το Web Design Group
Το 'link'-Element σε (X)HTML (The 'link'-Element in (X)HTML)
Για μια Ιστοσελίδα που βρίσκεται εντός μιας ακολουθίας ή συλλογής Ιστοσελίδων:
Ελέγξτε ότι όλα τα στοιχεία link
που αφορούν στην πλοήγηση εμφανίζονται στην ενότητα head
του εγγράφου.
Για κάθε στοιχείο link
στην ενότητα head
του εγγράφου που αφορά στην πλοήγηση, ελέγξτε ότι περιέχει τουλάχιστον:
μια παράμετρο rel
που προσδιορίζει τον τύπο συνδέσμου
μια έγκυρη παράμετρο href
για τον εντοπισμό του κατάλληλου πόρου
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Μερικοί πράκτορες χρήστη παρέχουν μια προαιρετική γραμμή πλοήγησης που θα απεικονίζει τις πληροφορίες που καθορίζονται στο στοιχείο link
. Οι τρέχουσες εκδόσεις των εφαρμογών περιήγησης Mozilla και Opera παρέχουν αυτή τη λειτουργία. Τα IE 6.0 και Firefox 1.5 δεν προσφέρουν αυτή τη λειτουργία αλλά μπορεί να είναι διαθέσιμη μέσω επεκτάσεων ή add-on. Δείτε την ενότητα "Το στοιχείο 'link' σε (X)HTML" (The 'link'-Element in (X)HTML) για περισσότερες πληροφορίες για υποστήριξη εφαρμογών περιήγησης για το link
.
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού για εντοπισμό ενός γλωσσάριου. Όταν οι όροι στο περιεχόμενο ορίζονται σε ξεχωριστή σελίδα γλωσσάριου, η παραπομπή στο γλωσσάριο γίνεται με χρήση του στοιχείου link
στη στοιχείο head
του εγγράφου χρησιμοποιεί το γλωσσάριο. Η παράμετρος rel
του στοιχείου link
ρυθμίζεται σε "glossary" και η παράμετρος href
περιέχει το URI της σελίδας του γλωσσάριου. Οι πράκτορες χρήστη μπορούν τότε να βοηθήσουν τους χρήστες να έχουν πρόσβαση στο γλωσσάριο γρήγορα και εύκολα.
Παράδειγμα κώδικα:
<link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Χρήση <συνδέσμων> στο έγγραφό σας" (Use <link>s in your document) από τα Quality Web Tips της W3C
"LINK - Σχέσεις εγγράφου" (LINK - Document Relationship) από το Web Design Group
(καμία δεν εμπεριέχεται στη λίστα)
Για κάθε σύνολο λέξεων και τους ορισμούς τους που προορίζονται για να λειτουργούν ως ένα γλωσσάρι:
Ελέγξτε ότι η ενότητα head
της Ιστοσελίδας που περιέχει λέξεις, φράσεις ή συντμήσεις που ορίζονται σε ένα γλωσσάρι, περιέχει ένα στοιχείο link
.
Ελέγξτε ότι το στοιχείο link
έχει παράμετρο rel="glossary"
Ελέγξτε ότι η παράμετρος href
του στοιχείου link
παραπέμπει στη σελίδα του γλωσσάριου.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Σημείωση: Ο ορισμός συντμήσεων που χρησιμοποιούνται στο WCAG είναι: "σύντομη μορφή μιας λέξης, φράσης ή ονομασίας όπου το αρχικό ανάπτυγμα δεν απορρίφθηκε από τον οργανισμό στον οποίο αναφέρεται και όπου η σύντμηση δεν αποτελεί μέρος της γλώσσας."
XHTML 1.1
Αυτή η τεχνική σχετίζεται με:
Η επισημείωση ruby περιλαμβάνει το
στοιχείο (rp
element) ως έναν εφεδρικό μηχανισμό για πράκτορες χρήστη που δεν υποστηρίζουν την XHTML 1.1. Αν και η επισημείωση ruby ορίζεται μόνο στην XHTML 1.1, το IE 5.0 και νεότερες εκδόσεις υποστηρίζουν τα στοιχεία ruby
, rt
και rp
, ακόμα και όταν χρησιμοποιούνται στην HTML 4.01 ή XHTML 1.0.
Σκοπός αυτής της τεχνικής είναι η χρήση σχολιασμού ruby (annotation) για την παροχή πληροφοριών σχετικά με την προφορά και το νόημα μιας εκτέλεσης κειμένου, όπου το νόημα καθορίζεται από την προφορά.
Υπάρχουν πολλές γλώσσες στις οποίες μιας εκτέλεση κειμένου σημαίνει διαφορετικά πράγματα ανάλογα με την προφορά του κειμένου. Αυτό είναι σύνηθες στις γλώσσες της νοτιοανατολικής Ασίας, όπως τα Εβραϊκά, τα Αραβικά, και άλλες γλώσσες. Εμφανίζεται επίσης στα Αγγλικά και άλλες δυτικοευρωπαϊκές γλώσσες.
Ο σχολιασμός ruby επιτρέπει στον χρήστη να σχολιάσει ένα "κείμενο βάσης" παρέχοντας έναν οδηγό προφοράς και, σε ορισμένες περιπτώσεις, έναν ορισμό. Το ruby χρησιμοποιείται συχνά για κείμενο στην ιαπωνική άλλες γλώσσες της ανατολικής Ασίας. Ο σχολιασμός ruby ορίζεται ως υπομονάδα για XHTML 1.1.
Υπάρχουν δύο τύποι σήμανσης ruby : απλή και περίπλοκη. Η απλή επισημείωση ruby εφαρμόζεται σε μια εκτέλεση κειμένου, όπως μια ολοκληρωμένη λέξη ή φράση. Αυτό είναι γνωστό ως κείμενο "βάσης" (στοιχείο rb
). Ο σχολιασμός Ruby που υποδεικνύει πώς προφέρεται ο όρος (το στοιχείο rt
ή κείμενο Ruby), εμφανίζεται σε μικρότερη γραμματοσειρά. (Ο όρος "Ruby" προέρχεται από μια μικρή γραμματοσειρά που χρησιμοποιείται για το σκοπό αυτό σε τυπωμένα κείμενα.) Το κείμενο Ruby αποδίδεται συνήθως πάνω ή αμέσως πριν το κείμενο βάσης, δηλαδή αμέσως πάνω από οριζόντιο κείμενο ή ακριβώς στα δεξιά του κατακόρυφου κειμένου. Ορισμένες φορές στα Ιαπωνικά χρησιμοποιείται το Ruby για παροχή της σημασίας κειμένου στην άλλη πλευρά του κειμένου βάσης (οπτικά) από τον φωνητικό σχολιασμό. Η απλή επισημείωση ruby παρέχει επίσης μια "εφεδρική" επιλογή για πράκτορες χρήστη που δεν υποστηρίζουν σήμανση ruby (δηλαδή, οι πράκτορες χρήστη που δεν υποστηρίζουν XHTML 1.1).
Η περίπλοκη επισημείωση ruby καθιστά δυνατή τη διαίρεση του κειμένου βάσης σε μικρότερες μονάδες, κάθε μία από τις οποίες μπορεί να συσχετιστεί με ξεχωριστό ruby annotation. Η περίπλοκη επισημείωση ruby δεν υποστηρίζει την εφεδρική επιλογή.
Ο σχολιασμός ruby είναι ασυνήθιστος για γλώσσες όπως η εβραϊκή, όπου οι γραμματοσειρές Unicode μπορούν να συμπεριλάβουν διακριτικά σημεία που μεταφέρουν πληροφορίες προφοράς. Είναι επίσης ασυνήθιστος για την αγγλική και τις ευρωπαϊκές γλώσσες.
Σημείωση: Ο πρωταρχικός λόγος για την υπόδειξη της προφοράς μέσω ruby ή οποιουδήποτε άλλου μέσου είναι να γίνει διαθέσιμο το περιεχόμενο σε άτομα με αναπηρίες που θα μπορούσαν να διαβάσουν και να καταλάβουν τη γλώσσα του περιεχομένου εάν τους παρέχονταν πληροφορίες για την προφορά. Δεν είναι απαραίτητη η παροχή πληροφοριών για την προφορά προς χρήση από άτομα που δεν είναι εξοικειωμένα με τη γλώσσα του περιεχομένου.
Αυτό το παράδειγμα χρησιμοποιεί σχολιασμό ruby για να παρουσιάσει την προφορά του αρκτικόλεξου (ακρωνυμίου) που σχηματίζεται από τα πρώτα γράμματα των λέξεων Web Content Accessibility Guidelines. Τα γράμματα WCAG είναι η βάση (το στοιχείο rb) και οι πληροφορίες προφοράς εμφανίζονται από το κείμενο ruby (το στοιχείο rt). Το στοιχείο παρένθεσης Ruby rp
χρησιμοποιείται για πράκτορες χρήστη που δεν υποστηρίζουν σχολιασμούς Ruby για να υποδείξουν ότι το κείμενο στο στοιχείο rt
παρέχει πληροφορίες προφοράς. Οι πληροφορίες προφοράς αποδίδονται σε παρένθεση ακριβώς μετά το κείμενο βάσης. (Οι πράκτορες χρήστη που υποστηρίζουν ruby δεν εμφανίζουν την παρένθεση.)
Παράδειγμα κώδικα:
<p>When we talk about these guidelines, we often just call them
<ruby>
<rb>WCAG</rb>
<rp>(</rp>
<rt>Wuh-KAG</rt>
<rp>)</rp>
</ruby>.
</p>
Ακολουθεί ένα παράδειγμα στα ιαπωνικά. Για Ιαπωνικά, το Ruby χρησιμοποιείται για να δώσει την ανάγνωση χαρακτήρων Han (Kanji). Το στοιχείο παρένθεσης Ruby rp
χρησιμοποιείται για πράκτορες χρήστη που δεν υποστηρίζουν σχολιασμούς Ruby για να υποδείξουν ότι το κείμενο στο στοιχείο rt
παρέχει τις πληροφορίες προφοράς. Οι πληροφορίες προφοράς αποδίδονται σε παρένθεση ακριβώς μετά το κείμενο βάσης. (Οι πράκτορες χρήστη που υποστηρίζουν ruby δεν εμφανίζουν την παρένθεση.)
Παράδειγμα κώδικα:
<p>
<ruby>
<rb>慶應大å¦</rb>
<rp>(</rp>
<rt>ã‘ã„ãŠã†ã ã„ãŒã</rt>
<rp>)</rp>
</ruby>
</p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Τεχνικές W3C I18N: Επισημείωση και κείμενο, "Χρήση ruby" (W3C I18N Techniques: Markup and text, "Using Ruby"
Για κάθε εκτέλεση κειμένου όπου χρησιμοποιείται σχολιασμός ruby για την παροχή πληροφοριών προφοράς:
Ελέγξτε ότι ένα στοιχείο rt
περιέχει πληροφορίες προφοράς για κάθε εκτέλεση κειμένου που καθορίζεται από το στοιχείο rb
.
Εάν χρησιμοποιείται απλή επισημείωση Ruby, ελέγξτε ότι το στοιχείο rp
είναι παρόν για να υποδείξει στους πράκτορες χρήστη που δεν υποστηρίζουν σχολιασμούς Ruby, ότι το κείμενο στο στοιχείο rt παρέχει τις πληροφορίες προφοράς. .
Οι έλεγχοι #1 και #2 είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Οι τιμές row
και col
της παραμέτρου scope
υποστηρίζονται σε μεγάλο βαθμό από τις περισσότερες τρέχουσες εκδόσεις JAWS. Ωστόσο, υπάρχουν ακόμα ορισμένα προβλήματα και η υποστήριξη του WindowEyes για το scope
δεν είναι συνεκτική. Το ίδιο ισχύει για τις ιαπωνικές εκδόσεις αυτών των προγραμμάτων ανάγνωσης οθόνης. Εκδόσεις JAWS παλαιότερες της έκδοσης 5, καθώς και παλαιότερες εκδόσεις του WindowEyes, δεν παρουσιάζουν συνεκτική υποστήριξη του scope
.
Αυτή τη στιγμή, εκείνοι που επιθυμούν να διασφαλίσουν σταθερή υποστήριξη σε υποστηρικτικές τεχνολογίες για πίνακες όπου οι κεφαλίδες δεν βρίσκονται στην πρώτη σειρά/στήλη, ενδέχεται να επιθυμούν τη χρήση της τεχνικής σύνθετων πινάκων για Χρήση παραμέτρων id και header για συσχέτιση κελιών δεδομένων και κελιών κεφαλίδων σε πίνακες δεδομένων (H43: Using id and headers attributes to associate data cells with header cells in data tables). Για απλούς πίνακες που έχουν κεφαλίδες στην πρώτη στήλη ή σειρά, συνιστούμε τη χρήση των στοιχείων th
και td
.
Σκοπός αυτής της τεχνικής είναι να συσχετίσει κελιά κεφαλίδων με κελιά δεδομένων χρησιμοποιώντας την παράμετρο scope
. Η παράμετρος scope
μπορεί να χρησιμοποιηθεί για να διασαφηνίσει το πεδίο κάθε κελιού που χρησιμοποιείται ως κεφαλίδα. Το πεδίο προσδιορίζει εάν το κελί είναι κεφαλίδα για γραμμή ή ομάδα γραμμών ή στηλών. Οι τιμές row
, col
, rowgroup
και colgroup
προσδιορίζουν αυτά τα πιθανά πεδία αντίστοιχα.
Για απλούς πίνακες δεδομένων όπου η κεφαλίδα δεν βρίσκεται στην πρώτη σειρά ή στήλη, όπως στο Παράδειγμα 1, αυτή η τεχνική μπορεί να χρησιμοποιηθεί. Με βάση τη σημερινή υποστήριξη προγραμμάτων ανάγνωσης οθόνης, η χρήση της προτείνεται σε δύο περιπτώσεις που αμφότερες σχετίζονται με απλούς πίνακες: :
κελιά δεδομένων με σήμανση td
που λειτουργούν επίσης ως κεφαλίδα σειράς ή στήλης
κελιά κεφαλίδας με σήμανση td
αντί για th
. Ορισμένες φορές οι συγγραφείς κάνουν αυτή τη χρήση για την αποφυγή εμφάνισης χαρακτηριστικών που σχετίζονται με το th
και δεν επιλέγουν επίσης τη χρήση CSS για τον έλεγχο της εμφάνισης για th
.
Σημείωση: Για απλούς πίνακες που έχουν κεφαλίδες στην πρώτη σειρά ή στήλη, αρκεί η χρήση των στοιχείων TH χωρίς scope.
Σημείωση: Για σύνθετους πίνακες χρησιμοποιήστε id και header όπως στη Χρήση παραμέτρων id και header για συσχέτιση κελιών δεδομένων και κελιών κεφαλίδων σε πίνακες δεδομένων (H43: Using id and headers attributes to associate data cells with header cells in data tables).
Στο παρακάτω παράδειγμα, η στήλη #1 περιέχει σειριακούς αριθμούς για σειρές στον πίνακα και η δεύτερη στήλη περιέχει τη βασική τιμή για τη σειρά. Τα κελιά στη δεύτερη στήλη ενδέχεται τότε να κάνουν χρήση του scope="row"
. Τα κελιά στην πρώτη σειρά επισημαίνονται επίσης με td
και χρησιμοποιούν το scope="col"
.
Παράδειγμα κώδικα:
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<td scope="col">Name</td>
<td scope="col">Phone#</td>
<td scope="col">Fax#</td>
<td scope="col">City</td>
</tr><tr>
<td>1.</td>
<td scope="row">Joel Garner</td>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<td scope="row">Clive Lloyd</td>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr><tr>
<td>3.</td>
<td scope="row">Gordon Greenidge</td>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 Κελιά πίνακα:παράμετρος scope (Κελιά πίνακα: scope attribute)
HTML 4.01 Κελιά πίνακα:Τα στοιχεία TH και TD (Κελιά πίνακα: The TH and TD elements)
Πίνακες ανάγνωσης υποστηρικτικής τεχνολογίας (Assistive technology reading tables)
Για κάθε πίνακα δεδομένων:
Ελέγξτε ότι όλα τα στοιχεία th
έχουν παράμετρο scope
.
Ελέγξτε ότι όλα τα στοιχεία td
που λειτουργούν ως κεφαλίδες για άλλα στοιχεία έχουν παράμετρο scope
.
Ελέγξτε ότι όλες οι παράμετροι scope
έχουν την τιμή row
, col
, rowgroup
ή colgroup
.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Έγγραφα HTML και XHTML που χρησιμοποιούν πλαίσια ή iframes
Αυτή η τεχνική σχετίζεται με:
Η χρήση της παραμέτρου longdesc
σε στοιχεία frame και iframe δεν υποστηρίζεται επαρκώς από υποστηρικτικές τεχνολογίες.
Σκοπός αυτής της τεχνικής είναι να δείξει τη χρήση της παραμέτρου title
του στοιχείου frame
ή iframe
, για να περιγραφούν τα περιεχόμενα κάθε συνόλου πλαισίων. Αυτό παρέχει μια ετικέτα για το πλαίσιο, έτσι ώστε οι χρήστες να μπορούν να καθορίσουν σε ποιο πλαίσιο να μπουν και να εξερευνήσουν λεπτομερώς. Δεν βάζει ετικέτα στην μεμονωμένη σελίδα (frame) ή σε ένθετο πλαίσιο (iframe) στο σύνολο πλαισίων.
Σημειώστε ότι η παράμετρος title
βάζει ετικέτες σε πλαίσια και είναι διαφορετική από το στοιχείο title
, το οποίο βάζει ετικέτες σε έγγραφα. Επιβάλλεται η παροχή και των δύο, εφόσον το πρώτο διευκολύνει την πλοήγηση ανάμεσα στα πλαίσια και το δεύτερο αποσαφηνίζει την τρέχουσα θέση του χρήστη.
Η παράμετρος title
δεν είναι αμοιβαία εναλλάξιμο με την παράμετρο name
. Η παράμετρος title
βάζει ετικέτα στο πλαίσιο για χρήστες. Η παράμετρος name
του βάζει ετικέτα για τη δημιουργία αρχείου εντολών και τη στοχοθέτηση παραθύρου. Η παράμετρος name
δεν παρουσιάζεται στον χρήστη, μόνο η title
.
Αυτό το παράδειγμα δείχνει τη χρήση της παραμέτρου title
με το στοιχείο frame
, για να περιγράψει τα πλαίσια που περιέχουν τη γραμμή πλοήγησης και το έγγραφο.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A simple frameset document</title>
</head>
<frameset cols="10%, 90%">
<frame src="nav.html" title="Main menu" />
<frame src="doc.html" title="Documents" />
<noframes>
<body>
<a href="lib.html" title="Library link">Select to
go to the electronic library</a>
</body>
</noframes>
</frameset>
</html>
Αυτό το παράδειγμα δείχνει τον τρόπο χρήσης της παραμέτρου title με iframe
για την περιγραφή των περιεχομένων ενός ένθετου πλαισίου. Το παράδειγμα υποδεικνύει επίσης έναν εναλλακτικό σύνδεσμο για τη σελίδα που περιλαμβάνεται στο στοιχείο iframe για παλαιότερα προγράμματα περιήγησης, τα οποία ενδέχεται να μην κατανοούν το στοιχείο iframe
.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A document using iframe</title>
</head>
...
<iframe src="banner-ad.html" id="testiframe"
name="testiframe" title="Advertisement">
<a href="banner-ad.html">Advertisement</a>
</iframe>
...
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.0.1 Ένθετα πλαίσια: το στοιχείο IFRAME (HTML 4.0.1 Inline frames: the IFRAME element)
Ελέγξτε κάθε στοιχείο frame και iframe στον πηγαίο κώδικα HTML ή XHTML για την παρουσία παραμέτρου title.
Ελέγξτε ότι η παράμετρος title περιέχει κείμενο που προσδιορίζει το πλαίσιο.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Στοιχεία ελέγχου φόρμας HTML και XHTML που δεν προσδιορίζονται χρησιμοποιώντας value
, alt
ή περιεχόμενο στοιχείου
Αυτή η τεχνική σχετίζεται με:
Οι πράκτορες χρήστη εμφανίζουν ένα εργαλείο βοήθειας όταν το ποντίκι αφήνεται πάνω από ένα στοιχείο input
που περιέχει την παράμετρο title
.
Εάν δεν υπάρχει διαθέσιμη παράμετρος label
, τα JAWS και Window-Eyes εκφωνούν την παράμετρο title
όταν το στοιχείο ελέγχου φόρμας επισημαίνεται
Το JAWS 6.0 και νεότερες εκδόσεις μπορούν να ρυθμιστούν για εκφώνηση και των δύο παραμέτρων label
και title
, όταν τα δύο στοιχεία είναι διαφορετικά. Όμως, πολύ λίγοι γνωρίζουν αυτή τη ρύθμιση.
Το WindowEyes 5.5 έχει μια ειδική συντόμευση, ins-E, που θα εμφανίσει πρόσθετες πληροφορίες, συμπεριλαμβανομένης της παραμέτρου title, για το στοιχείο με επισήμανση.
Σκοπός αυτής της τεχνικής είναι η χρήση της παραμέτρου title
για την απόδοση ετικέτας σε στοιχεία ελέγχου φόρμας όταν η οπτική σχεδίαση δεν μπορεί να εξυπηρετήσει την ετικέτα (για παράδειγμα, εάν δεν υπάρχει κείμενο στην οθόνη που μπορεί να προσδιοριστεί ως ετικέτα) ή εκεί όπου η εμφάνιση μιας ετικέτας μπορεί να προκαλέσει σύγχυση. Οι πράκτορες χρήστη, συμπεριλαμβανομένης της υποστηρικτικής τεχνολογίας, μπορούν να εκφωνήσουν την παράμετρο title
.
Μια φόρμα αναζήτησης χρησιμοποιεί ένα αναπτυσσόμενο μενού για να περιορίσει το πεδίο της αναζήτησης Το αναπτυσσόμενο μενού βρίσκεται ακριβώς δίπλα στο πεδίο κειμένου που χρησιμοποιείται για την καταχώρηση του όρου αναζήτησης. Η σχέση μεταξύ του πεδίου αναζήτησης και του αναπτυσσόμενου μενού είναι σαφής σε χρήστες που μπορούν να δουν την οπτική σχεδίαση, η οποία δεν αφήνει χώρο για ορατή ετικέτα. Η παράμετρος title
χρησιμοποιείται για να προσδιορίσει το μενού select
. Η παράμετρος title
μπορεί να εκφωνηθεί από εφαρμογές ανάγνωσης οθόνης ή να απεικονιστεί ως εργαλείο βοήθειας για άτομα που χρησιμοποιούν μεγεθυντές οθόνης.
Παράδειγμα κώδικα:
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select>
Μια Ιστοσελίδα περιέχει στοιχεία ελέγχου για την καταχώρηση ενός αριθμού τηλεφώνου στις Ηνωμένες Πολιτείες, με τρία πεδία για τον κωδικό περιοχής, τον αριθμό κέντρου και τα τέσσερα τελευταία ψηφία.
Παράδειγμα κώδικα:
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset>
Μια Ιστοσελίδα περιέχει ένα πεδίο κειμένου όπου ο χρήστης μπορεί να εισάγει όρους αναζήτησης και ένα κουμπί με την ετικέτα "Αναζήτηση" για την εκτέλεση της αναζήτησης. Η παράμετρος title
χρησιμοποιείται για τον προσδιορισμό του στοιχείου ελέγχου φόρμας και του κουμπιού ακριβώς μετά το πεδίο κειμένου, ώστε να είναι σαφές για τον χρήστη ότι το πεδίο κειμένου βρίσκεται στο σημείο που θα πρέπει να καταχωρηθεί ο όρος αναζήτησης.
Παράδειγμα κώδικα:
<input type="text" title="Type search term here" value="Type search term here"/> <input type="submit" value="Search"/>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Η παράμετρος title" (The title attribute)
Προσβάσιμες φόρμες που χρησιμοποιούν το WCAG 2.0 (Accessible Forms using WCAG 2.0)
Προσδιορίστε κάθε στοιχείο ελέγχου φόρμας που δεν συσχετίζεται με ένα στοιχείο label
Ελέγξτε ότι το στοιχείο ελέγχου έχει παράμετρο title
Ελέγξτε ότι η παράμετρος title
προσδιορίζει τον σκοπό του στοιχείου ελέγχου
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Έγγραφα HTML και XHTML που φορτώνουν εικόνες.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει πώς σημειώνονται οι εικόνες, έτσι ώστε να μπορεί η ΑΤ να τις παραβλέψει.
Εάν δεν χρησιμοποιείται παράμετρος title, και το κείμενο alt έχει ρυθμιστεί σε null (δηλ. alt=""
), υποδεικνύει προς την υποστηρικτική τεχνολογία ότι είναι δυνατή η παράβλεψη της εικόνας με ασφάλεια.
Σημείωση: Αν και το alt=" "
είναι επίσης έγκυρο, συνιστάται το alt=""
.
Σημείωση: Μια παράμετρος ALT με τιμή "null" δεν είναι το ίδια με την απουσία της παραμέτρου ALT.
Η ακόλουθη εικόνα χρησιμοποιείται για την εισαγωγή μιας διακοσμητικής εικόνας σε μια Ιστοσελίδα.
Παράδειγμα κώδικα:
<img src="squiggle.gif" width="20" height="20" alt="" />
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Το "'Null alt text' in WebAIM's 'Creating Accessible Images'" ('Null alt text' in WebAIM's 'Creating Accessible Images') δείχνει επίσης πώς γίνεται αυτό στο Dreamweaver.
(καμία δεν εμπεριέχεται στη λίστα)
Για κάθε εικόνα που πρέπει να παραβλεφθεί.
Ελέγξτε ότι η παράμετρος title
είτε λείπει, είτε είναι κενή.
Ελέγξτε ότι η παράμετρος alt
είναι παρούσα και κενή ή περιέχει μόνο λευκά διαστήματα (όχι όμως
)
Τα #1 και #2 είναι αληθή
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Τα JAWS και WindowEyes παρέχουν πλοήγηση μέσω επικεφαλίδων και παρέχουν πληροφορίες για το επίπεδο της επικεφαλίδας. Η εφαρμογή περιήγησης Opera παρέχει έναν μηχανισμό για πλοήγηση ανά επικεφαλίδα. Πρόσθετες λειτουργίες υποστηρίζουν πλοήγηση ανά επικεφαλίδα σε άλλους πράκτορες χρήστη.
Σκοπός αυτής της τεχνικής είναι να χρησιμοποιηθούν επικεφαλίδες τμήματος για τη μεταφορά της δομής του περιεχομένου. Η επισημείωση επικεφαλίδας μπορεί να χρησιμοποιηθεί:
για να υποδειχθεί η αρχή του κύριου περιεχομένου
για να επισημανθούν επικεφαλίδες τμημάτων εντός της περιοχής κύριου περιεχομένου
για την οριοθέτηση διαφορετικών τμημάτων πλοήγησης, όπως πλοήγηση κορυφής ή κύρια πλοήγηση, αριστερή ή δευτερεύουσα πλοήγηση και πλοήγηση υποσέλιδου
για να επισημανθούν εικόνες (που περιέχουν κείμενο) που παρουσιάζονται οπτικά ως επικεφαλίδες.
Σε ορισμένες τεχνολογίες, οι επικεφαλίδες σχεδιάζονται για μεταφορά λογικής ιεραρχίας. Η παράκαμψη επιπέδων στην ακολουθία των επικεφαλίδων μπορεί να δημιουργεί την εντύπωση ότι η δομή του εγγράφου δεν έχει μελετηθεί σωστά ή ότι συγκεκριμένες επικεφαλίδες έχουν επιλεγεί για την οπτική απόδοση αντί για το νόημά τους. Οι συγγραφείς ενθαρρύνονται να πραγματοποιούν ιεραρχική ένθεση επικεφαλίδων.
Εφόσον οι επικεφαλίδες υποδεικνύουν την αρχή σημαντικών ενοτήτων περιεχομένου, είναι δυνατό για τους χρήστες υποστηρικτικής τεχνολογίας να μεταπηδήσουν απευθείας στην κατάλληλη επικεφαλίδα και να ξεκινήσουν την ανάγνωση του περιεχομένου. Αυτό επιταχύνει ιδιαίτερα την αλληλεπίδραση για χρήστες που σε διαφορετική περίπτωση θα είχαν πολύ αργή πρόσβαση στο περιεχόμενο.
Σε τεχνολογίες που υποστηρίζουν Φύλλα στυλ πολλαπλών επιπέδων (CSS), μπορεί να χρησιμοποιηθεί εφαρμογή στυλ για την αλλαγή του τρόπου που δείχνουν ή ακούγονται οι επικεφαλίδες. Είναι ακόμα εφικτό να οριστεί στυλ σε επικεφαλίδες μέσω CSS ώστε να εκτίθενται σε υποστηρικτική τεχνολογία, αλλά να είναι κρυφές οπτικά. Ωστόσο, η οπτική εμφάνιση των επικεφαλίδων ωφελεί ένα μεγάλο σύνολο χρηστών, συμπεριλαμβανομένων εκείνων με ορισμένες νοητικές αναπηρίες.
Αυτό το παράδειγμα οργανώνει τις ενότητες μιας σελίδας αναζήτησης μέσω σήμανσης κάθε επικεφαλίδας ενότητας χρησιμοποιώντας στοιχεία h2
.
Παράδειγμα κώδικα:
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ...
Σε αυτό το παράδειγμα, η επισημείωση επικεφαλίδας χρησιμοποιείται για να κάνει αντιληπτή την πλοήγηση και τις ενότητες του κύριου περιεχομένου.
Παράδειγμα κώδικα:
<!-- Logo, banner graphic, search form, etc. -->
<h2>Navigation</h2>
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
...
</ul>
<h2>All about headings</h2>
<!-- Text, images, other material making up the main content... -->
Σημειώστε ότι σε HTML 4.01 και XHTML 1.x, τα στοιχεία επικεφαλίδας σημειώνουν μόνο την αρχή των ενοτήτων. Δεν τις περιέχουν ως περιεχόμενο στοιχείου.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
<p>
... some text here ...
</p>
<h2>Cooking with oil</h2>
<p>
... text of the section ...
</p>
<h2>Cooking with butter</h2>
<p>
... text of the section ...
</p>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για όλο το περιεχόμενο που διαιρείται σε ξεχωριστές ενότητες,
Ελέγξτε ότι κάθε τμήμα αρχίζει με μια επικεφαλίδα.
Ελέγξτε ότι το #1 είναι αληθές.
Έγγραφα HTML και XHTML που χρησιμοποιούν πλαίσια
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει πώς τα σύνολα πλαισίων μπορούν να χρησιμοποιηθούν για την ομαδοποίηση μπλοκ επαναλαμβανομένου υλικού. Αφού οι περισσότεροι πράκτορες χρήστη και υποστηρικτικές τεχνολογίες παρέχουν έναν τρόπο για πλοήγηση από πλαίσιο σε πλαίσιο, η χρήση πλαισίων για οργάνωση στοιχείων μπορεί να παράσχει έναν μηχανισμό για την εύκολη παράκαμψη του επαναλαμβανόμενου περιεχομένου. Εάν ο ιστότοπος χρησιμοποιεί σύνολα πλαισίων, οργανώστε τα μπλοκ περιεχομένου σε ξεχωριστά πλαίσια. Βεβαιωθείτε ότι τα επαναλαμβανόμενα μπλοκ περιεχομένου εμφανίζονται στο ίδιο πλαίσιο εντός του συνόλου πλαισίων κάθε Ιστοσελίδας. Επιπρόσθετα, κάθε στοιχείο frame πρέπει να έχει παράμετρο title, για να περιγράψει το περιεχόμενο του πλαισίου. Όταν τα πλαίσια λάβουν σωστό τίτλο, οι χρήστες μπορούν να χρησιμοποιήσουν πλοήγηση πλαισίων για εύκολη πλοήγηση μεταξύ μπλοκ περιεχομένου.
Αυτή η τεχνική είναι κατάλληλη όταν σύνολα πλαισίων χρησιμοποιούνται ήδη για την οργάνωση του περιεχομένου της σελίδας. Άλλες τεχνικές προτιμώνται για σελίδες που δεν χρησιμοποιούν ήδη σύνολα πλαισίων, καθώς πολλοί χρήστες υποστηρικτικής τεχνολογίας έχουν προβλήματα με τα πλαίσια. Μια συμβουλευτική τεχνική σχετικά με τη χρήση noframes διατίθεται στο κριτήριο επιτυχίας 4.2.1.
Το ακόλουθο παράδειγμα δείχνει τη χρήση δύο πλαισίων για την οργάνωση περιεχομένου. Η προέλευση του πρώτου πλαισίου είναι η Ιστοσελίδα, navigation.html, που περιέχει το HTML για την πλοήγηση. Αυτό το πλαίσιο έχει παράμετρο title που το προσδιορίζει ως γραμμή πλοήγησης. Το δεύτερο πλαίσιο περιέχει το κύριο περιεχόμενο του ιστότοπου, όπως υποδεικνύεται από την παράμετρο προέλευσης του main.html και την παράμετρο title, "Κύριο περιεχόμενο ειδήσεων" που προσδιορίζει τη λειτουργία του.
Παράδειγμα κώδικα:
<frameset cols="20%, *">
<frame src="navigation.html" name="navbar" title="Navigation Bar" />
<frame src="main.html" name="maincontent" title="Main News Content" />
<noframes>
<p>View <a href="noframe.html">no frame version</a>.</p>
</noframes>
</frameset>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Το στοιχείο FRAMESET" ( The FRAMESET element)
HTML 4.01 "Το στοιχείο FRAMESET" ( The FRAMESET element)
Εάν η Ιστοσελίδα χρησιμοποιεί πλαίσια για την οργάνωση περιεχομένου:
Ελέγξτε εάν επαναλαμβανόμενα μπλοκ περιεχομένου οργανώνονται σε ξεχωριστά πλαίσια.
Ελέγξτε ότι τα πλαίσια με επαναλαμβανόμενο περιεχόμενο εμφανίζονται στην ίδια θέση εντός κάθε συνόλου πλαισίων.
Οι έλεγχοι #1 και #2 είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας σημασιολογικής ομαδοποίησης για συσχετισμένα στοιχεία ελέγχου φόρμας. Αυτό επιτρέπει στους χρήστες να κατανοήσουν τη σχέση των στοιχείων ελέγχου και να αλληλεπιδράσουν με τη φόρμα πιο γρήγορα και αποτελεσματικά.
Στοιχεία ελέγχου φόρμας μπορούν να ομαδοποιηθούν περιβάλλοντας αυτά με το στοιχείο fieldset
. Τότε, όλα τα στοιχεία ελέγχου εντός ενός δεδομένου fieldset
συσχετίζονται. Το πρώτο στοιχείο εντός του fieldset
θα πρέπει να είναι ένα στοιχείο legend
, το οποίο παρέχει μία ετικέτα ή οδηγίες για την ομάδα. Τα fieldset
μπορούν να είναι ένθετα εάν το επιθυμείτε, αν και αυτό μπορεί να οδηγήσει σε σύγχυση εάν γίνει σε υπερβολικό βαθμό.
Η ομαδοποίηση στοιχείων ελέγχου είναι περισσότερο σημαντική για συσχετισμένα ραδιόπληκτρα και τετράγωνα επιλογής. Ένα σύνολο ραδιοπλήκτρων ή τετραγώνων επιλογής συσχετίζεται όταν όλα υποβάλλουν τιμές για ένα μεμονωμένο ονοματισμένο πεδίο. Λειτουργούν με τον ίδιο τρόπο όπως οι λίστες επιλογής, επιτρέποντας στον χρήστη να επιλέξει από ένα σύνολο επιλογών, με την εξαίρεση ότι οι λίστες επιλογής είναι μεμονωμένα στοιχεία ελέγχου, ενώ τα ραδιόπληκτρα και τα τετράγωνα επιλογής είναι πολλαπλά στοιχεία ελέγχου. Καθώς είναι πολλαπλά στοιχεία ελέγχου, είναι ιδιαιτέρως σημαντικό να ομαδοποιούνται σημασιολογικά ώστε να είναι περισσότερο εύκολο να αντιμετωπιστούν ως ένα μεμονωμένο στοιχείο ελέγχου. Συχνά οι πράκτορες χρήστη θα παρουσιάσουν την τιμή του legend
πριν την ετικέτα κάθε στοιχείου ελέγχου, ώστε να υπενθυμίσουν στους χρήστες ότι είναι μέρος της ίδιας ομάδας.
Μπορεί επίσης να είναι χρήσιμη η ομαδοποίηση άλλων συνόλων στοιχείων ελέγχου που δεν συσχετίζονται στο ίδιο μέτρο όπως τα σύνολα ραδιοπλήκτρων και τετραγώνων επιλογής. Για παράδειγμα, αρκετά πεδία που συλλέγουν τη διεύθυνση ενός χρήστη μπορούν να ομαδοποιηθούν με legend "Διεύθυνση".
Οι συγγραφείς ορισμένες φορές αποφεύγουν τη χρήση του στοιχείου fieldset
λόγω της προεπιλεγμένης προβολής στο πρόγραμμα περιήγησης, το οποίο σχεδιάζει ένα περίγραμμα γύρω από τα ομαδοποιημένα στοιχεία ελέγχου. Αυτή η οπτική ομαδοποίηση είναι επίσης χρήσιμη και οι συγγραφείς θα πρέπει να εξετάσουν σοβαρά τη διατήρησή της (ή κάποια μορφή οπτικής ομαδοποίησης). Το οπτικό εφέ μπορεί να τροποποιηθεί στο CSS με παράκαμψη της ιδιότητας "border" του στοιχείου fieldset
και της ιδιότητας "position" του legend
.
Όταν μία μικρή ομάδα συσχετισμένων ραδιοπλήκτρων περιλαμβάνει σαφείς οδηγίες και διακριτές επιλογές, ενδέχεται να μην είναι απαραίτητη η χρήση fieldset και legend. Ενδέχεται επίσης να αρκεί η Χρήση στοιχείων label για σύνδεση ετικετών κειμένου με στοιχεία ελέγχου φόρμας (H44: Using label elements to associate text labels with form controls).
Αυτό το παράδειγμα δείχνει ένα στοιχείο εξέταση με μία ερώτηση και πέντε πιθανές ερωτήσεις. Σε κάθε απάντηση αντιστοιχεί ένα ραδιόπληκτρο (input type="radio"
). Τα ραδιόπληκτρα περιέχονται σε fieldset
. Η ερώτηση της εξέτασης έχει ετικέτα με το στοιχείο legend
.
Παράδειγμα κώδικα:
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset>
Η σελίδα προφίλ χρήστη για έναν ιστότοπο επιτρέπει στους χρήστες να υποδείξουν τα ενδιαφέροντά τους επιλέγοντας πολλαπλά τετράγωνα επιλογής. Κάθε τετράγωνο επιλογής (input type="checkbox"
) έχει label
. Τα τετράγωνα επιλογής περιέχονται σε ένα στοιχείο fieldset
και το στοιχείο legend
περιέχει το μήνυμα για όλη την ομάδα των τετραγώνων επιλογής.
Παράδειγμα κώδικα:
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
Αυτό το παράδειγμα ζητά από τον χρήστη να επιλέξει έναν μόνο φιλόσοφο. Να σημειωθεί ότι κάθε πεδίο έχει την ίδια παράμετρο "name
", που υποδεικνύει αυτά τα ραδιόπληκτρα ως συσχετισμένα (όλα υποβάλλουν το ίδιο πεδίο) και θα πρέπει να ομαδοποιηθούν όπως φαίνεται. Να σημειωθεί επίσης ότι ενώ οι παράμετροι "name
" είναι όμοιες, οι παράμετροι "id
" πρέπει να είναι μοναδικοί.
Παράδειγμα κώδικα:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred philosopher</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">Socrates</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">Plato</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form>
Σημείωση: Ομάδες συσχετισμένων τετραγώνων επιλογής λειτουργούν κατά τον ίδιο τρόπο, με την εξαίρεση ότι ο χρήστης επιτρέπεται να εκφράζει περισσότερες από μία προτιμήσεις για το πεδίο.
Σε αυτό το παράδειγμα, τα πεδία φόρμας για διευθύνσεις κατοικίας και ταχυδρομικές διευθύνσεις διακρίνονται από την τιμή legend
σε κάθε ομαδοποίηση fieldset
.
Παράδειγμα κώδικα:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Τετράγωνα επιλογής" (Checkboxes)
Προσβάσιμες φόρμες που χρησιμοποιούν το WCAG 2.0 (Accessible Forms using WCAG 2.0)
Ελέγξτε ότι ομάδες λογικά συσχετισμένων στοιχείων input περιέχονται εντός ενός στοιχείου fieldset.
Ελέγξτε ότι κάθε ομάδα στοιχείων input
με type="radio"
ή type="checkbox"
με την ίδια παράμετρο name
, περιέχεται εντός στοιχείου fieldset
.
Ελέγξτε ότι κάθε fieldset
έχει ένα στοιχείο legend
που περιλαμβάνει μία περιγραφή αυτής της ομάδας.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML 4.01, XHTML 1.x
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή μιας σύντομης επισκόπησης του τρόπου οργάνωσης δεδομένων σε έναν πίνακα ή μια σύντομη εξήγηση του τρόπο πλοήγησης σε έναν πίνακα. Η παράμετρος summary
του στοιχείου table
καθιστά διαθέσιμες αυτές τις πληροφορίες σε άτομα που χρησιμοποιούν εφαρμογές ανάγνωσης οθόνης. Οι πληροφορίες δεν εμφανίζονται οπτικά.
Η παράμετρος summary
είναι χρήσιμη όταν ο πίνακας έχει περίπλοκη δομή (για παράδειγμα, όταν υπάρχουν αρκετά σύνολα κεφαλίδων γραμμών ή στηλών ή όταν υπάρχουν πολλαπλές ομάδες στηλών ή γραμμών). Η summary
μπορεί επίσης να είναι χρήσιμη για απλούς πίνακες δεδομένων που περιέχουν πολλές στήλες ή γραμμές δεδομένων.
Η παράμετρος summary
μπορεί να χρησιμοποιηθεί είτε ο πίνακας περιλαμβάνει στοιχείο caption
, είτε όχι. Εάν χρησιμοποιούνται και τα δύο, η παράμετρος summary
δεν πρέπει να έχει διπλότυπεο το στοιχείο caption
.
Αν και το WCAG 2 δεν απαγορεύει τη χρήση πινάκων διάταξης, συνιστώνται διατάξεις που βασίζονται σε CSS προκειμένου να διατηρείται η καθορισμένη σημασιολογική έννοια των στοιχείων HTML table
και να διατηρείται η πρακτική κωδικοποίησης διαχωρισμού της παρουσίασης από το περιεχόμενο. Ωστόσο, εάν χρησιμοποιείται ένας πίνακας διάταξης, τότε η παράμετρος summary
δεν χρησιμοποιείται ή είναι null. Ο σκοπός ενός πίνακα διάταξης είναι ο έλεγχος της τοποθέτησης περιεχομένου. Ο ίδιος ο πίνακας είναι "διάφανος" στον χρήστη. Μια παράμετρος summary
θα "έσπαγε" τη διαφάνεια δίνοντας προσοχή στον πίνακα. Είναι αποδεκτή μια παράμετρος summary
με τιμή null (summary=""
) σε πίνακες διάταξης.
Αυτό το παράδειγμα δείχνει ένα πρόγραμμα δρομολόγιων λεωφορείου. Ο αριθμός διαδρομής και η κατεύθυνση περιλαμβάνονται στην παράμετρο summary
μαζί με πληροφορίες για τον τρόπο χρήσης του προγράμματος.
Παράδειγμα κώδικα:
<table summary="Schedule for Route 7 going downtown. Service begins
at 4:00 AM and ends at midnight. Intersections are listed in the top row.
Find the intersection closest to your starting point or destination, then read
down that column to find out what time the bus leaves that intersection.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
…
</table>
Σε αυτό το παράδειγμα χρησιμοποιούνται και παράμετρος summary
και στοιχείο caption
. Το στοιχείο caption
προσδιορίζει τη διαδρομή του λεωφορείου. Η παράμετρος summary
βοηθά τους χρήστες με τύφλωση να καταλάβουν πώς θα χρησιμοποιήσουν το πρόγραμμα. Οι εφαρμογές ανάγνωσης οθόνης διαβάζουν το caption
, ακολουθούμενο από την summary
.
Παράδειγμα κώδικα:
<table summary="Intersections are listed in row 1.
Find the intersection closest to your starting point
or destination, then read down that column to find
out what time the bus leaves that intersection.
Service begins at 4:00 AM and ends at midnight.">
<caption>Route 7 Downtown (Weekdays)</caption>
…
</table>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "παράμετρος summary" (summary attribute)
Ελέγξτε για πίνακες διάταξης: καθορίστε εάν το περιεχόμενο έχει σχέση με άλλο περιεχόμενο τόσο στη στήλη, όσο και στη γραμμή.
Εάν "όχι", ο πίνακας είναι ένας πίνακας διάταξης.
Εάν "όχι", ο πίνακας είναι ένας πίνακας δεδομένων.
Εάν ο πίνακας είναι πίνακας διάταξης, ελέγξτε ότι η παράμετρος summary
δεν είναι παρούσα ή ότι η παράμετρος summary
είναι null.
Εάν ο πίνακας είναι ένας πίνακας δεδομένων και υπάρχει μία παράμετρος summary
, ελέγξτε ότι η παράμετρος summary
περιγράφει την οργάνωση του πίνακα ή εξηγεί τον τρόπο χρήσης του πίνακα
Εάν υπάρχει και παράμετρος summary
και στοιχείο caption
για αυτόν τον πίνακα δεδομένων, ελέγξτε ότι η summary
δημιουργεί διπλότυπο του caption
.
Για πίνακες διάταξης, το #2 είναι αληθές.
Για πίνακες δεδομένων, τα #3 και #4 είναι αληθή.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφύγει σημαντικά σφάλματα που είναι γνωστό ότι προκαλούν προβλήματα σε σε υποστηρικτικές τεχνολογίες όταν προσπαθούν να αναλύσουν περιεχόμενο, το οποίο αφορά σε ετικέτες ανοίγματος και κλεισίματος που δεν χρησιμοποιούνται σύμφωνα με την προδιαγραφή. Αυτά τα σφάλματα μπορούν να αποφεύγουν με τη χρήση του μηχανισμού της HTML ή XHTML, για να καθοριστεί η τεχνολογία και η έκδοσή της και με τη διασφάλιση ότι η Ιστοσελίδα δεν εμπεριέχει αυτούς τους τύπους σφαλμάτων. Υπάρχουν αρκετές λειτουργίες επικύρωσης που μπορεί να χρησιμοποιήσει ο προγραμματιστής: οι αναφορές επικύρωσης γενικά αναφέρουν αυτούς τους τύπους σφαλμάτων. Αυτή η τεχνική αφορά μόνο σφάλματα που σχετίζονται με λανθασμένης μορφής ετικέτες ανοίγματος και κλεισίματος. Η δήλωση τύπου εγγράφου δεν είναι αυστηρά απαραίτητη για αυτόν τον τύπο αξιολόγησης, αλλά ο προσδιορισμός της δήλωσης τύπου εγγράφου κάνει πιο εύκολη τη χρήση λειτουργίας επικύρωσης.
Σελίδες HTML περιλαμβάνουν μια δήλωση τύπου εγγράφου (μερικές φορές αναφέρεται ως πρόταση !DOCTYPE
). Ο προγραμματιστής μπορεί να χρησιμοποιήσει offline ή online λειτουργίες επικύρωσης (δείτε την ενότητα "Πόροι" παρακάτω), για να ελέγξει ότι όλες οι τιμές της παραμέτρου id είναι μοναδικές και ότι οι ετικέτες ανοίγματος και κλεισίματος χρησιμοποιούνται σύμφωνα με την προδιαγραφή.
Όπως άλλα έγγραφα XML, τα έγγραφα XHTML παραπέμπουν σε έναν ορισμό τύπου εγγράφου (Document Type Definition - DTD) ή σε άλλο τύπο σχήματος XML. Ο προγραμματιστής μπορεί να χρησιμοποιήσει offline ή online λειτουργίες επικύρωσης (συμπεριλαμβανομένων εργαλείων επικύρωσης ενσωματωμένων σε λειτουργίες επεξεργασίας), για να ελέγξει ότι οι ετικέτες ανοίγματος και κλεισίματος χρησιμοποιούνται σύμφωνα με την προδιαγραφή.
Όταν ένας ιστότοπος δημιουργεί HTML ή XHTML δυναμικά αντί μόνο της εξυπηρέτησης στατικών σελίδων, ο προγραμματιστής μπορεί να χρησιμοποιήσει "XHTMLUnit" (XHTMLUnit), "XML Test Suite" (XML Test Suite) ή παρεμφερές πλαίσιο για να εξετάσει τον κώδικα XHTML που δημιουργήθηκε.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Το έγγραφο "Μην ξεχνάτε να προσθέσετε doctype" (Do not forget to add a doctype ) από την Πρωτοβουλία Διασφάλισης Ποιότητας (Quality Assurance Initiative) της W3C εξηγεί τι είναι τα doctype και γιατί πρέπει να τα χρησιμοποιείτε.
Το έγγραφο "Συνιστώμενα DTD προς χρήση στο έγγραφο Ιστού" (Recommended DTDs to use in your Web document ) από την Πρωτοβουλία Διασφάλισης Ποιότητας (Quality Assurance Initiative) της W3C είναι μια λίστα συνηθισμένων δηλώσεων.
Το έγγραφο "Πώς επικυρώνω τον κώδικά μου ή ελέγχω για πιθανά σφάλματα;" (How do I validate my code or check for possible errors?) περιγράφει τα εργαλεία στην ελεύθερη εφαρμογή επεξεργασίας HTML-Kit για έλεγχο HTML, CSS και XML.
Για άλλους πόρους δείτε την τεχνική Επικύρωσης Ιστοσελίδων (G134: Validating Web pages).
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε ότι υπάρχουν ετικέτες κλεισίματος για όλα τα στοιχεία με απαιτούμενες ετικέτες κλεισίματος.
Ελέγξτε ότι δεν υπάρχουν ετικέτες κλεισίματος όταν απαγορεύονται.
Ελέγξτε ότι η ένθεση των ετικετών ανοίγματος και κλεισίματος έχει γίνει σωστά
Τα βήματα 1, 2 και 3 είναι αληθή.
Κάθε γλώσσα XML.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφύγει σημαντικά σφάλματα που είναι γνωστό ότι προκαλούν προβλήματα σε σε υποστηρικτικές τεχνολογίες όταν προσπαθούν να αναλύσουν περιεχόμενο. Η καλή μορφή ελέγχεται με την ανάλυση του εγγράφου με μια συμμορφούμενη ανάλυση XML και έλεγχο εάν η αναφορά επικύρωσης αναφέρει τα σφάλματα καλής μορφής. Κάθε συμμορφούμενη λειτουργία ανάλυσης XML πρέπει να ελέγχει την καλή μορφή και να σταματά την κανονική επεξεργασία όταν βρίσκεται σφάλμα καλής μορφής (μια συμμορφούμενη λειτουργία ανάλυσης XML δεν χρειάζεται να υποστηρίζει επικύρωση).
Τα αρχεία XML περιλαμβάνουν μια δήλωση τύπου εγγράφου, μια παράμετρο xsi:schemaLocation ή άλλο τύπο αναφοράς σε σχήμα. Ο προγραμματιστής μπορεί να χρησιμοποιήσει off-line ή online λειτουργίες επικύρωσης, επεξεργασία XML ή IDE με υποστήριξη XML (δείτε παρακάτω την ενότητα "Πόροι") για τον έλεγχο καλής μορφής.
Όταν αρχεία XML δεν περιλαμβάνουν δήλωση τύπου εγγράφου, παράμετρο xsi:schemaLocation ή οδηγία επεξεργασίας με αναφορά σε σχήμα ακόμα κι αν υπάρχει σχήμα για αυτά, το σχετικό σχήμα προσδιορίζεται από μια οδηγία γραμμής εντολών, ένα πλαίσιο διαλόγου χρήστη ή ένα αρχείο διαμόρφωσης, και τα αρχεία XML ελέγχονται σε σχέση με το σχήμα.
Όταν τα αρχεία XML δεν περιλαμβάνουν δήλωση τύπου εγγράφου, παράμετρο xsi:schemaLocation ή οδηγία επεξεργασίας με αναφορά σε σχήμα ακόμα κι αν υπάρχει σχήμα για αυτά, αφαιρείται η παραπομπή από τον χώρο ονόματος για την ανάκτηση ενός εγγράφου σχήματος ή καταλόγου πόρου (Γλώσσα περιγραφής καταλόγου πόρου - Resource Directory Description Language: RDDL), και τα αρχεία XML ελέγχονται σε σχέση με το σχήμα.
Όταν ένας ιστότοπος δημιουργεί XML δυναμικά αντί μόνο της εξυπηρέτησης στατικών σελίδων, ο προγραμματιστής μπορεί να χρησιμοποιήσει "XMLUnit" (XMLUnit), XML Test Suite" (XML Test Suite) ή παρεμφερές πλαίσιο για να εξετάσει τον κώδικα XML που δημιουργήθηκε.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Έγγραφα XML καλής μορφής" (Well-Formed XML Documents) σε "Επεκτάσιμη Γλώσσα Επισημείωσης" (Extensible Markup Language - XML) 1.0 (Τρίτη έκδοση), Σύσταση W3C, 04 Φεβρουαρίου 2004.
"Έγγραφα XML καλής μορφής" (Well-Formed XML Documents) σε "Επεκτάσιμη Γλώσσα Επισημείωσης" (Extensible Markup Language - XML) 1.1, Σύσταση W3C, 04 Φεβρουαρίου 2004.
"4.3.2 Ανάλυση οντοτήτων καλής μορφής" (4.3.2 Well-Formed Parsed Entities) σε "Επεκτάσιμη Γλώσσα Επισημείωσης" (Extensible Markup Language - XML) 1.1, Σύσταση W3C, 04 Φεβρουαρίου 2004.
Για άλλους πόρους δείτε την τεχνική Επικύρωσης ιστοσελίδων (G134: Validating Web pages).
(καμία δεν εμπεριέχεται στη λίστα)
Φορτώστε κάθε αρχείο σε μια λειτουργία ανάλυσης XML για επικύρωση.
Ελέγξτε ότι δεν υπάρχουν σφάλματα καλής μορφής.
Το βήμα #2 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει τις ανακατευθύνσεις στην πλευρά του πελάτη χωρίς να προκαλείται σύγχυση στον χρήστη. Οι ανακατευθύνεις υλοποιούνται κατά προτίμηση στην πλευρά του διακομιστή (δείτε την ενότητα Εφαρμογή αυτόματων ανακατευθύνσεων στην πλευρά του διακομιστή αντί του πελάτη (SVR1: Implementing automatic redirects on the server side instead of on the client side) (SERVER) ), αλλά οι συγγραφείς δεν έχουν πάντα έλεγχο επί των τεχνολογιών στην πλευρά του διακομιστή.
Στις HTML και XHTML, είναι δυνατή η χρήση του στοιχείου meta
με την τιμή της παραμέτρου http-equiv
σε "Ανανέωση" και την τιμή της παραμέτρου content
σε "0" (που σημαίνει μηδέν δευτερόλεπτα), ακολουθούμενου από το URI που η εφαρμογή περιήγησης πρέπει να ζητήσει. Είναι σημαντικό να ρυθμιστεί η λήξη του χρόνου σύνδεσης σε μηδέν, για να αποφευχθεί εμφάνιση περιεχομένου πριν φορτωθεί η νέα σελίδα. Η σελίδα που περιέχει τον κώδικα ανακατεύθυνσης πρέπει να περιέχει μόνο πληροφορίες σχετικά με την ανακατεύθυνση.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Δείτε επίσης την ενότητα Αποτυχία των κριτηρίων επιτυχίας 2.2.1, 2.2.4 και 3.2.5 λόγω χρήσης της εντολής meta refresh με χρονικό όριο (F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh with a time-out).
Βρείτε όλα τα στοιχεία meta
στο έγγραφο.
Για κάθε στοιχείο meta, ελέγξτε εάν περιέχει την παράμετρο http-equiv
με τιμή "refresh" (χωρίς διάκριση πεζών-κεφαλαίων) και την παράμετρο content
με αριθμό μεγαλύτερο από 0 ακολουθούμενο από ;'URL=anyURL'
(όπου anyURL το URI που πρέπει να αντικαταστήσει την τρέχουσα σελίδα).
Το βήμα #2 είναι ψευδές.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτή της τεχνικής είναι να προσδιορίσει τον σκοπό ενός συνδέσμου από τον σύνδεσμο και το περιβάλλον του στοιχείου λίστας του. Το στοιχείο λίστας που περιβάλλει τον σύνδεσμο παρέχει περιβάλλον για έναν κατά τ' άλλα ασαφή σύνδεσμο, όταν το στοιχείο συνδέσμου είναι το πλησιέστερο εσωκλείον απογονικό στοιχείο επιπέδου μπλοκ. Η περιγραφή επιτρέπει στον χρήστη να ξεχωρίσει αυτό το σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο. Να σημειωθεί ότι απλά η παροχή του URI του προορισμού δεν είναι γενικώς επαρκώς περιγραφική.
Σημείωση: Αυτές οι περιγραφές θα είναι περισσότερο χρήσιμες στον χρήστη εάν οι πρόσθετες πληροφορίες που απαιτούνται για την κατανόηση του συνδέσμου, προηγούνται του συνδέσμου. Εάν οι πρόσθετες πληροφορίες ακολουθούν τον σύνδεσμο, μπορεί να υπάρξει σύγχυση και δυσκολία για τους χρήστες του προγράμματος ανάγνωσης οθόνης που διαβάζουν τη σελίδα με τη σειρά (από επάνω προς τα κάτω).
Παράδειγμα κώδικα:
<ul>
<li>
Check out the video report for last year's
<a href="festival.htm">National Folk Festival</a>.
</li>
<li>
<a href="listen.htm">Listen to the instruments</a>
</li>
<li>
Guitar Man: George Golden talks about
<a href="mkguitars.htm">making guitars</a>.
</li>
</ul>
Παράδειγμα κώδικα:
<ul>
<li>
<a href="tomb_raider.htm">Tomb Raider: Legend</a>
<a href="tomb_raider_images.htm">See Images</a>
<a href="tomb_raider.mpeg">(Download Demo)</a>
</li>
<li>
<a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
<a href="fear_extraction_images.htm">See Images</a>
<a href="fear_extraction.mpeg">(Download Demo)</a>
</li>
<li>
<a href="call_of_duty.htm">Call of Duty 2</a>
<a href="call_of_duty_images.htm">See Images</a>
<a href="call_of_duty.mpeg">(Download Demo)</a>
</li>
<li>
<a href="Warhammer 40K.htm">Warhammer 40K</a>
<a href="warhammer_40k_images.htm">See Images</a>
<a href="Warhammer_40k.mpeg">(Download Demo)</a>
</li>
</ul>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Ελέγξτε ότι ο σύνδεσμος είναι μέρος ενός στοιχείου λίστας.
Ελέγξτε ότι το κείμενο του συνδέσμου μαζί με το κείμενο του περικλείοντος στοιχείου λίστας, περιγράφει τον σκοπό του συνδέσμου
Οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Το JAWS 5.0 και νεότερα περιλαμβάνουν τις ακόλουθες πληκτρολογήσεις:
alt+leftArrow: ανάγνωση προηγούμενης πρότασης
alt+rightArrow: ανάγνωση επόμενης πρότασης
alt+NumPad 5: ανάγνωση τρέχουσας πρότασης
Ctrl+NumPad5: ανάγνωση τρέχουσας παραγράφου
Η πληκτρολόγηση "ανάγνωση τρέχουσας παραγράφου" υποστηρίζει τα παραδείγματα 1, 2 και 4 παρακάτω. Εάν πατηθεί alt+numPad5 όταν ένας σύνδεσμος έχει επισήμανση, η πρόταση διαβάζεται χωρίς αλλαγή της επισήμανσης.
Η πληκτρολόγηση "ανάγνωση τρέχουσας παραγράφου" υποστηρίζει το παράδειγμα 3 παρακάτω. Εάν πατηθεί Ctrl+NumPad 5 όταν ένας σύνδεσμος έχει επισήμανση, διαβάζεται όλη παράγραφος χωρίς αλλαγή της επισήμανσης.
Το Window-Eyes 5.5 έχει ειδικές συντομεύσεις (hotkeys) για την ανάγνωση της τρέχουσας πρότασης και της τρέχουσας παραγράφου. Έτσι, το Window-Eyes 5.5 υποστηρίζει τα παραδείγματα παρακάτω.
Για περιήγηση στο διαδίκτυο με το WindowEyes, πρέπει να βρίσκεστε σε κατάσταση περιήγησης. Τα ειδικά πλήκτρα τρέχουσας πρότασης και τρέχουσας παραγράφου δεν λειτουργούν στην κατάσταση περιήγησης στην έκδοση 6.1.
Οι προεπιλεγμένες εργοστασιακές ρυθμίσεις για την ανάγνωση του περιβάλλοντος του συνδέσμου, είναι ως εξής:
Ρυθμίσεις επιφάνειας εργασίας:
Χαρακτήρας = CTRL-NUMPAD-LEFT ARROW
Λέξη = CTRL-NUMPAD-RIGHT ARROW
Γραμμή = CTRL-NUMPAD-CENTER
Πρόταση = Μη διαθέσιμο στην κατάσταση περιήγησης
(Η εντολή "Επόμενη πρόταση" δεν ορίζεται εξ ορισμού στην κατάσταση επιφάνειας εργασίας, αλλά η επόμενη γραμμή είναι κάτω (DOWN) βέλος.)
Επόμενη παράγραφος = P
Προηγούμενη παράγραφος = Shift P
Τρέχουσα παράγραφος = Μη διαθέσιμο στην κατάσταση περιήγησης
Φορητός υπολογιστής
Χαρακτήρας = ALT-SHIFT-LESS THAN
Προηγούμενη λέξη = ALT-SHIFT-J
Λέξη = ALT-SHIFT-K
Επόμενη = ALT-SHIFT-L
Προηγούμενη πρόταση = ALT-SHIFT-7
Πρόταση = μη διαθέσιμο στην κατάσταση περιήγησης
Επόμενη πρόταση = μη διαθέσιμο στην κατάσταση περιήγησης
Παράγραφος = δεν ορίζεται σε φορητό υπολογιστή εξ ορισμού
Προηγούμενη γραμμή = ALT-SHIFT-U
Γραμμή = ALT-SHIFT-I
Επόμενη γραμμή = ALT-SHIFT-O
Η εντολή "εκφώνηση γονικού στοιχείου" στο Fire Vox (Ctrl+Shift+u) υποστηρίζει το παράδειγμα 3. Αυτή η πληκτρολόγηση δουλεύει χωρίς αλλαγή της επισήμανσης. Το Fire Vox είναι μια ελεύθερη εφαρμογή ανάγνωσης οθόνης σχεδιασμένη ειδικά για το Firefox 1.0 και νεότερες εκδόσεις. Υποστηρίζει Windows, Macintosh και Linux.
Σκοπός αυτή της τεχνικής είναι να προσδιορίσει τον σκοπό ενός συνδέσμου από τον σύνδεσμο στο περιβάλλον της παραγράφου του. Η παράγραφος που περιβάλλει τον σύνδεσμο παρέχει περιβάλλον για έναν κατά τ' άλλα ασαφή σύνδεσμο, όταν η παράγραφος είναι το πλησιέστερο εσωκλείον απογονικό στοιχείο επιπέδου μπλοκ. Η περιγραφή επιτρέπει στον χρήστη να ξεχωρίσει αυτό το σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο. Να σημειωθεί ότι απλά η παροχή του URI του προορισμού δεν είναι γενικώς επαρκώς περιγραφική.
Σημείωση: Αυτές οι περιγραφές θα είναι περισσότερο χρήσιμες στον χρήστη εάν οι πρόσθετες πληροφορίες που απαιτούνται για την κατανόηση του συνδέσμου, προηγούνται του συνδέσμου. Εάν οι πρόσθετες πληροφορίες ακολουθούν τον σύνδεσμο, μπορεί να υπάρξει σύγχυση και δυσκολία για τους χρήστες του προγράμματος ανάγνωσης οθόνης που διαβάζουν τη σελίδα με τη σειρά (από επάνω προς τα κάτω).
Στήλη ανακοινώσεων σε μια Ιστοσελίδα Παραδοσιακού Φεστιβάλ.
Παράδειγμα κώδικα:
<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>
<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive
National Heritage Fellowships.
<a href="nheritage.html">[Read more...]</a>
</p>
…
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Ελέγξτε ότι ο σύνδεσμος είναι μέρος μιας παραγράφου.
Ελέγξτε ότι το κείμενο του συνδέσμου μαζί με το κείμενο της περικλείουσας παραγράφου, περιγράφει τον σκοπό του συνδέσμου
Οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες που περιέχουν συνδέσμους.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτή της τεχνικής είναι να προσδιορίσει τον σκοπό ενός συνδέσμου από τον σύνδεσμο στο περιβάλλον του πίνακα δεδομένων του. Αυτό το περιβάλλον είναι το κελί πίνακα που περικλείει τον σύνδεσμο και οι επικεφαλίδες που σχετίζονται με το κελί. Το περιβάλλον του πίνακα δεδομένων παρέχει τον σκοπό ενός κατά τ' άλλα ασαφούς συνδέσμου, όταν το κελί πίνακα είναι το πλησιέστερο εσωκλείον απογονικό στοιχείο επιπέδου μπλοκ. Επιτρέπει σε έναν χρήστη να ξεχωρίσει αυτόν τον σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο. Να σημειωθεί ότι η απλή παροχή του URI του προορισμού δεν είναι επαρκώς περιγραφική για άτομα με αναπηρίες, ιδιαίτερα εκείνους με νοητικές αναπηρίες.
Παράδειγμα κώδικα:
<table>
<tr>
<th></th>
<th id="a1">Alamo</th>
<th id="a2">Budget</th>
<th id="a3">National</th>
<th id="a4">Avis</th>
<th id="a5">Hertz</th>
</tr>
<tr>
<th id="b1">Economy cars</th>
<td headers="a1 b1"><a href="econ_ala.htm">$67/day</a></td>
<td headers="a2 b1"><a href="econ_bud.htm">$68/day</a></td>
<td headers="a3 b1"><a href="econ_nat.htm">$72/day</a></td>
<td headers="a4 b1"><a href="econ_av.htm">$74/day</a></td>
<td headers="a5 b1"><a href="econ_hz.htm">$74/day</a></td>
</tr>
<tr>
<th id="b2">Compact cars</th>
<td headers="a1 b2"><a href="comp_ala.htm">$68/day</a></td>
<td headers="a2 b2"><a href="comp_bud.htm">$69/day</a></td>
<td headers="a3 b2"><a href="comp_nat.htm">$74/day</a></td>
<td headers="a4 b2"><a href="comp_av.htm">$76/day</a></td>
<td headers="a5 b2"><a href="comp_hz.htm">$76/day</a></td>
</tr>
<tr>
<th id="b3">Mid-sized cars</th>
<td headers="a1 b3"><a href="mid_ala.htm">$79/day</a></td>
<td headers="a2 b3"><a href="mid_bud.htm">$80/day</a></td>
<td headers="a3 b3"><a href="mid_nat.htm">$83/day</a></td>
<td headers="a4 b3"><a href="mid_av.htm">$85/day</a></td>
<td headers="a5 b3"><a href="mid_hz.htm">$85/day</a></td>
</tr>
<tr>
<th id="b4">Full-sized cars</th>
<td headers="a1 b4"><a href="full_ala.htm">$82/day</a></td>
<td headers="a2 b4"><a href="full_bud.htm">$83/day</a></td>
<td headers="a3 b4"><a href="full_nat.htm">$89/day</a></td>
<td headers="a4 b4"><a href="full_av.htm">$91/day</a></td>
<td headers="a5 b4"><a href="full_hz.htm">$91/day</a></td>
</tr>
</table>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Ελέγξτε ότι ο σύνδεσμος βρίσκεται σε ένα κελί πίνακα.
Ελέγξτε ότι το κείμενο του συνδέσμου μαζί με το κείμενο της συσχετισμένης επικεφαλίδας πίνακα, περιγράφει τον σκοπό του συνδέσμου.
Οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Η εντολή εκμετάλλευσης αυτής της τεχνικής στο JAWS είναι "JAWS KEY + T".
Σκοπός αυτή της τεχνικής είναι να περιγράψει τον σκοπό ενός συνδέσμου από το περιβάλλον που παρέχεται μέσω του περιβάλλοντος της επικεφαλίδας του. Η επικεφαλίδα που προηγείται παρέχει περιβάλλον για έναν, κατά τ' άλλα, ασαφή σύνδεσμο. Η περιγραφή επιτρέπει στον χρήστη να ξεχωρίσει αυτό το σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο.
Σημείωση: Όποτε είναι εφικτή, παροχή κειμένου συνδέσμου που προσδιορίζει τον σκοπό του συνδέσμου χωρίς την ανάγκη πρόσθετου περιβάλλοντος.
Οι πληροφορίες για κάθε ξενοδοχείο συνίστανται από το όνομα του ξενοδοχείου, μια περιγραφή και μια σειρά συνδέσμων για έναν χάρτη, φωτογραφίες, οδηγίες κατεύθυνσης, αξιολογήσεις επισκεπτών και μια φόρμα κράτησης.
Παράδειγμα κώδικα:
<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul>
Παράδειγμα κώδικα:
<h2>Annual Report 2006-2007</h2>
<p>
<a href="annrep0607.html">(HTML)</a>
<a href="annrep0607.pdf">(PDF)</a>
<a href="annrep0607.rtf">(RTF)</a>
</p>
Παράδειγμα κώδικα:
<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
<p>this week was a stellar week for the stock market as investing in gold rose 2%.
<a href="Stockmarket_05052007.htm>More here</a></p>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Βρείτε το στοιχείο επικεφαλίδας που προηγείται του συνδέσμου
Ελέγξτε ότι το κείμενο του συνδέσμου μαζί με το κείμενο της επικεφαλίδας, περιγράφει τον σκοπό του συνδέσμου.
Το #2 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Αν και οι πληροφορίες περιβάλλοντος σχετίζονται μέσω προγραμματισμού με τον σύνδεσμο, η υποστηρικτική τεχνολογία παρουσιάζει έλλειψη εντολών ανάγνωσης του στοιχείου γονικής λίστας, χωρίς απομάκρυνση της εστίασης από τον σύνδεσμο.
Σκοπός αυτής της τεχνικής είναι η περιγραφή του σκοπού ενός συνδέσμου σε μια ένθετη λίστα από το περιβάλλον που παρέχεται από το στοιχείο λίστας, στο οποίο η λίστα είναι ένθετη. Αυτό το στοιχείο λίστας παρέχει περιβάλλον για έναν, κατά τ' άλλα, ασαφή σύνδεσμο. Η περιγραφή επιτρέπει στον χρήστη να ξεχωρίσει αυτό το σύνδεσμο από συνδέσμους στην Ιστοσελίδα που οδηγούν σε άλλους προορισμούς και βοηθά τον χρήστη να καθορίσει εάν θα ακολουθήσει αυτόν τον σύνδεσμο.
Καθώς οι υφιστάμενες υποστηρικτικές τεχνολογίες δεν περιλαμβάνουν εντολές αναζήτησης πληροφοριών περιβάλλοντος που παρέχονται από στοιχεία γονικής λίστας, η χρήση αυτής της τεχνικής απαιτεί οι χρήστες να πλοηγηθούν στη λίστα κατά ένα στοιχείο τη φορά. Έτσι, αυτή η τεχνική ενδέχεται να μην είναι κατάλληλη για πολύ μεγάλες ή υπερβολικής ένθεσης λίστες.
Σημείωση: Όποτε είναι εφικτή, παροχή κειμένου συνδέσμου που προσδιορίζει τον σκοπό του συνδέσμου χωρίς την ανάγκη πρόσθετου περιβάλλοντος.
Παράδειγμα κώδικα:
<ul>
<li>Annual Report 2005-2006
<ul>
<li><a href="annrep0506.html">(HTML)</a></li>
<li><a href="annrep0506.pdf">(PDF)</a></li>
<li><a href="annrep0506.rtf">(RTF)</a></li>
</ul>
</li>
<li>Annual Report 2006-2007
<ul>
<li><a href="annrep0607.html">(HTML)</a></li>
<li><a href="annrep0607.pdf">(PDF)</a></li>
<li><a href="annrep0607.rtf">(RTF)</a></li>
</ul>
</li>
</ul>
Οι πληροφορίες για κάθε ξενοδοχείο συνίστανται από το όνομα του ξενοδοχείου, μια περιγραφή και μια σειρά συνδέσμων για έναν χάρτη, φωτογραφίες, οδηγίες κατεύθυνσης, αξιολογήσεις επισκεπτών και μια φόρμα κράτησης.
Παράδειγμα κώδικα:
<ul>
<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
</li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul>
</li>
</ul>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε σύνδεσμο στο περιεχόμενο που χρησιμοποιεί αυτή την τεχνική:
Βρείτε το στοιχείο ul
ή ol που περιέχει τον σύνδεσμο
Ελέγξτε ότι αυτό το στοιχείο λίστας (ul
, ol
) είναι απόγονος ενός στοιχείου li
Ελέγξτε ότι το κείμενο του συνδέσμου μαζί με το κείμενο του στοιχείου li, περιγράφει τον σκοπό του συνδέσμου.
Οι παραπάνω έλεγχοι είναι αληθείς.
HTML 4.01 Transitional και XHTML 1.0 Transitional
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφευχθεί η σύγχυση που μπορεί να προκληθεί από την εμφάνιση νέων παραθύρων για τα οποία δεν υπήρξε αίτηση από τον ο χρήστης. Το ξαφνικό άνοιγμα παραθύρων μπορεί να αποπροσανατολίσει ή να αγνοηθεί πλήρως από μερικούς χρήστες. Στις HTML 4.01 Transitional και XHTML 1.0 Transitional, η παράμετρος target
μπορεί να χρησιμοποιηθεί για το άνοιγμα ενός νέου παραθύρου, αντί για αυτόματα αναδυόμενα. (Η παράμετρος target
διαγράφεται από τις HTML 4.01 Strict και XHTML 1.0 Strict.) Να σημειωθεί ότι η μη χρήση του target
επιτρέπει στον χρήστη να αποφασίσει εάν ένα νέο παράθυρο θα πρέπει να ανοίξει ή όχι. Η χρήση της παραμέτρου target
παρέχει μια αρκετά σαφή ένδειξη, με δυνατότητα ανάγνωσης από υπολογιστή, ότι θα ανοίξει ένα νέο παράθυρο. Πράκτορες χρήστη μπορούν να πληροφορήσουν τον χρήστη και επίσης να διαμορφωθούν για να μην ανοίγουν το νέο παράθυρο. Για εκείνους που δεν χρησιμοποιούν υποστηρικτική τεχνολογία, η ένδειξη θα διατίθεται επίσης από το κείμενο του συνδέσμου.
Το παρακάτω παράδειγμα απεικονίζει τη χρήση της παραμέτρου target
σε έναν σύνδεσμο που υποδεικνύει ότι θα ανοίξει ένα νέο παράθυρο.
Παράδειγμα κώδικα:
<a href="help.html" target="_blank">Show Help (opens new window)</a>
Ενεργοποιήστε κάθε σύνδεσμο στο έγγραφο για να ελέγξετε εάν ανοίγει νέο παράθυρο.
Για κάθε σύνδεσμο που ανοίγει ένα νέο παράθυρο, ελέγξτε ότι χρησιμοποιεί την παράμετρο target
.
Ελέγξτε ότι το κείμενο συνδέσμου περιέχει πληροφορίες που υποδεικνύουν ότι ο σύνδεσμος θα ανοίξει σε ένα νέο παράθυρο.
Οι έλεγχοι #2 και #3 είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στον χρήστη να ελέγχει πότε μια ενέργεια εκτελείται, αντί να πραγματοποιείται αυτή η ενέργεια ως παρενέργεια της επιλογής μιας τιμής για το στοιχείο select
. Ο χρήστης ενδέχεται να επιθεωρήσει τις διαφορετικές τιμές του στοιχείου select
ή να επιλέξει τυχαία την λανθασμένη τιμή, χωρίς να προκαλέσει την εμφάνιση της ενέργειας. Όταν ο χρήστης είναι ικανοποιημένος με την επιλογή, θα επιλέξει το κουμπί για την εκτέλεση της ενέργειας.
Αυτό είναι ιδιαίτερα σημαντικό για χρήστες που επιλέγουν την τιμή του στοιχείου select
μέσω του πληκτρολογίου, καθώς η πλοήγηση στις επιλογές του στοιχείου select
αλλάζει την τιμή του στοιχείου ελέγχου.
Μια Ιστοσελίδα επιτρέπει στον χρήστη να επιλέξει κάθε μήνα, κάθε έτους και να εμφανίσει το ημερολόγιο για αυτόν τον μήνα. Αφού ο χρήστης ορίσει τον μήνα και το έτος, εμφανίζει το ημερολόγιο πατώντας το κουμπί "Εμφάνιση". Αυτό το παράδειγμα απαντά στη δημιουργία αρχείου εντολών στην πλευρά του πελάτη για την υλοποίηση της ενέργειας.
Παράδειγμα κώδικα:
<label for="month">Month:</label>
<select name="month" id="month">
<option value="1">January</option>
<option value="2"> February</option>
...
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">
Ένα στοιχείο select
περιέχει μια λίστα πιθανών ενεργειών. Η ενέργεια δεν εκτελείται έως ότου ο χρήστης πατήσει το κουμπί "Εκτέλεση".
Παράδειγμα κώδικα:
<form action="http://somesite.com/action" method="post">
<label for="action">Options:</label>
<select name="action" id="action">
<option value="help">Help</option>
<option value="reset">Reset</option>
<option value="submit">Submit</option>
</select>
<button type="submit" name="submit" value="submit">Do It </button>
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Jukka Korpela: Αναπτυσσόμενα μενού πλοήγησης σε HTML" (Jukka Korpela: Navigational pulldown menus in HTML)
Για κάθε συνδυασμό στοιχείου/στοιχείου button select
:
Ελέγξτε ότι η επισήμανση (συμπεριλαμβανομένης της επισήμανσης πληκτρολογίου) σε μια επιλογή στο στοιχείο select
, δεν οδηγεί σε οποιεσδήποτε ενέργειες
Ελέγξτε ότι η επιλογή του κουμπιού εκτελεί την ενέργεια που σχετίζεται με την υφιστάμενη τιμή select
Όλοι οι έλεγχοι είναι αληθείς.
Σελίδες HTML και XHTML που συλλέγουν εισαγωγή δεδομένων χρήστη.
Αυτή η τεχνική σχετίζεται με:
Το στοιχείο optgroup
δεν υποστηρίζεται ευρέως από προγράμματα ανάγνωσης οθόνης.
Η παράμετρος label
για τα στοιχεία option
και optgroup
υποστηρίζεται με μη συνεκτικό τρόπο σε πράκτορες χρήστη και δεν υποστηρίζεται ευρέως από υποστηρικτικές τεχνολογίες.
Σκοπός αυτής της τεχνικής είναι η ομαδοποίηση στοιχείων σε μια λίστα επιλογής. Μια λίστα επιλογής είναι ένα σύνολο επιτρεπτών τιμών για ένα στοιχείο ελέγχου φόρμας, όπως μια λίστα πολλαπλής επιλογής ή ένα σύνθετο πλαίσιο. Συχνά οι λίστες επιλογής έχουν ομάδες σχετικών επιλογών. Αυτές οι ομάδες θα πρέπει να προσδιορίζονται σημασιολογικά, αντί να οριοθετούν απλώς τις ομάδες με καταχωρήσεις λίστας τύπου "dummy". Αυτό επιτρέπει στους πράκτορες χρήστη να συγκεντρώσουν τις επιλογές βάσει ομάδας για να υποστηρίξουν πιο γρήγορη σάρωση των επιλογών και να υποδείξουν σε ποια ομάδα βρίσκεται μια επιλογή ενδιαφέροντος. Βοηθά επίσης στον οπτικό χωρισμό για μεγάλες λίστες, ώστε οι χρήστες να μπορούν πιο εύκολα να εντοπίσουν τις επιλογές που τους ενδιαφέρουν.
Σε HTML, το στοιχείο select
χρησιμοποιείται για τη δημιουργία λιστών πολλαπλής επιλογής και σύνθετων πλαισίων. Οι διάφορες αποδεκτές επιλογές υποδεικνύονται έκαστη με τα στοιχεία option
. Για την ομαδοποίηση επιλογών, χρησιμοποιήστε το στοιχείο optgroup
με τα σχετικά στοιχεία option
εντός του στοιχείου. Βάλτε ετικέτα στην ομάδα με την παράμετρο "label" ώστε οι χρήστες να γνωρίζουν τι να περιμένουν εντός της ομάδας.
Το στοιχείο optgroup
θα πρέπει να βρίσκεται ακριβώς μέσα στο στοιχείο select
και τα στοιχεία option
ακριβώς μέσα στο optgroup
. Είναι πιθανό για ένα στοιχείο select
να περιέχει τόσο μεμονωμένα στοιχεία option
, όσο και ομάδες optgroup
, αν και οι συγγραφείς θα πρέπει να εξετάσουν εάν αυτός είναι ο πραγματικός σκοπός χρήσης του. Δεν είναι εφικτή η ένθεση του στοιχείου optgroup
, συνεπώς μόλις ένα επίπεδο ομαδοποίησης μπορεί να πραγματοποιηθεί εντός ενός στοιχείου select
.
Το παρακάτω σύνθετο πλαίσιο συλλέγει δεδομένα για αγαπημένα φαγητά. Η ομαδοποίηση βάσει τύπου επιτρέπει στους χρήστες να επιλέγουν την προτίμησή τους πιο γρήγορα.
Παράδειγμα κώδικα:
<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form>
Το παρακάτω παράδειγμα απεικονίζει πώς μπορεί ένα πλαίσιο πολλαπλής επιλογής να χρησιμοποιήσει το στοιχείο optrgroup
.
Παράδειγμα κώδικα:
<form action="http://example.com/prog/someprog" method="post">
<label for="related_techniques"><strong>Related Techniques:</strong></label>
<select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
<optgroup label="General Techniques">
<option value="G1">G1: Adding a link at the top of each page ... </option>
<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
<option value="G5">G5: Allowing users to complete an activity without any time... </option>
<option value="G8">G8: Creating an extended audio description for the ... </option>
<option value="G9">G9: Creating captions for live synchronized media... </option>
<option value="G10">G10: Creating components using a technology that ... </option>
</optgroup>
<optgroup label="HTML Techniques">
<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
<option value="H4">H4: Creating a logical tab order through links, form ... </option>
<option value="H24">H24: Providing text alternatives for the area ...
</option>
</optgroup>
<optgroup label="CSS Techniques">
<option value="C6">C6: Positioning content based on structural markup... </option>
<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
</optgroup>
<optgroup label="SMIL Techniques">
<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
</optgroup>
<optgroup label="ARIA Techniques">
<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
<option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form ... </option>
</optgroup>
<optgroup label="Common Failures">
<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
</optgroup>
</select>
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι το σύνολο επιλογών εντός μιας λίστας επιλογής για να δείτε εάν υπάρχουν ομάδες σχετικών επιλογών.
Εάν υπάρχουν ομάδες σχετικών επιλογών, θα πρέπει να ομαδοποιηθούν με το optgroup
.
Ελέγξτε ότι το #2 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Οι υποστηρικτικές τεχνολογίες παρέχουν διαφορετικά επίπεδα υποστήριξης για εκφώνηση της παραμέτρου title. Ορισμένα δεν περιλαμβάνουν χαρακτηριστικά που επιτρέπουν σε χρήστες να έχουν πρόσβαση σε πληροφορίες που παρέχονται μέσω της παραμέτρου title.
Η υλοποίηση αυτής της τεχνικής με την παράμετρο title
είναι επαρκής μόνο όταν η παράμετρος title
υποστηρίζει την προσβασιμότητα. Το περιεχόμενο της παραμέτρου title
χρειάζεται να είναι διαθέσιμο για όλους τους χρήστες πληκτρολογίου (όχι μόνο εκείνους με λογισμικό μετατροπής κειμένου σε ομιλία) προκειμένου η παράμετρος αυτή να υποστηρίζει την προσβασιμότητα.
Tα JAWS 6.2 (και νεότερη έκδοση) και WindowEyes 5.0 (και νεότερη έκδοση), υποστηρίζουν τα στοιχεία abbr και acronym. Μπορούν όλα να ρυθμιστούν για εκφώνηση της παραμέτρου title όταν αυτά τα στοιχεία εμφανίζονται, αλλά αυτή δεν είναι προεπιλεγμένη ρύθμιση και συχνά δεν ενεργοποιείται από τους χρήστες.
Πολλοί πράκτορες χρήστη γραφικών αποδίδουν κείμενο εσώκλειστο εντός στοιχείου abbr
ή acronym
με μια διάστικτη με τελείες γραμμή κάτω ή γύρω από αυτό. Επιπρόσθετα, όταν το ποντίκι αφεθεί πάνω από το στοιχείο, εμφανίζεται η επέκταση ως εργαλείο βοήθειας.
Στο Internet Explorer 7 και σε παλαιότερες εκδόσεις, τα στοιχεία με σήμανση χρήσης του στοιχείου abbr
δεν εμφανίζονται μαζί με οποιαδήποτε πρόσθετη μορφοποίηση. Για το IE 6 και παλαιότερες εκδόσεις, η εκτεταμένη έκδοση δεν εμφανίζεται ως ένα εργαλείο βοήθειας όταν το ποντίκι αφεθεί πάνω από το στοιχείο.
Εντός ενός δεδομένου πράκτορα χρήστη ή υποστηρικτικής τεχνολογίας, τα στοιχεία abbr
και acronym
παρουσιάζονται στους χρήστες με τον ίδιο τρόπο.
Πριν τα γραφικά χρησιμοποιηθούν ευρέως στο διαδίκτυο, οι χαρακτήρες ASCII διαρρυθμίζονταν συχνά για να σχηματίζουν εικόνες ή γραφήματα. Αν και η τέχνη ASCII δεν χρησιμοποιείται συχνά πλέον στον Ιστό, πρέπει να θυμόμαστε ότι σε περίπτωση που χρησιμοποιείται, προκαλεί σύγχυση σε άτομα με τύφλωση που αποκτούν πρόσβαση στο διαδίκτυο μέσω προγραμμάτων ανάγνωσης οθόνης. Εάν χρησιμοποιηθεί, θα πρέπει να έχει επίσης μία επεξήγηση κειμένου για την εικόνα. Προτείνεται επίσης η παρουσία ενός συνδέσμου για παράκαμψη της τέχνης ASCII (αν και αυτό δεν απαιτείται).
Τα emoticon είναι ιδιαιτέρως δημοφιλή. Περιλαμβάνουν χαρακτήρες ASCII που σχηματίζουν εκφράσεις προσώπου και άλλους τρόπους επικοινωνίας ενός emoticon. Μπορεί να προκαλέσουν σύγχυση για χρήστες προγραμμάτων ανάγνωσης οθόνης. Όταν είναι εφικτό, είναι καλύτερο απλά να χρησιμοποιήσετε μία λέξη όπως "χαμόγελο", αντί για ένα emoticon. Εάν όμως χρησιμοποιηθούν emoticon, θα πρέπει να έχουν εναλλακτικό κειμένου. Σε ορισμένα περιβάλλοντα, σε λογισμικό ιστολογίου και forum, πρόσθετες εφαρμογές είναι διαθέσιμες για την αυτόματη μετατροπή χαρακτήρων ASCII που χρησιμοποιούνται ως emoticon σε εικόνες HTML με εναλλακτικά κειμένου.
Το leetspeak χρησιμοποιεί διάφορους συνδυασμούς χαρακτήρων ASCII για την αντικατάσταση λατινικών γραμμάτων. Το leet έχει γίνει μέρος της κουλτούρας και της αργκό γλώσσας του διαδικτύου. Το leet χρησιμοποιείται συχνά για την εξουδετέρωση φίλτρων κειμένου και ανεπιθύμητης αλληλογραφίας (spam). Είναι συχνά δυσνόητο για άτομα με τύφλωση που χρησιμοποιούν προγράμματα ανάγνωσης οθόνης και επομένως, απαιτεί ένα εναλλακτικό κειμένου προκειμένου να συμμορφωθεί με το κριτήριο επιτυχίας 1.1.1.
Σημείωση: Καθώς η υποστήριξη αυτής της τεχνικής είναι περιορισμένη, συνίσταται οι συγγραφείς να παρέχουν το εναλλακτικό κειμένου σε κείμενο.
Τα παρακάτω δείχνουν τρεις επιλογές παροχής εναλλακτικών για την αναπαράσταση "τρόμου" από ένα emoticon, που πραγματοποιείται από ένα σύμβολο ισότητας, ακολουθούμενο από τον αριθμό οκτώ, μία παύλα και τον αριθμό μηδέν.
Παράδειγμα κώδικα:
=8-0 (fright)
<abbr title="fright">=8-0</abbr>
<img src="fright.gif" alt="fright"/>
Ορίστε μία τέχνη ASCII με μια επεξήγηση της εικόνας που προηγείται. Περιλαμβάνει έναν σύνδεσμο παράκαμψης της τέχνης ASCII. Παράκαμψη παραδείγματος ASCII (Skip ASCII example).
Παράδειγμα κώδικα:
Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII image</a>
LLLLLLLLLLL
__LLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
L _LLLLLLLLLLLLLLLLLLLLLLL
LL LLLLLL~~~LLLLLLLLLLLLLL
_L _LLLLL LLLLLLLLLLLLL
L~ LLL~ LLLLLLLLLLLLL
LL _LLL _LL LLLLLLLL
LL LL~ ~~ ~LLLLLL
L _LLL_LLLL___ _LLLLLL
LL LLLLLLLLLLLLLL LLLLLLLL
L LLLLLLLLLLLLLLL LLLLLL
LL LLLLLLLLLLLLLLLL LLLLL~
LLLLLLLL_______ L _LLLLLLLLLLLLLLLL LLLLLLLL
~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~ LLLLLL
______________LLL LLLLLLLLLLLLLL ______LLLLLLLLL_
LLLLLLLLLLLLLLLLLLLL LLLLLLLL~~LLLLLLL~~~~~~ ~LLLLLL
___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____ _LLLLLL_
LLLLLLLLLLL~~ LLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLL ~~~LLLLL
__LLLLLLLLLLL _LLLLLLLLLLLLLLLLL_ LLLLLLLLLLLLLLLLLL_ LLLLL
LLLLLLLLLLL~ LLLLLLLLLLLLLLLLLLL ~L ~~LLLLLLLLLLLLL LLLLLL
_LLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL_ LL LLLLLLLLL LLLLLLLLL
LLLLLLLLLLLLL LLLLLLLLLLLLL~LLLLLL~L LL ~~~~~ ~LLLLLL
LLLLLLLLLLLLLLL__L LLLLLLLLLLLL_LLLLLLL LL_ LL_ _ LLLLLL
LLLLLLLLLLLLLLLLL~ ~LLLLLLLL~~LLLLLLLL ~L ~LLLL ~L LLLLLL~
LLLLLLLLLLLLLLLL _LLLLLLLLLL LL LLLLLLL___ LLLLLLLLLL
LLLLLLLLLLLLLLLL LL~LLLLLLLL~ LL LLLLLLLLLLLL LLLLLLL~
LLLLLLLLLLLLLLLL_ __L _L LLLLLLLL LLL_ LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL L~ LLLLLLLL LLLLLLL~LLLLLLLLLLLLLLLL~
LLLLLLLLLLLLLLLLLLLL___L_ LL LLLLLLL LLLL LLLLLLLLLLLLLL
~~LLLLLLLLLLLLLLLLLLLLLLLL LLLLL~ LLLLL ~~~~~~~~~
LLLLLLLLLLLLLLLLLL_ _ LLL _LLLLL
~~~~~~LLLLLLLLLL~ LLLLLL
LLLLL _LLLLLL
LLLLL L L LLLLLLL
LLLLL__LL _L__LLLLLLLL
LLLLLLLLLL LLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
~LLLLLLLLLLLLLLLLL~~
LLLLLLLLLLLLL
~~~~~~~~~
<a name="skipbutterfly></a>
Το παρακάτω είναι Leetspeak για το "Austin Rocks".
Παράδειγμα κώδικα:
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
Ανοίξτε τη σελίδα σε ένα κοινό πρόγραμμα περιήγησης.
Ελέγξτε να δείτε ότι το περιεχόμενο περιέχει τέχνη ASCII, emoticon ή/και leetspeak.
Ελέγξτε ότι υπάρχει ένα εναλλακτικό κειμένου αμέσως πριν ή μετά την τέχνη ASCII, τα emoticon ή/και το Leetspeak.
Η διαδικασία ελέγχου #3 είναι αληθής.
Μη παρεμβολή με τη ροή κειμένου του πράκτορα χρήστη καθώς περιορίζεται το παράθυρο προβολής
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική βοηθά την αποφυγή καταστάσεων όπου μπορεί να προκύψει οριζόντια κύλιση. Πολλά άτομα με νοητικές αναπηρίες και χρήστες με χαμηλή όραση που δεν χρησιμοποιούν υποστηρικτική τεχνολογία, αντιμετωπίζουν σημαντικά προβλήματα με μπλοκ κειμένου που απαιτούν οριζόντια κύλιση. Αφορά στη μη παρεμβολή με την εκ νέου ροή του κειμένου, εάν το παράθυρο περιορίζεται. Ένας από τους καλύτερους τρόπους να το πετύχετε είναι να ορίσετε πλάτη για κοντέινερ μπλοκ κειμένου σε ποσοστά.
Οι πράκτορες χρήστη HTML και XHTML πραγματοποιούν αυτόματα εκ νέου ροή του κειμένου καθώς περιορίζεται το παράθυρο του προγράμματος περιήγησης, αρκεί ο συγγραφέας να μην καθορίσει πλάτη μέσω απόλυτων μετρήσεων όπως pixel ή σημεία.
Ένας ιστότοπος εφημερίδας περιλαμβάνει άρθρα με στήλες που ρυθμίζονται με το πλάτος του παραθύρου των πρακτόρων χρήστη. Οι χρήστες με νοητικές αναπηρίες μπορούν να περιορίσουν τη στήλη σε ένα πλάτος που καθιστά την ανάγνωση πιο εύκολη.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανοίξτε το περιεχόμενο που περιέχει ένα μπλοκ κειμένου σε ένα κοινό πρόγραμμα περιήγησης.
Περιορίστε το παράθυρο προβολής στο 1/4 του πλάτους οθόνης.
Ελέγξτε να δείτε ότι το περιεχόμενο δεν απαιτεί οριζόντια κύλιση για ανάγνωση μίας γραμμής κειμένου.
Ελέγξτε ότι το #3 είναι αληθές.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η χρήση HTML και XHMTL σύμφωνα με τις αντίστοιχες προδιαγραφές τους. Προδιαγραφές τεχνολογίας ορίζουν τη σημασία και τον κατάλληλο χειρισμό των χαρακτηριστικών της τεχνολογίας. Η χρήση αυτών των χαρακτηριστικών με τρόπο που περιγράφεται από την προδιαγραφή, διασφαλίζει ότι οι πράκτορες χρήστη, συμπεριλαμβανομένων υποστηρικτικών τεχνολογιών, θα είναι σε θέση να παρουσιάζουν αναπαραστάσεις του χαρακτηριστικού που είναι ακριβείς ως προς τον σκοπό του συγγραφέα και διαλειτουργικές μεταξύ τους.
Κατά τον χρόνο έκδοσης αυτής της τεχνικής, οι κατάλληλες εκδόσεις αυτών των τεχνολογιών είναι οι HTML 4.01 και XHTML 1.0. Η HTML 4.01 είναι η τελευταία ώριμη έκδοση της HTML, η οποία παρέχει συγκεκριμένα χαρακτηριστικά προσβασιμότητας και υποστηρίζεται ευρέως από πράκτορες χρήστη. Η XHTML 1.0 παρέχει τα ίδια χαρακτηριστικά με την HTML 4.01, με την εξαίρεση ότι χρησιμοποιεί μία δομή XML και έχει πιο αυστηρή σύνταξη από τη δομή της HTML. Νεότερες εκδόσεις αυτών των τεχνολογιών δεν είναι ώριμες ή/και δεν υποστηρίζονται ευρέως από πράκτορες χρήστη αυτή τη στιγμή.
Υπάρχουν ορισμένα εκτεταμένα θέματα σχετικά με τη χρήση HTML και XHTML σύμφωνα με την προδιαγραφή τους.
Χρήση μόνο χαρακτηριστικών που ορίζονται στην προδιαγραφή Η HTML ορίζει σύνολα στοιχείων, παραμέτρων και τιμών παραμέτρων που μπορούν να χρησιμοποιηθούν σε Ιστοσελίδες. Αυτά τα χαρακτηριστικά έχουν συγκεκριμένες σημασιολογικές έννοιες που προορίζονται για επεξεργασία από πράκτορες χρήστη με συγκεκριμένους τρόπους. Ορισμένες φορές ωστόσο, πρόσθετα χαρακτηριστικά μπαίνουν σε κοινή πρακτική συγγραφής. Αυτά συνήθως υποστηρίζονται αρχικά μόλις από έναν πράκτορα χρήστη. Όταν χρησιμοποιούνται χαρακτηριστικά που δεν βρίσκονται στην προδιαγραφή, πολλοί πράκτορες χρήστη ενδέχεται να μην υποστηρίζουν τα χαρακτηριστικά για κάποιο διάστημα ή και καθόλου. Επιπλέον, ελλείψει τυπικών προδιαγραφών για τη χρήση αυτών των χαρακτηριστικών, διαφορετικοί πράκτορες χρήστη ενδέχεται να παρέχουν διάφορων ειδών υποστήριξη. Αυτό επηρεάζει την προσβασιμότητα καθώς οι υποστηρικτικές τεχνολογίες που αναπτύσσονται με λιγότερους πόρους από δημοφιλείς πράκτορες χρήστη, ενδέχεται να απαιτούν περισσότερο χρόνο για την προσθήκη χρήσιμης υποστήριξης ή και να μην γίνει ποτέ. Συνεπώς, οι συγγραφείς θα πρέπει να αποφεύγουν χαρακτηριστικά που δεν ορίζονται σε HTML ή XHTML για την αποφυγή μη αναμενόμενων προβλημάτων προσβασιμότητας.
Χρήση χαρακτηριστικών με τρόπο που προδιαγράφεται από την προδιαγραφή Η προδιαγραφή HTML παρέχει συγκεκριμένες οδηγίες για τον τρόπο επεξεργασίας και σημασιολογικής κατανόησης συγκεκριμένων στοιχείων, παραμέτρων και τιμών παραμέτρων. Ορισμένες φορές ωστόσο, οι συγγραφείς χρησιμοποιούν χαρακτηριστικά με τρόπο που δεν υποστηρίζεται από την προδιαγραφή, για παράδειγμα, χρήση σημασιολογικών στοιχείων για την επίτευξη οπτικών εφέ χωρίς σκοπό μεταφοράς του υποκείμενου σημασιολογικού μηνύματος. Αυτό οδηγεί σε σύγχυση για πράκτορες χρήστη και υποστηρικτικές τεχνολογίες που βασίζονται στην παρουσίαση μιας συνεκτικής αναπαράστασης της σελίδας από σωστές σημασιολογικές πληροφορίες. Είναι σημαντική η χρήση χαρακτηριστικών HTML μόνον όπως προδιαγράφεται από την προδιαγραφή HTML.
Βεβαιωθείτε ότι το περιεχόμενο μπορεί να αναλυθεί Η HTML και XHTML ορίζουν επίσης τον τρόπο κωδικοποίησης του περιεχομένου, προκειμένου να το επεξεργαστούν σωστά οι πράκτορες χρήστη. Κανόνες σχετικά με τη δομή ετικετών αρχής και τέλους, παραμέτρων και τιμών, ένθετων στοιχείων κ.λπ., διασφαλίζουν ότι οι πράκτορες χρήστη θα αναλύσουν το περιεχόμενο με τρόπο κατάλληλο ώστε να επιτευχθεί η στοχευόμενη αναπαράσταση εγγράφου. Η τήρηση των δομικών κανόνων σε αυτές τις προδιαγραφές είναι ένα σημαντικό τμήμα της χρήσης αυτών των τεχνολογιών σύμφωνα με την προδιαγραφή.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανατρέξτε στην ενότητα "Πόροι" της τεχνικής Επικύρωσης Ιστοσελίδων (G134: Validating Web pages).
Για κάθε σελίδα HTML ή XHTML:
Ελέγξτε ότι η σελίδα χρησιμοποιεί μόνο στοιχεία, παραμέτρους και τιμές παραμέτρων που ορίζονται στη σχετική προδιαγραφή.
Ελέγξτε ότι στοιχεία, παράμετροι και τιμές χρησιμοποιούνται με τον προδιαγεγραμμένο από την σχετική προδιαγραφή τρόπο.
Ελέγξτε ότι η σελίδα μπορεί να αναλυθεί σωστά, σύμφωνα με τους κανόνες της σχετικής προδιαγραφής.
Σημείωση: Οι έλεγχοι #1 και #3 ελέγχονται πιο εύκολα με εργαλεία επικύρωσης σελίδας. Ο έλεγχος #2 μπορεί να ελεγχθεί με τη βοήθεια εργαλείων ευρετικής αξιολόγησης, αν και συνήθως απαιτείται χειροκίνητη κρίση.
Οι έλεγχοι #1, #2 και #3 είναι αληθείς.
HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Κάποια τρέχουσα υποστηρικτική τεχνολογία παρέχει πληροφορίες στον χρήστη όταν τα πεδία φόρμας έχουν λίγο περιεχόμενο παραμέτρων διαθέσιμο.
Ορισμένοι πράκτορες χρήστη γραφικών θα εμφανίζουν ένα εργαλείο βοήθειας όταν το ποντίκι αφήνεται πάνω από ένα πεδίο φόρμας που περιέχει την παράμετρο title
. Ωστόσο, οι υφιστάμενοι πράκτορες χρήστη δεν παρέχουν πρόσβαση στο περιεχόμενο παραμέτρου title
μέσω του πληκτρολογίου.
Το εργαλείο βοήθειας σε ορισμένους κοινούς πράκτορες χρήστη εξαφανίζεται ύστερα από μια σύντομη χρονική περίοδο (περίπου 5 δευτερόλεπτα). Αυτό μπορεί να οδηγήσει σε δυσκολίες πρόσβασης στο περιεχόμενο της παραμέτρου title για εκείνους τους χρήστες που μπορούν να χρησιμοποιούν ποντίκι, αλλά έχουν δυσκολίες λεπτών κινήσεων χειρισμού και ενδέχεται να οδηγήσει σε προβλήματα για χρήστες που χρειάζονται περισσότερο χρόνο ανάγνωσης του εργαλείου βοήθειας.
Είναι δύσκολο για τους περισσότερους χρήστες να αλλάζουν μέγεθος, ρυθμίζουν χρώματα παρασκηνίου, αλλάζουν θέση ή να ελέγχουν με άλλον τρόπο την παρουσίαση του περιεχομένου της παραμέτρου title σε πολλούς τρέχοντες πράκτορες χρήστη.
Αυτή η τεχνική μπορεί να χρησιμοποιείται μόνο όταν το στοιχείο έχει μία ετικέτα ρητού συσχετισμού. Σε περίπτωση απουσίας ετικέτας, ο τίτλος θα χρησιμοποιηθεί ως το όνομα στο API προσβασιμότητας των τρεχόντων πρακτόρων χρήστη που υποστηρίζουν έναν. Το κείμενο βοήθειας που περιγράφεται παρακάτω αποτελεί ένα μη ικανοποιητικό όνομα.
Σκοπός αυτής της τεχνικής είναι η παροχή βοήθειας περιβάλλοντος για χρήστες, καθώς καταχωρούν δεδομένα σε φόρμες με την παροχή πληροφοριών βοήθειας σε μία παράμετρο title
. Η βοήθεια ενδέχεται να περιλαμβάνει πληροφορίες μορφής ή παραδείγματα εισαγωγής δεδομένων.
Σημείωση: Τρέχοντες πράκτορες χρήστη και υποστηρικτικές τεχνολογίες δεν παρέχουν πάντα στους χρήστες τις πληροφορίες που περιέχονται στην παράμετρο title
. Αποφύγετε την αποκλειστική χρήση αυτής της τεχνικής έως ότου η παράμετρος title
να υποστηρίζεται ευρέως.
Μία εφαρμογή αντιστοίχισης παρέχει μία φόρμα που αποτελείται από μια ετικέτα "Διεύθυνση:", ένα πλαίσιο εισαγωγής δεδομένων και ένα κουμπί υποβολής με τιμή "Find map" (Εύρεση χάρτη). Το πλαίσιο εισαγωγής δεδομένων φέρει μία τιμή παραμέτρου title
με ένα παράδειγμα της μορφής διεύθυνσης που θα πρέπει να εισάγει ο χρήστης.
Παράδειγμα κώδικα:
<label for="searchAddress">Address: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress"
title="Address example: 101 Collins St, Melbourne, Australia" />
Μια φόρμα που επιτρέπει στους χρήστες να πληρώσουν ηλεκτρονικά τον λογαριασμό τους, απαιτεί ο χρήστης να εισάγει τον αριθμό λογαριασμού του. Το πλαίσιο εισαγωγής δεδομένων που σχετίζεται με την ετικέτα "Αριθμός λογαριασμού" έχει μια παράμετρο title
που παρέχει πληροφορίες για τον εντοπισμό του αριθμού λογαριασμού.
Παράδειγμα κώδικα:
<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number
can be found in the top right-hand corner of your bill." />
Προσδιορίστε στοιχεία ελέγχου φόρμας που απαιτούν εισαγωγή κειμένου.
Ελέγξτε ότι κάθε στοιχείο ελέγχου φόρμας έχει μια ετικέτα ρητού συσχετισμού
Ελέγξτε ότι σε κάθε στοιχείο ελέγχου φόρμας παρέχεται βοήθεια εξαρτώμενης από το περιβάλλον στην παράμετρο title
.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Στοιχεία ελέγχου HTML και XHTML που χρησιμοποιούν εξωτερικές ετικέτες.
Αυτή η τεχνική σχετίζεται με:
Οι προδιαγραφές HTML και XHTML επιτρέπουν έμμεσες και ρητές ετικέτες. Ωστόσο, ορισμένες υποστηρικτικές τεχνολογίες δεν χειρίζονται σωστά έμμεσες ετικέτες (για παράδειγμα, <label>First name <input type="text" name="firstname"></label>
).
Το JAWS 7.10 ελέγχθηκε σε Windows XP με Internet Explorer 6.0 και Firefox 1.5. Διαβάζει την ετικέτα για ρητές και έμμεσες ετικέτες πεδίων κειμένου, τόσο σε κατάσταση λειτουργίας δείκτη εικονικού Η/Υ, όσο και ανάγνωσης φορμών. Στην κατάσταση φορμών δεν διαβάζει την ετικέτα για έμμεσές ετικέτες σε τετράγωνα επιλογής και ραδιοπεδία.
Το WindowEyes 5.5 ελέγχθηκε σε Windows XP με Internet Explorer 6.0 και Firefox 1.5. Θα εκφωνεί πάντα την ετικέτα για πεδίο φόρμας ρητής ετικέτας. Δεν εκφωνεί την ετικέτα για στοιχείο ελέγχου φόρμας έμμεσης ετικέτας στην κατάσταση ενεργούς περιήγησης, αλλά εκφωνεί την έμμεση ετικέτα όταν γίνεται μετάβαση μεταξύ στοιχείων ελέγχου στην κατάσταση ανενεργούς περιήγησης.
Οι πράκτορες χρήστη εμφανίζουν ένα εργαλείο βοήθειας όταν το ποντίκι αφήνεται πάνω από ένα στοιχείο input
που περιέχει την παράμετρο title
. Οι παράμετροι title εκτίθενται σε υποστηρικτική τεχνολογία και εμφανίζονται ως εργαλεία βοήθειας σε πολλά προγράμματα περιήγησης γραφικών. Τα εργαλεία βοήθειας δεν μπορούν να ενεργοποιηθούν μέσω του πληκτρολογίου, έτσι αυτές οι πληροφορίες ενδέχεται να μην είναι διαθέσιμες για χρήστες πληκτρολογίου με όραση.
Εάν δεν υπάρχει διαθέσιμη παράμετρος label
, τα JAWS και Window-Eyes εκφωνούν την παράμετρο title
όταν το στοιχείο ελέγχου φόρμας επισημαίνεται
Το JAWS 6.0 και νεότερες εκδόσεις μπορούν να ρυθμιστούν για εκφώνηση και των δύο παραμέτρων label
και title
, όταν τα δύο στοιχεία είναι διαφορετικά. Όμως, πολύ λίγοι γνωρίζουν αυτή τη ρύθμιση.
Το WindowEyes 5.5 έχει μια ειδική συντόμευση, ins-E, που θα εμφανίσει πρόσθετες πληροφορίες, συμπεριλαμβανομένης της παραμέτρου title, για το στοιχείο με επισήμανση.
Ορισμένοι πράκτορες χρήστη (ιδιαίτερα το πρόγραμμα ανάγνωσης οθόνης Window-Eyes) δεν εκφωνούν εξ ορισμού τον χαρακτήρα αστερίσκου στις ετικέτες φόρμας. Υπάρχει μια προτίμηση που οι χρήστες του Window-Eyes μπορούν να τροποποιήσουν για να ρυθμίσουν αυτή τη συμπεριφορά, αλλά πολλοί χρήστες θα πρέπει να αναμένεται ότι δεν θα έχουν πραγματοποιήσει αυτήν την αλλαγή.
Σκοπός αυτής της τεχνικής είναι η παροχή σαφούς ένδειξης ότι ένα συγκεκριμένο στοιχείο ελέγχου φόρμας σε μια εφαρμογή ή φόρμα Ιστού απαιτείται για επιτυχή υποβολή δεδομένων. Ένα σύμβολο ή κείμενο που υποδηλώνει ότι το στοιχείο ελέγχου που απαιτείται συσχετίζεται μέσω προγραμματισμού με το πεδίο, χρησιμοποιώντας το στοιχείο label
ή το στοιχείο legend
για ομάδες στοιχείων ελέγχου που συσχετίζονται μέσω του fieldset
. Εάν χρησιμοποιείται ένα σύμβολο, ο χρήστης ενημερώνεται για τη σημασία του πριν την πρώτη χρήση.
Το πεδίο κειμένου στο παράδειγμα παρακάτω έχει τη ρητή ετικέτα "Όνομα (απαιτούμενο):". Η παράμετρος for
του στοιχείου field
συμφωνεί με την παράμετρο id
του στοιχείου input
και το κείμενο label
υποδηλώνει ότι απαιτείται το στοιχείο ελέγχου.
Παράδειγμα κώδικα:
<label for="firstname">First name (required):</label>
<input type="text" name="firstname" id="firstname" />
Σημείωση: Ορισμένοι συγγραφείς δημιουργούν σύντμηση του "απαιτούμενο" σε "απαιτ.", αλλά υπάρχει ανέκδοτη απόδειξη σύμφωνα με την οποία αυτή η σύντμηση προκαλεί σύγχυση.
Το πεδίο κειμένου στο παράδειγμα παρακάτω έχει τη ρητή ετικέτα που περιλαμβάνει έναν αστερίσκο που υποδηλώνει ότι απαιτείται το στοιχείο ελέγχου. Είναι σημαντικό ότι το νόημα του αστερίσκου ορίζεται στην αρχή της φόρμας. Σε αυτό το παράδειγμα, ο αστερίσκος περιέχεται εντός ενός στοιχείου span, ώστε να επιτρέπεται στον χαρακτήρα αστερίσκου να έχει στυλ ώστε να είναι μεγαλύτερος από τον προεπιλεγμένο χαρακτήρα αστερίσκου, καθώς ο χαρακτήρας αστερίσκου είναι δυσδιάκριτος για χρήστες με προβλήματα όρασης.
Παράδειγμα κώδικα:
CSS:
.req {font-size: 150%}
HTML:
<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />
Το πεδίο κειμένου στο παράδειγμα παρακάτω έχει τη ρητή ετικέτα που περιλαμβάνει μια εικόνα που υποδηλώνει ότι απαιτείται το στοιχείο ελέγχου. Είναι σημαντικό ότι το νόημα της εικόνας ορίζεται στην αρχή της φόρμας.
Παράδειγμα κώδικα:
<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
<input type="text" name="firstname" id="firstname" />
...
Τα ραδιόπληκτρα και τετράγωνα επιλογής αντιμετωπίζονται διαφορετικά από άλλα αλληλεπιδραστικά στοιχεία ελέγχου, καθώς τα μεμονωμένα ραδιόπληκτρα και τετράγωνα επιλογής δεν απαιτούνται, αλλά υποδεικνύουν ότι απαιτείται μία απάντηση για την ομάδα. Οι μέθοδοι που χρησιμοποιούνται στα παραδείγματα 1-3 ισχύουν για ραδιόπληκτρα και τετράγωνα επιλογής, αλλά η ένδειξη της απαραίτητης κατάστασης θα πρέπει να τοποθετηθεί στο στοιχείο legend
, αντί για το στοιχείο label
.
Παράδειγμα κώδικα:
<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για κάθε απαιτούμενο στοιχείο ελέγχου φόρμας, ελέγξτε ότι η απαραίτητη κατάσταση υποδεικνύεται στα στοιχεία label
ή legend
του στοιχείου ελέγχου της φόρμας.
Για κάθε ενδείκτη απαιτούμενης κατάστασης που δεν παρέχεται σε κείμενο, ελέγξτε ότι το νόημα του ενδείκτη επεξηγείται πριν το στοιχείο ελέγχου που το χρησιμοποιεί.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Στοιχεία ελέγχου φόρμας και σύνδεσμοι HTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η χρήση τυπικών στοιχείων ελέγχου φόρμας HTML και στοιχείων συνδέσμου για την παροχή διαλειτουργικότητας στοιχείων αλληλεπίδρασης διεπαφής χρήστη λειτουργιών πληκτρολογίου και υποστηρικτικής τεχνολογίας.
Οι πράκτορες χρήστη παρέχουν τη λειτουργία πληκτρολογίου στοιχείων ελέγχου και συνδέσμων φόρμας HTML. Επιπλέον, ο πράκτορας χρήστη αντιστοιχεί τα στοιχεία ελέγχου και τους συνδέσμους φόρμας με ένα API προσβασιμότητας. Υποστηρικτικές τεχνολογίες χρησιμοποιούν το API προσβασιμότητας για την εξαγωγή κατάλληλων πληροφοριών προσβασιμότητας, όπως ρόλο, όνομα, κατάσταση και τιμή και τις παρουσιάζουν στους χρήστες. Ο ρόλος παρέχεται από το στοιχείο HTML και το όνομα παρέχεται από το κείμενο που σχετίζεται με αυτό το στοιχείο. Στοιχεία για τα οποία τιμές και καταστάσεις είναι κατάλληλες, εκθέτουν επίσης τις τιμές και καταστάσεις μέσω πολλαπλών μηχανισμών.
Σε ορισμένες περιπτώσεις, το κείμενο συσχετίζεται ήδη με το στοιχείο ελέγχου μέσω μιας απαραίτητης παραμέτρου. Για παράδειγμα, τα κουμπιά υποβολής χρησιμοποιούν το στοιχείο button
ή την παράμετρο εικόνας 'alt
' ως το όνομα. Στην περίπτωση στοιχείων ελέγχου φόρμας, χρησιμοποιούνται τα στοιχεία label
ή οι παράμετροι 'title
'. Ο παρακάτω πίνακας περιγράφει τον τρόπο προσδιορισμού του ρόλου, του ονόματος, της τιμής και της κατάστασης για στοιχεία ελέγχου και συνδέσμους φόρμας.
Στοιχείο HTML | Ρόλος | Όνομα | Τιμή | Κατάσταση |
---|---|---|---|---|
<a> | σύνδεσμος | παράμετρος 'title', κείμενο εντός στοιχείου <a> ή παράμετρος 'alt' για σύνδεσμο εικόνας. Σύνδεση εάν αμφότεροι οι παράμετροι κειμένου και εικόνας 'alt' παρέχονται | παράμετρος 'href' | |
<button> | κουμπί για πάτημα | κείμενο εντός του στοιχείου <button> ή της παραμέτρου 'title' | ||
<fieldset> | ομαδοποίηση | στοιχείο <legend> | ||
<input type = "button", "submit", or "reset"> | κουμπί για πάτημα | παράμετρος 'value' | ||
<input type = "image"> | κουμπί για πάτημα | παράμετρος 'alt' ή παράμετρος 'title' | ||
<input type = "text"> | επεξεργάσιμο κείμενο | στοιχείο <label> που συσχετίζεται με αυτό ή παράμετρος 'title' | παράμετρος 'value' | |
<input type = "password"> | επεξεργάσιμο κείμενο | στοιχείο <label> που συσχετίζεται με αυτό ή παράμετρος 'title' | ||
<input type="checkbox"> | τετράγωνο επιλογής | στοιχείο <label> που συσχετίζεται με αυτό ή παράμετρος 'title' | παράμετρος 'checked' | |
<input type="radio"> | ραδιόπληκτρο | στοιχείο <label> που συσχετίζεται με αυτό ή παράμετρος 'title' | παράμετρος 'checked' | |
<select> | σύνθετο πλαίσιο, λίστα ή αναπτυσσόμενη λίστα | στοιχείο <label> που συσχετίζεται με αυτό ή παράμετρος 'title' | στοιχείο <option> με παράμετρο 'selected' ορισμένη σε "selected" | |
<textarea> | επεξεργάσιμο κείμενο | στοιχείο <label> που συσχετίζεται με αυτό ή παράμετρος 'title' | κείμενο εντός στοιχείου <textarea> |
Οι πράκτορες χρήστη παρέχουν μηχανισμούς για πλοήγηση και επιλογή συνδέσμων. Σε καθένα από τα παρακάτω παραδείγματα, ο ρόλος είναι "σύνδεσμος" από το <a href>. Να σημειωθεί ότι το <a name> δεν παρέχει έναν ρόλο τύπου "σύνδεσμος". Η τιμή είναι το URI στην παράμετρο 'href'.
Στο παράδειγμα 1α, το όνομα είναι το κείμενο εντός του συνδέσμου, σε αυτήν την περίπτωση "Παράδειγμα ιστότοπου".
Παράδειγμα κώδικα:
<a href="www.example.com">Example Site</a>
Στο παράδειγμα 1β μιας εικόνας εντός ενός συνδέσμου, η παράμετρος 'alt' για την εικόνα παρέχει το όνομα. Ορισμένα εργαλεία προβολής API, όπως το Microsoft Inspect Objects, δεν θα το εμφανίσουν αυτό, αλλά θα το κάνει η AT.
Παράδειγμα κώδικα:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
Στο παράδειγμα 1γ, το όνομα θα είναι συνδυασμός διαφορετικών στοιχείων εντός του συνδέσμου για ανάγνωση "Παράδειγμα κειμένου"
Παράδειγμα κώδικα:
<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>
Υπάρχουν διάφοροι τρόποι δημιουργίας ενός κουμπιού σε HTML και όλοι αντιστοιχίζονται στον ρόλο "κουμπί για πάτημα".
Στο παράδειγμα 2α, το κείμενο περιέχεται στο στοιχείο button
, στην περίπτωση αυτή "αποθήκευση", ως το όνομα. Δεν υπάρχει τιμή.
Παράδειγμα κώδικα:
<button>Save</button>
Το παράδειγμα 2β χρησιμοποιεί την παράμετρο 'value', στην περίπτωση αυτή "Αποθήκευση", "Υποβολή" ή "Επαναφορά" ως το όνομα.
Παράδειγμα κώδικα:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
Το παράδειγμα 2γ χρησιμοποιεί την παράμετρο 'alt', στην περίπτωση αυτή "αποθήκευση", ως το όνομα.
Παράδειγμα κώδικα:
<input type="image" src="save.gif" alt="save" />
Στο παράδειγμα 2δ δεν υπάρχει παράμετρος 'alt', ώστε η παράμετρος 'title', στην περίπτωση αυτή "αποθήκευση", χρησιμοποιείται ως το όνομα.
Παράδειγμα κώδικα:
<input type="image" src="save.gif" title="save" />
Το παράδειγμα 2ε χρησιμοποιεί την παράμετρο 'alt' του στοιχείου εισόδου, στην περίπτωση αυτή "αποθήκευση", ως το όνομα. Η παράμετρος title δεν χρησιμοποιείται.
Παράδειγμα κώδικα:
<input type="image" src="save.gif" alt="save" title="save" />
Στο παράδειγμα 3α το πεδίο εισόδου έχει έναν ρόλο "επεξεργάσιμο κείμενο". Το στοιχείο label
συσχετίζεται με το στοιχείο input
μέσω της παραμέτρου 'for' που αναφέρεται στην παράμετρο 'id' του στοιχείου input
. Το όνομα προέρχεται από το στοιχείο label
, στην περίπτωση αυτή "Είδος φρούτου". Η τιμή του προέρχεται από την παράμετρο value, στην περίπτωση αυτή "μπανάνες".
Παράδειγμα κώδικα:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
Στο παράδειγμα 3β, το πεδίο εισόδου έχει τον ίδιο ρόλο και τιμή με το παράδειγμα 3α, αλλά το όνομά του προέρχεται από την παράμετρο 'title'.
Παράδειγμα κώδικα:
<input id="text_1" type="text" value="bananas" title="Type of fruit">
Το παράδειγμα 4 έχει έναν ρόλο "τετράγωνο επιλογής" από την παράμετρο 'type' στο στοιχείο input
. Το στοιχείο label
συσχετίζεται με το στοιχείο input
μέσω της παραμέτρου 'for' που αναφέρεται στην παράμετρο 'id' του στοιχείου input
. Το όνομα προέρχεται από το στοιχείο label
, στην περίπτωση αυτή "τυρί". Η κατάσταση μπορεί να είναι "checked" ή "unchecked" και προέρχεται από την παράμετρο 'checked'. Η κατάσταση μπορεί να αλλάξει από την αλληλεπίδραση του χρήστη με το στοιχείο ελέγχου.
Παράδειγμα κώδικα:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
Το παράδειγμα 5 έχει έναν ρόλο "ραδιόπληκτρο" από την παράμετρο 'type' στο στοιχείο input
. Το όνομα προέρχεται από το στοιχείο label
. Η κατάσταση μπορεί να είναι "checked" ή "unchecked" και προέρχεται από την παράμετρο 'checked'. Η κατάσταση μπορεί να αλλάξει από τον χρήστη.
Παράδειγμα κώδικα:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
Το παράδειγμα 6α έχει έναν ρόλο "Σύνθετο πλαίσιο" από το στοιχείο select
. Το όνομά του είναι "Αριθμοί" από το στοιχείο label
. Είναι σύνηθες σφάλμα η παράλειψη απόδοσης ονόματος στο στοιχείο select. Η τιμή είναι το στοιχείο option
που έχει την παράμετρο 'selected' ορισμένη ως "selected". Στην περίπτωση αυτή, η προεπιλεγμένη τιμή είναι "Δύο".
Παράδειγμα κώδικα:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Το παράδειγμα 6β έχει το ίδιο όνομα, ρόλο και τιμή με παραπάνω, αλλά ορίζει το όνομα με την παράμετρο 'title' στο στοιχείο select
. Αυτή η τεχνική μπορεί να χρησιμοποιηθεί όταν μια ορατή ετικέτα δεν είναι επιθυμητή.
Παράδειγμα κώδικα:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Το παράδειγμα 7α έχει έναν ρόλο "επεξεργάσιμο κείμενο" από το στοιχείο textarea
. Το όνομα είναι "Πληκτρολογήστε εδώ την ομιλία σας" από το στοιχείο label
. Η τιμή είναι το περιεχόμενο εντός του στοιχείου textarea
, στην περίπτωση αυτή "Four score and seven years ago".
Παράδειγμα κώδικα:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
Το παράδειγμα 7β έχει τον ίδιο ρόλο, όνομα και τιμή, αλλά ορίζει το όνομα μέσω της παραμέτρου 'title'.
Παράδειγμα κώδικα:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
Το στοιχείο radio fieldset στο παράδειγμα 8 έχει ρόλο "ομαδοποίηση". Το όνομα προέρχεται από το στοιχείο legend
.
Παράδειγμα κώδικα:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Επιθεωρήστε τον πηγαίο κώδικα HTML.
Για κάθε περίπτωση συνδέσμων και στοιχείων φόρμας, ελέγξτε ότι το όνομα, η τιμή και η κατάσταση προδιαγράφονται όπως υποδεικνύεται στον παραπάνω πίνακα.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν CSS
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει τον τρόπο ενίσχυσης της οπτικής παρουσίασης μέσω φύλλων στυλ, με παράλληλη διατήρηση μιας παρουσίασης με νόημα όταν τα φύλλα στυλ δεν εφαρμόζονται. Χρησιμοποιώντας τις ιδιότητες τοποθέτησης του CSS2, είναι δυνατή η εμφάνιση του περιεχομένου σε οποιαδήποτε θέση στο παράθυρο προβολής του χρήστη. Η χρήση δομικών στοιχείων διασφαλίζει ότι το νόημα του περιεχομένου μπορεί να καθοριστεί ακόμα και όταν δεν είναι διαθέσιμη η χρήση στυλ.
Σε αυτό το παράδειγμα, έχει εφαρμοστεί δομική επισημείωση (λίστες ορισμών) στο περιεχόμενο. Έχει χρησιμοποιηθεί CSS για τη διαμόρφωση του στυλ του περιεχομένου σε μορφή με στήλες. Κάθε κλάση τοποθετεί απόλυτα το περιεχόμενο σε στήλες και τα περιθώρια έχουν οριστεί στο 0 για την παράκαμψη της προεπιλεγμένης συμπεριφοράς των πρακτόρων χρήστη για την εμφάνιση λιστών ορισμών HTML με εσοχή στο στοιχείο DD.
Ακολουθεί το περιεχόμενο προς εμφάνιση:
Παράδειγμα κώδικα:
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</dd>
</dt>
</dl>
</div>
Ακολουθεί το CSS που τοποθετεί και διαμορφώνει το στυλ στα παραπάνω στοιχεία:
Παράδειγμα κώδικα:
.item1 {
left: 0;
margin: 0;
position: absolute;
top: 7em;
}
.item2 {
left: 0;
margin: 0;
position: absolute;
top: 8em;
}
.item3 {
left: 0;
margin: 0;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0;
margin: 0;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}
Όταν εφαρμόζονται φύλλα στυλ, τα δεδομένα εμφανίζονται σε δύο στήλες, "Προϊόντα" και "Θέσεις." Όταν τα φύλλα στυλ δεν εφαρμόζονται, το κείμενο εμφανίζεται σε μια λίστα ορισμών που διατηρεί τη δομή και τη σειρά ανάγνωσης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για περιεχόμενο που χρησιμοποιεί CSS για τοποθέτηση
Καταργήστε τις πληροφορίες στυλ από το έγγραφο ή απενεργοποιήστε τη χρήση των φύλλων στυλ στον πράκτορα χρήστη.
Ελέγξτε ότι διατηρούνται οι δομικές σχέσεις και το νόημα του περιεχομένου.
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν CSS.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η συμπλήρωση του κειμένου συνδέσμου με την προσθήκη κειμένου που περιγράφει τη μοναδική λειτουργία του συνδέσμου, αλλά με απόδοση στον πρόσθετο κείμενο στυλ που δεν αποδίδεται από τους πράκτορες χρήστη που υποστηρίζουν CSS. Όταν χρειάζονται πληροφορίες στο περιβάλλον κείμενο για την ερμηνεία του εμφανιζόμενου κειμένου συνδέσμου, αυτή η τεχνική παρέχει πλήρη περιγραφή της λειτουργίας εισόδου του συνδέσμου, ενώ επιτρέπει την απεικόνιση του μη πλήρους κειμένου.
Αυτή η τεχνική δουλεύει με τη δημιουργία μιας λειτουργίας επιλογής CSS για τη στοχοθέτηση κειμένου που πρέπει να κρυφτεί. Το σύνολο κανόνων της λειτουργίας επιλογής τοποθετεί το κείμενο προς απόκρυψη σε ένα πλαίσιο 1--pixel με απόκρυψη υπερχείλισης και τοποθετεί το κείμενο εκτός του παραθύρου προβολής. Αυτό διασφαλίζει ότι το κείμενο δεν εμφανίζεται στην οθόνη αλλά παραμένει προσβάσιμο στις υποστηρικτικές τεχνολογίες, όπως εφαρμογές ανάγνωσης οθόνης και ανάγλυφες (braille) οθόνες. Σημειώστε ότι η τεχνική δεν χρησιμοποιεί ιδιότητες visibility:hidden
ή display:none
, καθώς μπορεί να προκαλέσουν ακούσια την απόκρυψη του κειμένου από την υποστηρικτική τεχνολογία, πέραν της μη εμφάνισής του στην οθόνη.
Σημείωση 1:Αυτή η τεχνική απόκρυψης κειμένου συνδέσμου υποστηρίζεται από ορισμένους χρήστες προγραμμάτων ανάγνωσης οθόνης και συγγραφείς εταιρικού Ιστού. Έχει αποδειχθεί αποτελεσματική σε ορισμένους ιστότοπους. Άλλοι χρήστες προγραμμάτων ανάγνωσης οθόνης και ειδικοί προσβασιμότητας δεν συνιστούν αυτήν ως μια γενική τεχνική, καθώς τα αποτελέσματα μπορεί να είναι υπερβολικά φλύαρα και να περιορίζουν τη δυνατότητα έμπειρων χρηστών προγραμμάτων ανάγνωσης οθόνης να ελέγξουν την πολυλογία. Η ομάδα εργασίας πιστεύει ότι η τεχνική μπορεί να είναι χρήσιμη για Ιστοσελίδες που δεν φέρουν επαναλαμβανόμενο περιεχόμενο σε κρυφές περιοχές κειμένου.
Σημείωση 2:Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήσης μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) και Κατανόησης συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Τα παρακάτω παραδείγματα χρησιμοποιούν τη λειτουργία επιλογής CSS και το παρακάτω σύνολο κανόνων:
a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }
Αυτό το παράδειγμα περιγράφει έναν ειδησεογραφικό τόπο που έχει μια σύνοψη για κάθε ιστορία μιας σειρά ειδήσεων που ακολουθείται από έναν σύνδεσμο με την ένδειξη "πλήρες κείμενο". Το κρυφό κείμενο του συνδέσμου περιγράφει τον σκοπό του συνδέσμου.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body>
<p>Washington has announced plans to stimulate economic growth.
<a href="#"> <span>Washington stimulates economic growth </span>
Full Story</a></p>
</body>
</html>
Αυτό το παράδειγμα περιγράφει έναν πόρο που περιέχει ηλεκτρονικά βιβλία σε διαφορετικές μορφές. Ο τίτλος κάθε βιβλίου ακολουθείται από τους συνδέσμους "HTML" και "PDF." Το κρυφό κείμενο περιγράφει τον σκοπό κάθε συνδέσμου.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"CSS σε δράση: Αόρατο περιεχόμενο μόνο για χρήστες προγραμμάτων ανάγνωσης οθόνης" (CSS in Action: Invisible Content Just for Screen Reader Users)
Για κάθε στοιχείο anchor
που χρησιμοποιεί αυτήν την τεχνική:
Ελέγξτε ότι έχει καθοριστεί ένα στοιχείο που περιορίζει την απεικόνισή του στο ένα pixel και τοποθετεί το κείμενο εκτός απεικόνισης με απόκρυψη της υπερχείλισης
Ελέγξτε ότι κάθε στοιχείο αυτής της κλάσης περιλαμβάνεται στο περιεχόμενο του στοιχείου anchor
Ελέγξτε ότι το συνδυασμένο περιεχόμενο του στοιχείου anchor
περιγράφει τον σκοπό του συνδέσμου
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Όλες οι τεχνολογίες που υποστηρίζουν CSS.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει τον τρόπο ενίσχυσης της οπτικής εμφάνισης του διαστήματος χαρακτήρων σε κείμενο μέσω φύλλων στυλ, με παράλληλη διατήρηση ακολουθίας κειμένου με νόημα. Η ιδιότητα CSS letter-spacing
βοηθά τους προγραμματιστές να ελέγξουν το εύρος του λευκού διαστήματος μεταξύ των χαρακτήρων. Συνιστάται αντί της προσθήκης κενών χαρακτήρων για τον έλεγχο του διαστήματος μεταξύ τους, εφόσον οι κενοί χαρακτήρες μπορούν να αλλάξουν το νόημα και την προφορά της λέξης.
Το ακόλουθο CSS θα προσθέσει το ισοδύναμο ενός κενού μεταξύ κάθε χαρακτήρα σε επικεφαλίδα επιπέδου-2:
Παράδειγμα κώδικα:
h2
{
letter-spacing: 1em;
}
Άρα, για την επισημείωση:
Παράδειγμα κώδικα:
<h2>Museum</h2>
το αποτέλεσμα κατόπιν της απόδοσης θα μοιάζει με παρακάτω:
Παράδειγμα κώδικα:
M u s e u m
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"CSS 2.0: Απόσταση γραμμάτων και λέξεων" (CSS 2.0: Letter and word spacing)
Για κάθε λέξη που εμφανίζεται να έχει μη τυποποιημένο διάστημα μεταξύ χαρακτήρων:
Ελέγξτε εάν η ιδιότητα CSS letter-spacing
χρησιμοποιήθηκε για τον έλεγχο του διαστήματος χαρακτήρων.
Ελέγξτε ότι το #1 είναι αληθές.
Κάθε τεχνολογία που μπορεί να χρησιμοποιήσει CSS για συμπερίληψη εικόνων.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να παράσχει έναν μηχανισμό για την προσθήκη αμιγώς διακοσμητικών εικόνων και εικόνων για οπτική μορφοποίηση σε περιεχόμενο Ιστού χωρίς να απαιτείται πρόσθετη επισημείωση εντός του περιεχομένου. Έτσι καθίσταται εφικτό για τις υποστηρικτικές τεχνολογίες να αγνοήσουν το μη κειμενικό περιεχόμενο. Μερικοί πράκτορες χρήστη μπορούν να αγνοήσουν ή να απενεργοποιήσουν το CSS με αίτηση του χρήστη, έτσι ώστε οι εικόνες παρασκηνίου που περιλαμβάνονται με το CSS, απλά να "εξαφανιστούν" και να μην παρεμβάλλονται με ρυθμίσεις απεικόνισης, όπως μεγαλύτερη γραμματοσειρά ή υψηλή αντίθεση.
Είναι δυνατή η συμπερίληψη εικόνων παρασκηνίου με τοις ακόλουθες ιδιότητες CSS:
background
,
background-image
,
content
, σε συνδυασμό με ψευδοστοιχεία :before
και :after
,
list-style-image
.
Σημείωση: Αυτή η τεχνική δεν είναι κατάλληλη για κάθε εικόνα που μεταφέρει πληροφορίες ή παρέχει λειτουργίες, ή για κάθε εικόνα που προορίζεται κυρίως στη δημιουργία μιας συγκεκριμένης αισθητικής εμπειρίας
Το φύλλο στυλ για μια ιστοσελίδα καθορίζει μια εικόνα παρασκηνίου για όλη τη σελίδα.
Παράδειγμα κώδικα:
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…
Το φύλλο στυλ για μια Ιστοσελίδα χρησιμοποιεί την ιδιότητα CSS background
για τη δημιουργία διακοσμητικών εφέ μετακίνησης όταν ο χρήστης αφήνει τον δείκτη του ποντικιού πάνω από σύνδεσμο.
Παράδειγμα κώδικα:
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}
Το φύλλο στυλ για μια ιστοσελίδα χρησιμοποιεί την ιδιότητα CSS background
για τη δημιουργία στρογγυλεμένων γωνιών σε στοιχεία.
Παράδειγμα κώδικα:
…
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…
Στο παρακάτω παράδειγμα, μία διακοσμητική εικόνα χρησιμοποιείται για την αντικατάσταση κειμένου εντός του στοιχείου heading.
Παράδειγμα κώδικα:
<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}
h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...
<h3 id="about" title="About example.com"> <span></span>About example.com </h3>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Η ιδιότητα "background" στην προδιαγραφή CSS 2.0" (background property in the CSS 2.0 specification)
Η προδιαγραφή HTML 4.01 (HTML 4.01 specification) αναφέρει ότι η παράμετρος background
του στοιχείου body
είναι αποδοκιμαζόμενη.
Αναθεωρημένη αντικατάσταση εικόνας (Revised Image Replacement)
Ελέγξτε για παρουσία διακοσμητικών εικόνων
Ελέγξτε ότι περιλαμβάνονται με το CSS
Εάν το #1 είναι αληθές, τότε το #2 είναι αληθές.
CSS
Αυτή η τεχνική σχετίζεται με:
Όταν το μέγεθος γραμματοσειράς προσδιορίζεται σε οποιεσδήποτε απόλυτες μονάδες μέτρησης, όπως σημεία ή pixel, οι εντολές μενού Μέγεθος γραμματοσειράς στο Internet Explorer 7 και παλαιότερες εκδόσεις, δεν αλλάζουν το μέγεθος του κειμένου.
Όταν έχει οριστεί κατάσταση λειτουργίας υψηλής αντίθεσης από τον πίνακα ελέγχου προσβασιμότητας στα Windows, το IE6 αυξάνει το μέγεθος του κειμένου σελίδας όπως στην περίπτωση ρύθμισης μιας ποσοστιαίας αλλαγής για το εξωτερικό παράθυρο μέσω CSS. Η τυπική συμπεριφορά διάταξης CSS οδηγεί σε πολλαπλασιασμό της σχετικής κλιμάκωσης, ώστε η κλιμάκωση του κειμένου εντός στοιχείων να διαφέρει κατά διακριτικό τρόπο. Τα Firefox και IE7 δεν αλλάζουν την κλιμάκωση του περιεχομένου με βάση τις ρυθμίσεις συστήματος κατά τρόπο που επηρεάζει τη διάταξη CSS, ώστε αυτό να μην εμφανίζεται σε αυτά τα προγράμματα περιήγησης.
Σκοπός αυτής της τεχνικής είναι ο αναλογικός προσδιορισμός του μεγέθους γραμματοσειράς κειμένου, ώστε οι πράκτορες χρήστη να μπορούν να πραγματοποιήσουν αποτελεσματικά την κλιμάκωση περιεχομένου. Εάν προσδιοριστεί ένα μέγεθος γραμματοσειράς για το στοιχείο body
, όλα τα άλλα στοιχεία κληρονομούν αυτήν την τιμή, εκτός εάν πραγματοποιηθεί παράκαμψη από μία πιο συγκεκριμένη λειτουργία επιλογής.
Αυτό το παράδειγμα ορίζει το μέγεθος γραμματοσειράς για το στοιχείο strong
, ώστε το κείμενό του να είναι πάντα μεγαλύτερο του περιβάλλοντος κειμένου σε κάθε περιβάλλον που χρησιμοποιείται. Θεωρώντας ότι οι επικεφαλίδες και παράγραφοι κάνουν χρήση διαφορετικών μεγεθών γραμματοσειράς, οι λέξεις με έμφαση στο παράδειγμα αυτό θα είναι μεγαλύτερες από το περιβάλλον κείμενό τους.
Παράδειγμα κώδικα:
strong {font-size: 120%}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε όλες τις ιδιότητες CSS που ορίζουν το μέγεθος γραμματοσειράς για κάθε σύνολο κανόνων.
Ελέγξτε ότι η τιμή είναι ένα ποσοστό.
Ελέγξτε ότι το #2 είναι αληθές.
CSS
Αυτή η τεχνική σχετίζεται με:
Όταν το μέγεθος γραμματοσειράς δίνεται σε απόλυτες μονάδες μέτρησης, όπως σημεία ή pixel, οι εντολές μενού Μέγεθος γραμματοσειράς στο Internet Explorer 7 και παλαιότερες εκδόσεις, δεν αλλάζουν το μέγεθος του κειμένου.
Σκοπός αυτής της τεχνικής είναι να προσδιοριστεί ένα ονοματισμένο μέγεθος γραμματοσειράς που εκφράζει το σχετικό επιθυμητό μέγεθος γραμματοσειράς. Αυτές οι τιμές παρέχουν υποδείξεις ώστε ο πράκτορας χρήστη να μπορεί να επιλέξει ένα μέγεθος γραμματοσειράς σχετικό με το κληρονομημένο μέγεθος γραμματοσειράς.
Αυτό το παράδειγμα επιλέγει ένα μεγαλύτερο μέγεθος γραμματοσειράς για τα στοιχεία strong
, ώστε το κείμενό τους να είναι πάντα μεγαλύτερο του περιβάλλοντος κειμένου σε κάθε περιβάλλον που χρησιμοποιούνται. Θεωρώντας ότι οι επικεφαλίδες και παράγραφοι κάνουν χρήση διαφορετικών μεγεθών γραμματοσειράς, οι λέξεις με έμφαση στο παράδειγμα αυτό θα είναι μεγαλύτερες από το περιβάλλον κείμενό τους.
Παράδειγμα κώδικα:
strong {font-size: larger}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε όλες τις ιδιότητες CSS που ορίζουν το μέγεθος γραμματοσειράς του συνόλου κανόνων CSS.
Ελέγξτε ότι η τιμή είναι μία εκ των xx-small
, xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
, xsmaller
ή larger
.
Ελέγξτε ότι το #2 είναι αληθές.
CSS
Αυτή η τεχνική σχετίζεται με:
Στο Internet Explorer 6, η χρήση em για μεγέθη γραμματοσειράς θα προκαλέσει μεγαλύτερη αύξηση του κειμένου από τη χρήση % ή ονοματισμένων μεγεθών γραμματοσειράς. Έτσι, το μέγεθος κειμένου/μεγαλύτερο μπορεί να προκαλέσει αύξηση του κειμένου μεγαλύτερη του 200% και προβλήματα αποκοπής.
Όταν το μέγεθος γραμματοσειράς δίνεται σε απόλυτες μονάδες μέτρησης, όπως σημεία ή pixel, οι εντολές μενού Μέγεθος γραμματοσειράς στο Internet Explorer 7 και παλαιότερες εκδόσεις, δεν αλλάζουν το μέγεθος του κειμένου.
Το Internet Explorer 7 αλλάζει μόνο το μέγεθος κειμένου όταν ορίζεται το CSS σε ένα στοιχείο style, λαμβάνοντας ένα στοιχείο όπως στα παραδείγματα. Κατά τη χρήση ένθετου στυλ με την παράμετρο "style", η αλλαγή μεγέθους κειμένου δεν υποστηρίζεται.
Σκοπός αυτής της τεχνικής είναι ο προσδιορισμός του μεγέθους γραμματοσειράς κειμένου σε μονάδες em
, ώστε οι πράκτορες χρήστη να μπορούν να πραγματοποιήσουν αποτελεσματικά την κλιμάκωση περιεχομένου. Καθώς το em είναι μια ιδιότητα γραμματοσειράς, κλιμακώνεται ανάλογα με την αλλαγή του μεγέθους της γραμματοσειράς. Εάν προσδιοριστεί ένα μέγεθος γραμματοσειράς για το στοιχείο body
, όλα τα άλλα στοιχεία κληρονομούν αυτήν την τιμή, εκτός εάν πραγματοποιηθεί παράκαμψη από μία πιο συγκεκριμένη λειτουργία επιλογής.
Αυτό το παράδειγμα ορίζει το μέγεθος γραμματοσειράς για το στοιχείο strong
, ώστε το κείμενό του να είναι πάντα μεγαλύτερο του περιβάλλοντος κειμένου σε κάθε περιβάλλον που χρησιμοποιείται. Θεωρώντας ότι οι επικεφαλίδες και παράγραφοι κάνουν χρήση διαφορετικών μεγεθών γραμματοσειράς, οι λέξεις με έμφαση στο παράδειγμα αυτό θα είναι μεγαλύτερες από το περιβάλλον κείμενό τους.
Παράδειγμα κώδικα:
strong {font-size: 1.6em}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size. </p>
…
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε όλες τις ιδιότητες CSS που ορίζουν το μέγεθος γραμματοσειράς για κάθε σύνολο κανόνων.
Ελέγξτε ότι η τιμή εκφράζεται σε μονάδες em
.
Ελέγξτε ότι το #2 είναι αληθές.
CSS, HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Το Internet Explorer 6.0 και παλαιότερες εκδόσεις για Windows, δεν υποστηρίζουν δυναμικές ψευδο-κλάσεις για οποιαδήποτε στοιχεία, με την εξαίρεση υπερσυνδέσεων. Το Internet Explorer 7 δεν υποστηρίζει στυλ :focus για στοιχεία διαφορετικά των υπερσυνδέσεων. Συμπεριλάβετε την ψευδο-κλάση CSS :active για να επιτύχετε το ίδιο αποτέλεσμα με την :focus στο Internet Explorer για (X)HTML συνδέσμους (στοιχείο a).
Τα Firefox 1.5, Firefox 2.0 και SeaMonkey 1.1 για Windows υποστηρίζουν δυναμικές ψευδο-κλάσεις για πεδία εισαγωγής κειμένου, περιοχές κειμένου, ραδιόπληκτρα, τετράγωνα επιλογής, στοιχεία select, κουμπιά υποβολής/επαναφοράς και στοιχεία button. Ωστόσο, η ρύθμιση διαφορετικών χρωμάτων ή περιγραμμάτων όταν ένα ραδιόπληκτρο ή τετράγωνο επιλογής επισημαίνεται, δεν υποστηρίζεται.
Το Opera 9.02 για Windows υποστηρίζει δυναμικές ψευδο-κλάσεις για πεδία εισαγωγής κειμένου, περιοχές κειμένου, ραδιόπληκτρα, τετράγωνα επιλογής, στοιχεία select, κουμπιά υποβολής/επαναφοράς, αλλά όχι για στοιχεία button.
Τα Firefox 2.0, Opera 9.02 και SeaMonkey 1.1 για Windows υποστηρίζουν επίσης παρακείμενες συγγενικές λειτουργίες επιλογής για ετικέτες φορμών. Τα Firefox 1.5, Internet Explorer 6.0 και παλαιότερες εκδόσεις για Windows, δεν υποστηρίζουν παρακείμενες συγγενικές λειτουργίες επιλογής για ετικέτες φορμών.
Σκοπός αυτής της τεχνικής είναι να επιδείξει πώς η οπτική εμφάνιση μπορεί να βελτιωθεί μέσω φύλλων στυλ για την παροχή οπτικών σχολίων όταν ένα αλληλεπιδραστικό στοιχείο έχει επισήμανση ή όταν ένας χρήστης αφήνει τον δείκτη μιας συσκευής κατάδειξης πάνω σε αυτό. Η επισήμανση του στοιχείου με εστίαση ή με δείκτη συσκευής κατάδειξης μπορεί να παρέχει πληροφορίες όπως το γεγονός ότι το στοιχείο είναι αλληλεπιδραστικό ή τον σκοπό του αλληλεπιδραστικού στοιχείου.
Η παροχή οπτικών σχολίων μπορεί να είναι εφικτή μέσω περισσότερων της μίας καταστάσεων λειτουργίας. Συνήθως επιτυγχάνεται μέσω χρήσης ενός ποντικιού για να αφεθεί ο δείκτης του πάνω στο στοιχείο ή ενός πληκτρολογίου για μετακίνηση με το πλήκτρο tab στο στοιχείο.
Στο παράδειγμα αυτό, οι ενδείκτες εστίασης ποντικιού και πληκτρολογίου έχουν εφαρμοσθεί στα στοιχεία link. Γίνεται χρήση CSS για εφαρμογή ενός χρώματος παρασκηνίου όταν τα στοιχεία link επισημαίνονται.
Ακολουθεί το περιεχόμενο προς εμφάνιση:
Παράδειγμα κώδικα:
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">Services</a></li>
<li class="page_item"><a href="/projects">Projects</a></li>
<li class="page_item"><a href="/demos">Demos</a></li>
<li class="page_item"><a href="/about-us">About us</a></li>
<li class="page_item"><a href="/contact-us">Contact us</a></li>
<li class="page_item"><a href="/links">Links</a></li>
</ul>
Ακολουθεί το CSS που αλλάζει το χρώμα παρασκηνίου για τα παραπάνω στοιχεία όταν επισημαίνονται με ποντίκι ή πληκτρολόγιο:
Παράδειγμα κώδικα:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}
Στο παράδειγμα αυτό χρησιμοποιείται η ψευδο-κλάση :focus για την αλλαγή του στυλ που εφαρμόζεται στα πεδία εισαγωγής δεδομένων, όταν επισημαίνονται μέσω αλλαγής του χρώματος παρασκηνίου.
Παράδειγμα κώδικα:
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00; color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6: color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"CSS 2.0: 5.11.3 Οι δυναμικές ψευδο-κλάσεις: :hover, :active και :focus" (CSS 2.0: 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus)
"CSS 2.0: 5.7 Παρακείμενες συγγενικές λειτουργίες επιλογής" (CSS 2.0: 5.7 Adjacent sibling selectors)
Για κάθε στοιχείο ικανό να επισημανθεί:
Με χρήση ποντικιού, αφήστε τον δείκτη του πάνω στο στοιχείο.
Ελέγξτε ότι αλλάζει το χρώμα παρασκηνίου ή περιγράμματος.
Απομακρύνετε το ποντίκι από το αντικείμενο πριν επιχειρήσετε επισήμανση με πληκτρολόγιο.
Με χρήση πληκτρολογίου, μετακινηθείτε με το πλήκτρο tab στο στοιχείο.
Ελέγξτε ότι αλλάζει το χρώμα παρασκηνίου ή περιγράμματος.
Ελέγξτε ότι οι αλλαγές χρώματος στο παρασκήνιο ή το περίγραμμα καταργούνται όταν διακόπτεται η επισήμανση του στοιχείου.
Οι έλεγχοι #3, #5 και #6 είναι αληθείς.
(X)HTML, CSS
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι στοιχεία ελέγχου φορμών βάσει κειμένου αλλάζουν μέγεθος όταν το μέγεθος κειμένου αλλάζει στον πράκτορα χρήστη. Αυτό θα επιτρέψει στους χρήστες να εισάγουν κείμενο και να διαβάζουν όσα έχουν καταχωρήσει στα πλαίσια εισαγωγής δεδομένων, καθώς το κείμενο εμφανίζεται στο απαιτούμενο από τον χρήστη μέγεθος.
Τα στοιχεία ελέγχου φόρμας βάσει κειμένου περιλαμβάνουν πλαίσια εισαγωγής δεδομένων (κείμενο και περιοχή κειμένου), καθώς και κουμπιά.
Μία φόρμα "Επικοινωνία μαζί μας" διαθέτει ορισμένες εισαγωγικές πληροφορίες και στοιχεία ελέγχου φόρμας για χρήστες που εισάγουν το όνομά τους, το επώνυμό τους, έναν αριθμό τηλεφώνου και διεύθυνση ηλεκτρονικού ταχυδρομείου. Όλα τα στοιχεία ελέγχου κειμένου και φόρμας έχουν υλοποιηθεί με κλιμακούμενο τρόπο. Αυτό περιλαμβάνει προσδιορισμό ενός μεγέθους γραμματοσειράς για τα ίδια τα στοιχεία ελέγχου, καθώς το μέγεθος γραμματοσειράς δεν κληρονομείται στο Internet Explorer.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: Παράδειγμα αλλαγής μεγέθους στοιχείου input με CSS (Example of resizing input with CSS).
Αυτό το παράδειγμα λειτουργεί σε IE με το χαρακτηριστικό του μεγέθους κειμένου. Ωστόσο, δεν κλιμακώνεται στο Firefox 2.0.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
input.geomsize {
width: 1.2em;
height: 1.2em;}
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: "Παράδειγμα αλλαγής μεγέθους ραδιοπλήκτρων και τετραγώνων ελέγχου με CSS" (Example of resizing radio buttons and checkboxes with CSS).
Καταχωρήστε κείμενο σε στοιχεία ελέγχου φόρμας βάσει κειμένου, τα οποία λαμβάνουν κείμενο από τον χρήστη.
Αυξήστε το μέγεθος κειμένου του περιεχομένου κατά 200%.
Ελέγξτε ότι το κείμενο στα στοιχεία ελέγχου φόρμας βάσει κειμένου αυξάνεται κατά 200%.
Το #3 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν CSS
Αυτή η τεχνική σχετίζεται με:
Στην πλατφόρμα Microsoft Windows, τα Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 σε "κατάσταση καλλιγραφίας" και το Internet Explorer 7 σε "κατάσταση καλλιγραφίας", κάνουν χρήση ενός μοντέλου πλαισίου που παρεκκλίνει από την προδιαγραφή W3C CSS: σε αυτές τις εκδόσεις προγραμμάτων περιήγησης, η δεξιά και αριστερή απόσταση και τα δεξιά και αριστερά όρια δεν αυξάνουν το συνολικό πλάτος ενός στοιχείου, έτσι το διάστημα για το περιεχόμενο εντός ενός τέτοιου στοιχείου θα είναι περιορισμένο. (Αυτή η συμπεριφορά είναι γνωστή ως το "σφάλμα μοντέλου πλαισίου".) Το Internet Explorer 5.5 για Mac OS και τα Internet Explorer 6 και 7 για Windows σε "κατάσταση συμμόρφωσης με πρότυπα", κάνουν χρήση του μοντέλου πλαισίου που ορίζεται στην προδιαγραφή W3C CSS.
Οι σχεδιαστές Ιστού χρησιμοποιούν ορισμένες φορές εικόνες spacer (συνήθως 1 x 1 pixel, διάφανες εικόνες GIF) για καλύτερο έλεγχο μίας διάταξης, για παράδειγμα σε πίνακες ή για τη δημιουργία εσοχής σε μια παράγραφο. Ωστόσο, τα Επάλληλα Φύλλα Στιλ (CSS) επιτρέπουν επαρκή έλεγχο σε μια διάταξη για την αντικατάσταση εικόνων spacer. Οι ιδιότητες CSS για περιθώρια και αποστάσεις μπορούν να χρησιμοποιηθούν μόνες τους ή συνδυαστικά για τον έλεγχο της διάταξης. Οι ιδιότητες περιθωρίου ('margin-top', 'margin'right', 'margin-bottom', 'margin-left' και η σύντομη ιδιότητα 'margin') μπορούν να χρησιμοποιηθούν σε κάθε στοιχείο που εμφανίζεται ως ένα μπλοκ. Προσθέτουν διάστημα στο εξωτερικό ενός στοιχείου. Οι ιδιότητες απόστασης ('padding-top', 'padding-right', 'padding-bottom', 'padding-left' και η σύντομη ιδιότητα 'padding') μπορούν να χρησιμοποιηθούν σε κάθε στοιχείο. Προσθέτουν διάστημα στο εσωτερικό του στοιχείου.
Το παρακάτω παράδειγμα αποτελείται από δύο μέρη: τον κώδικα CSS που προσδιορίζει ένα περιθώριο σε όλες τις πλευρές του πίνακα και απόσταση για τα κελιά πίνακα και τον κώδικα HTML για τον πίνακα, που δεν περιέχει εικόνες spacer και δεν είναι ένθετος εντός ενός άλλου πίνακα.
Παράδειγμα κώδικα:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Δεν υπάρχουν διαθέσιμοι έλεγχοι για την τεχνική αυτή.
Όλες οι τεχνολογίες που υποστηρίζουν CSS
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική περιγράφει τον τρόπο ευθυγράμμισης μπλοκ κειμένου είτε αριστερά ή δεξιά, ορίζοντας την ιδιότητα CSS text-align
.
Στο παρακάτω παράδειγμα ευθυγραμμίζεται κείμενο στα αριστερά. Στο φύλλο στυλ, ορίστε την κλάση:
Παράδειγμα κώδικα:
p.left {text-align: left}
Στο περιεχόμενο καλέστε την κλάση.
Παράδειγμα κώδικα:
<p class="left"> Lorem ipsum dolor sit …</p>
Στο παρακάτω παράδειγμα ευθυγραμμίζεται κείμενο στα δεξιά.
Παράδειγμα κώδικα:
p.right {text-align: right}
Στο περιεχόμενο καλέστε την κλάση.
Παράδειγμα κώδικα:
<p class="right"> Lorem ipsum dolor sit …</p>
Ελέγξτε ότι το κείμενο ευθυγραμμίζεται είτε αριστερά ή δεξιά.
Ελέγξτε ότι το #1 είναι αληθές.
CSS
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι χρησιμοποιείται CSS με τρόπο που επιτρέπει στους χρήστες να εμφανίζουν περιεχόμενο με τέτοιο τρόπο, ώστε το μήκος γραμμής να είναι κατά μέσο όρο 80 χαρακτήρες ή λιγότερο. Αυτό καθιστά εφικτό για χρήστες με ορισμένες δυσκολίες στην ανάγνωση ή όραση που έχουν πρόβλημα εστίασης κατά την ανάγνωση μεγάλων γραμμών κειμένου, να βλέπουν και αλληλεπιδρούν με το περιεχόμενο περισσότερο αποτελεσματικά. Αυτή η τεχνική επιτρέπει επίσης στο πλάτος στήλης να αυξηθεί παράλληλα με την αύξηση των μεγεθών γραμματοσειράς, κάτι που θα μειώσει την πιθανότητα αποκοπής καθώς αυξάνεται το μέγεθος κειμένου.
Να σημειωθεί ότι αυτή η τεχνική δεν απαιτεί από τους συγγραφείς να κάνουν χρήση του CSS για να περιορίσουν το πλάτος γραμμών κειμένου σε λιγότερο από 80 χαρακτήρες στην προεπιλεγμένη προβολή. Αντίθετα, η σύσταση χρήσης σχετικών μετρήσεων στις διατάξεις CSS, βοηθά να διασφαλιστεί ότι οι συγγραφείς δεν ορίζουν πλάτη στήλης κατά τέτοιο τρόπο που θα καθιστά δυνατό για χρήστες να εμφανίζουν περιεχόμενο με μήκος γραμμής 80 χαρακτήρων ή λιγότερο.
Στο παράδειγμα αυτό, το πλάτος div
ορίζεται σε em στο φύλλο στυλ.
Σημείωση: Η ιδιότητα CSS max-width
δεν υποστηρίζεται σε εκδόσεις του Internet Explorer 6 και παλαιότερες.
Παράδειγμα κώδικα:
#main_content {max-width: 70em}
Και το μπλοκ κειμένου θα τοποθετηθεί εντός του div
στο περιεχόμενο.
Παράδειγμα κώδικα:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
Στο παράδειγμα αυτό, το πλάτος div
ορίζεται σε ποσοστό στο φύλλο στυλ.
Παράδειγμα κώδικα:
#main_content {width: 90%}
Και το μπλοκ κειμένου θα τοποθετηθεί εντός του div
στο περιεχόμενο.
Παράδειγμα κώδικα:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Μοντέλο οπτικής μορφοποίησης CSS 2 (CSS 2 Visual formatting Model)
Λεπτομέρειες μοντέλου οπτικής μορφοποίησης CSS 2 (CSS 2 Visual formatting Model Details)
Σχετικά με μεταβλητές και σταθερού πλάτους διατάξεις (About fluid and fixed width layouts)
Ιδανικό μήκος γραμμής για περιεχόμενο (Ideal line length for content)
Ελέγξτε να δείτε ότι οι στήλες ορίζονται σε σχετικές μονάδες.
Ελέγξτε να δείτε ότι το μήκος γραμμής μπορεί να οριστεί σε 80 χαρακτήρες ή λιγότερο, μέσω αλλαγής μεγέθους του παραθύρου του προγράμματος περιήγησης.
Οι έλεγχοι #1 και #2 είναι αληθείς.
Όλες οι τεχνολογίες που υποστηρίζουν CSS
Αυτή η τεχνική σχετίζεται με:
Πολλά άτομα με νοητικές αναπηρίες έχουν πρόβλημα παρακολούθησης γραμμών κειμένου όταν ένα μπλοκ κειμένου έχει μονό διάστημα. Η παροχή διαστήματος χαρακτήρων μεταξύ 1,5 έως 2, επιτρέπει σε αυτούς να αρχίζουν μια νέα γραμμή πιο εύκολα όταν έχουν ολοκληρώσει την προηγούμενη.
Ρύθμιση του στοιχείου σε ύψος γραμμής 1,5. Στο φύλλο στυλ ορίστε τα χαρακτηριστικά του στοιχείου.
Παράδειγμα κώδικα:
p { line-height: 150%; }
Στο περιεχόμενο το στοιχείο θα είναι πλέον ύψους γραμμής 1,5 σε όλο το έγγραφο.
Παράδειγμα κώδικα:
<p> Lorem ipsum dolor sit … </p>
Ρύθμιση κλάσης σε ύψος γραμμής 1,5 (διάστημα χαρακτήρων γραμμής σε ενάμισι διάστημα). Στο φύλλο στυλ, ορίστε την κλάση.
Παράδειγμα κώδικα:
p.tall {line-height:150%}
Στο περιεχόμενο καλέστε την κλάση.
Παράδειγμα κώδικα:
<p class="tall"> Lorem ipsum dolor sit … </p>
Ρύθμιση κλάσης σε ύψος γραμμής διπλού διαστήματος. Στο φύλλο στυλ, ορίστε την κλάση.
Παράδειγμα κώδικα:
p.tall {line-height:200%}
Στο περιεχόμενο καλέστε την κλάση.
Παράδειγμα κώδικα:
<p class="tall"> Lorem ipsum dolor sit … </p>
Ανοίξτε περιεχόμενο σε ένα πρόγραμμα περιήγησης.
Ελέγξτε ότι το διάστημα χαρακτήρων μεταξύ γραμμών σε μπλοκ κειμένου είναι μεταξύ 1,5 και 2.
Η διαδικασία ελέγχου #2 είναι αληθής.
Όλες οι τεχνολογίες που υποστηρίζουν CSS.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιδείξει πώς το CSS μπορεί να χρησιμοποιηθεί για τον έλεγχο της οπτικής παρουσίασης κειμένου. Αυτό θα επιτρέψει στους χρήστες να τροποποιήσουν, μέσω του πράκτορα χρήστη, τα οπτικά χαρακτηριστικά του κειμένου ώστε να ικανοποιήσουν την απαίτησή τους. Τα χαρακτηριστικά κειμένου περιλαμβάνουν θέματα όπως μέγεθος, χρώμα, οικογένεια γραμματοσειράς και σχετική θέση.
Το CSS ωφελεί την προσβασιμότητα κυρίως μέσω του διαχωρισμού της δομής εγγράφου από την παρουσίαση. Τα φύλλα στυλ σχεδιάστηκαν για να επιτρέπουν ακριβή έλεγχο σε, εκτός σήμανσης, διάστημα χαρακτήρων, ευθυγράμμιση κειμένου, τοποθέτηση αντικειμένου στη σελίδα, έξοδο ήχου και ομιλίας, χαρακτηριστικά γραμματοσειράς κ.λπ.. Με τον διαχωρισμό του στυλ από την επισημείωση, οι συγγραφείς μπορούν να απλοποιούν την επισημείωση στο περιεχόμενό τους, καθιστώντας το πιο προσβάσιμο ταυτόχρονα.
Το κείμενο εντός εικόνων έχει αρκετά προβλήματα προσβασιμότητας, συμπεριλαμβανομένης της αδυναμίας:
κλιμάκωσης σύμφωνα με ρυθμίσεις στο πρόγραμμα περιήγησης
εμφάνισης με χρώματα που ορίζονται από ρυθμίσεις στο πρόγραμμα περιήγησης ή κανόνες σε φύλλα στυλ που ορίζονται από τον χρήστη
πλήρωσης των ρυθμίσεων λειτουργικού συστήματος, όπως υψηλή αντίθεση
Είναι καλύτερο να χρησιμοποιείται πραγματικό κείμενο για το τμήμα κειμένου σε αυτά τα στοιχεία και ένας συνδυασμός σημασιολογικής επισημείωσης και φύλλα στυλ για τη δημιουργία οπτικής παρουσίασης. Για να λειτουργήσει αυτό αποτελεσματικά, επιλέξτε γραμματοσειρές που πιθανόν διατίθενται στο σύστημα του χρήστη και ορίστε εφεδρικές γραμματοσειρές για χρήστες που ενδέχεται να μην έχουν την πρώτη γραμματοσειρά που προσδιορίζεται. Νεότεροι υπολογιστές και πράκτορες χρήστη πραγματοποιούν συχνά εξομάλυνση όλου του κειμένου, έτσι είναι πιθανό οι επικεφαλίδες και τα κουμπιά σας να δείχνουν πιο όμορφα σε αυτά τα συστήματα, χωρίς να καταφύγετε σε εικόνες κειμένου.
Οι ακόλουθες ιδιότητες CSS είναι χρήσιμες για δημιουργία στυλ κειμένου και αποφυγή της ανάγκης για κείμενο σε εικόνες:
Η ιδιότητα font-family
χρησιμοποιείται για την εμφάνιση της πτυχής του κώδικα σε μία οικογένεια γραμματοσειράς μονού διαστήματος.
Η ιδιότητα text-align
χρησιμοποιείται για την εμφάνιση του κειμένου στα δεξιά της οθόνης προβολής.
Η ιδιότητα font-size
χρησιμοποιείται για την εμφάνιση του κειμένου σε ένα μεγαλύτερο μέγεθος.
Η ιδιότητα font-style
χρησιμοποιείται για την εμφάνιση κειμένου σε πλάγια γραφή.
Η ιδιότητα font-weight
χρησιμοποιείται για να ορίσει τον τρόπο εμφάνισης στο κείμενο για παχιούς ή λεπτούς χαρακτήρες.
Η ιδιότητα color
χρησιμοποιείται για την εμφάνιση του χρώματος κειμένου ή κοντέινερ κειμένου.
Η ιδιότητα line-height
χρησιμοποιείται για την εμφάνιση του ύψους γραμμής για ένα μπλοκ κειμένου.
Η ιδιότητα text-transform
χρησιμοποιείται για να ελέγχεται εάν τα γράμματα στο κείμενο θα είναι με πεζούς ή κεφαλαίους χαρακτήρες.
Η ιδιότητα letter-spacing
χρησιμοποιείται για τον έλεγχο του διαστήματος γραμμάτων στο κείμενο.
Η ιδιότητα background-image
μπορεί να χρησιμοποιηθεί για την εμφάνιση κειμένου σε μη κειμενικό παρασκήνιο.
Η ψευδο-κλάση first-line
μπορεί να χρησιμοποιηθεί για την τροποποίηση της παρουσίασης της πρώτης γραμμής σε ένα μπλοκ κειμένου.
Η ψευδο-κλάση :first-letter
μπορεί να χρησιμοποιηθεί για την τροποποίηση της παρουσίασης του πρώτου γράμματος σε ένα μπλοκ κειμένου.
Οι ψευδο-κλάσεις :before
και :after
μπορούν να χρησιμοποιηθούν για την εισαγωγή διακοσμητικού, μη κειμενικού περιεχομένου πριν ή μετά από μπλοκ κειμένου.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
code { font-family:"Courier New", Courier, monospace }
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p class="right">This text should be to the right of the viewport.</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.right { text-align: right; }
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>09 <strong class="largersize">March</strong> 2008</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
strong.largersize { font-size: 1.5em; }
Σημείωση: Το στυλ που χρησιμοποιείται στο παράδειγμα αυτό δεν χρησιμοποιείται για τη μεταφορά πληροφοριών, δομής ή σχέσεων.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>09 <em class="highlight">March</em> 2008</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.highlight{ color: red; }
Σημείωση: Το στυλ που χρησιμοποιείται στο παράδειγμα αυτό δεν χρησιμοποιείται για τη μεταφορά πληροφοριών, δομής ή σχέσεων.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology
Blog</a>.</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.featuredsite{ font-style:italic; }
Σημείωση: Το στυλ που χρησιμοποιείται στο παράδειγμα αυτό δεν χρησιμοποιείται για τη μεταφορά πληροφοριών, δομής ή σχέσεων.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>This deal is available <span class="highlight">now!</span></p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.highlight { font-weight:bold; color:#990000; }
Σημείωση: Το στυλ που χρησιμοποιείται στο παράδειγμα αυτό δεν χρησιμοποιείται για τη μεταφορά πληροφοριών, δομής ή σχέσεων.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>09 <span class="caps">March</span> 2008</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.caps { text-transform:uppercase; }
Η ιδιότητα CSS line-height
χρησιμοποιείται για την εμφάνιση του ύψους γραμμής για την παράγραφο στο διπλάσιο ύψος της γραμματοσειράς.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p>Concern for man and his fate must always form the<br />
chief interest of all technical endeavors. <br />
Never forget this in the midst of your diagrams and equations. </p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
p { line-height:2em; }
Η ιδιότητα CSS line-height
χρησιμοποιείται για την εμφάνιση του ύψους γραμμής για το κείμενο σε λιγότερο από το ύψος της γραμματοσειράς. Η δεύτερη γραμμή κειμένου τοποθετείται ύστερα από την πρώτη γραμμή κειμένου και οπτικά φαίνεται σαν το κείμενο να αποτελεί μέρος της πρώτης γραμμής αλλά να έχει βρεθεί λίγο πίσω.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
Η ιδιότητα CSS letter-spacing
χρησιμοποιείται για την εμφάνιση των γραμμάτων πιο κοντά μεταξύ τους στη δεύτερη γραμμή κειμένου.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }
Η ιδιότητα CSS letter-spacing
χρησιμοποιείται για την εμφάνιση των γραμμάτων πιο κοντά μεταξύ τους στη δεύτερη γραμμή κειμένου.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<h1 class="upper2">News</h1>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.upper2 { text-transform:uppercase; letter-spacing:1em; }
Η ιδιότητα CSS font-style
χρησιμοποιείται για την εμφάνιση του κειμενικού συστατικού στοιχείου ενός banner και η ιδιότητα background-image
χρησιμοποιείται για την εμφάνιση μίας εικόνας πίσω από το κείμενο.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<div id="banner"><span id="bannerstyle1">Welcome</span>
<span id="bannerstyle2">to your local city council</span></div>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}
Η ψευδο-κλάση CSS :first-line
χρησιμοποιείται για την εμφάνιση της πρώτης γραμμής κειμένου σε μια μεγαλύτερη, κόκκινη γραμματοσειρά.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p class="startline">Once upon a time...<br />
...in a land far, far away... </p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.startline:first-line { font-size:2em; color:#990000; }
Η ψευδο-κλάση CSS :first-letter
χρησιμοποιείται για την εμφάνιση του πρώτου γράμματος σε ένα μεγαλύτερο μέγεθος γραμματοσειράς, κόκκινο και με κατακόρυφη ευθυγράμμιση στο μέσο.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<p class="startletter">Once upon a time...</p>
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε εάν οι ιδιότητες CSS χρησιμοποιήθηκαν για τον έλεγχο της οπτικής παρουσίασης του κειμένου
Ελέγξτε ότι το #1 είναι αληθές.
Σελίδες που χρησιμοποιούν CSS.
Αυτή η τεχνική σχετίζεται με:
Τα περισσότερα προγράμματα περιήγησης επιτρέπουν στον χρήστη να αλλάζει τις ρυθμίσεις χρωμάτων για παράκαμψη των χρωματικών σχεδίων CSS και HTML της Ιστοσελίδας. Αυτό υποστηρίζεται από όλες τις εκδόσεις του Internet Explorer, Firefox, Mozilla, Netscape και Opera ύστερα από την έκδοση 6.
Όταν γίνεται παράκαμψη καθορισμένων χρωμάτων στο Firefox και το Netscape, γίνεται αδύνατη η χρήση των περισσότερων αναδυόμενων παραθύρων και αναπτυσσόμενων μενού Javascript. Τα αναδυόμενα παράθυρα αποκτούν ένα διάφανο παρασκήνιο, με τοποθέτηση από πάνω του κειμένου του πλαισίου στο κείμενο της σελίδας και τα αναπτυσσόμενα μενού είτε γίνονται διάφανα ή αποκτούν ένα σκοτεινό-γκρίζο παρασκήνιο.
Το Internet Explorer 6 δεν θα παρακάμψει χρώματα παρασκηνίου, εκτός εάν το ίδιο χρώμα παρασκηνίου έχει επίσης επιλεγεί στις ρυθμίσεις συστήματος.
Ορισμένες Ιστοσελίδες χρησιμοποιούν χρώματα για τον προσδιορισμό διαφορετικών ομαδοποιήσεων. Σκοπός αυτής της τεχνικής είναι να επιτρέψει στους χρήστες να επιλέγουν συγκεκριμένους χρωματικούς συνδυασμούς για το κείμενο και το παρασκήνιο του κύριου περιεχομένου, ενώ παράλληλα να διατηρούν τα οπτικά στοιχεία για τις ομαδοποιήσεις και την οργάνωση της Ιστοσελίδας. Όταν ένας χρήστης παρακάμπτει τα χρώματα προσκηνίου και παρασκηνίου όλου του κειμένου σε μια σελίδα, ενδέχεται να χαθούν οπτικά στοιχεία για την ομαδοποίηση και οργάνωση της Ιστοσελίδας, καθιστώντας πιο δύσκολη την κατανόηση και χρήση.
Όταν ένας συγγραφέας δεν ορίζει τα χρώματα του κειμένου και παρασκηνίου στο κύριο περιεχόμενο, είναι δυνατή η αλλαγή των χρωμάτων αυτών των περιοχών στο πρόγραμμα περιήγησης, χωρίς την ανάγκη παράκαμψης των χρωμάτων με ένα φύλλο στυλ χρήστη. Ο ορισμός των χρωμάτων κειμένου και παρασκηνίου δευτερεύοντος περιεχομένου σημαίνει ότι το πρόγραμμα περιήγησης δεν θα παρακάμψει αυτά τα χρώματα.
Με αυτήν την τεχνική ο συγγραφέας χρησιμοποιεί το προεπιλεγμένο χρώμα κειμένου και παρασκηνίου της κύριας περιοχής. Ως εκ τούτου, τα χρώματα καθορίζονται πλήρως από τον πράκτορα χρήστη μέσω των χρωματικών προτιμήσεων του χρήστη. Ο χρήστης μπορεί να διασφαλίσει ότι η επιλογή χρωμάτων ικανοποιεί καλύτερα τις ανάγκες του και παρέχει τη βέλτιστη εμπειρία ανάγνωσης.
Μία Ιστοσελίδα HTML χρησιμοποιεί CSS για να ορίσει τα χρώματα κειμένου και παρασκηνίου για όλο το δευτερεύον περιεχόμενο, όπως γραμμές πλοήγησης, γραμμές μενού και τον πίνακα περιεχομένων. Δεν ορίζεται ούτε το χρώμα κειμένου, ούτε παρασκηνίου του κύριου περιεχομένου. Ο χρήστης ορίζει τις δικές του χρωματικές προτιμήσεις στο πρόγραμμα περιήγησης, ώστε να εμφανίζει το κύριο περιεχόμενο με χρώματα και αντιθέσεις που είναι βολικά για αυτόν. Η διάκριση μεταξύ των διαφόρων τμημάτων της σελίδας παραμένει οπτικά εμφανής.
Ένα μουσικό περιοδικό έχει ένα άρθρο που είναι σε μπλε κείμενο επάνω σε λευκό παρασκήνιο. Ο ιστότοπος παρέχει έναν σύνδεσμο κοντά στην αρχή της σελίδας που αναθέτει ένα διαφορετικό φύλλο στυλ στη σελίδα. Το νέο φύλλο στυλ δεν έχει κανένα ορισμένο χρώμα για το κείμενο ή το παρασκήνιο.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Αλλάξτε τα χρώματα κειμένου, συνδέσμου και παρασκηνίου στις ρυθμίσεις του προγράμματος περιήγησης, ώστε να είναι διαφορετικά από το προεπιλεγμένο χρώμα και από εκείνα που ορίζονται στο δευτερεύον περιεχόμενο.
Σημείωση: Μην επιλέγετε το πρόγραμμα περιήγησης να αγνοεί τα χρώματα που ορίζονται στη σελίδα.
Ελέγξτε ότι το κύριο περιεχόμενο χρησιμοποιεί τα νέα χρώματα κειμένου, συνδέσμου και παρασκηνίου.
Ελέγξτε ότι τα χρώματα κειμένου, συνδέσμων και υποβάθρων στο δευτερεύον περιεχόμενο δεν έχουν αλλάξει.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Σελίδες που χρησιμοποιούν CSS.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να καταστήσει εφικτό για χρήστες που χρειάζονται αύξηση του μεγέθους κειμένου προκειμένου να το διαβάσουν, να μην χρειάζεται να πραγματοποιήσουν οριζόντια κύλιση προκειμένου να διαβάσουν μια γραμμή κειμένου. Για χρήση αυτής της τεχνικής ένας συγγραφέας ορίζει το πλάτος των κοντέινερ κειμένου μέσω ποσοστιαίων τιμών.
Μία εφημερίδα έχει περιεχόμενο στο μέσο του παραθύρου. Το πλάτος του κοντέινερ για το περιεχόμενο ορίζεται σε ποσοστά σελίδας, ώστε όταν ένα άτομο με χαμηλή όραση αυξήσει το μέγεθος γραμματοσειράς, το κείμενο να ρέει εκ νέου εντός του παραθύρου του προγράμματος περιήγησης και να μην υπάρχει ανάγκη οριζόντιας κύλισης.
Ελέγξτε ότι όλα τα πλάτη κοντέινερ ορίζονται ως ποσοστιαίες τιμές.
Αυξήστε το μέγεθος κειμένου σε 200%.
Ελέγξτε για να βεβαιωθείτε ότι δεν απαιτείται οριζόντια κύλιση για την ανάγνωση οποιασδήποτε γραμμής κειμένου.
Ελέγξτε ότι όλο το κείμενο παραμένει ορατό στη σελίδα.
Οι έλεγχοι #1, #3 και #4 είναι αληθείς.
Σελίδες που χρησιμοποιούν CSS.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να ορίσει περιγράμματα και διάταξη μέσω CSS και να αφήσει τα χρώματα κειμένου και παρασκηνίου να αποδοθούν σύμφωνα με τις ρυθμίσεις του χρήστη στο πρόγραμμα περιήγησης ή/και το λειτουργικό σύστημα. Αυτό επιτρέπει στους χρήστες να εμφανίζουν κείμενο σε χρώματα που απαιτούν, ενώ παράλληλα διατηρούν άλλες όψεις της διάταξης και σχεδίασης σελίδας όπως στήλες κειμένου, περιγράμματα γύρω από τμήματα ή κάθετες γραμμές μεταξύ ενός μενού και της περιοχής κύριου περιεχομένου. Θα αποτρέπει επίσης κάποια θέματα εμφάνισης σε ορισμένα προγράμματα περιήγησης όταν σελίδες περιέχουν αναδυόμενα πλαίσια Javascript ή αναπτυσσόμενα μενού και παρουσιάζουν παράκαμψη των χρωμάτων.
Οι ενδείκτες περιγραμμάτων και διάταξης βοηθούν πολλά άτομα με νοητικές αναπηρίες, όπως και η ευελιξία σχετικά με τα χρώματα κειμένου και παρασκηνίου. Ορισμένες φορές αυτά τα δύο χρειάζεται να συγκρούονται όταν ο χρήστης πρέπει να παρακάμψει την επιλογή χρωμάτων του συγγραφέα για το κείμενο και το παρασκήνιο στο πρόγραμμα περιήγησης και το πρόγραμμα αυτό καταργεί επίσης τα περιγράμματα και τη στοχευόμενη διάταξη. Αυτό μπορεί να σημαίνει ότι η σελίδα εμφανίζεται σε μία μονή στήλη με ένα μπλοκ περιεχομένου κάτω από το άλλο, το οποίο μπορεί να οδηγήσει σε άσκοπο λευκό διάστημα και μεγάλες γραμμές κειμένου. Μπορεί επίσης να σημαίνει ότι τα αναδυόμενα πλαίσια αποκτούν ένα διάφανο παρασκήνιο, με τοποθέτηση από πάνω του κειμένου του πλαισίου στο κείμενο της σελίδας και τα αναπτυσσόμενα μενού είτε γίνονται διάφανα ή αποκτούν ένα σκοτεινό-γκρίζο παρασκήνιο. Όταν ένας συγγραφέας Ιστού δεν ορίζει τα χρώματα οποιουδήποτε κειμένου ή παρασκηνίου, ενώ ορίζει παράλληλα τα χρώματα περιγράμματος και διάταξης, είναι δυνατό στα πιο δημοφιλή προγράμματα περιήγησης, να αλλάξετε τα χρώματα κειμένου και παρασκηνίου χωρίς να επηρεάσετε τις άλλες δηλώσεις CSS (που ορίζονται από τον συγγραφέα).
Μια Ιστοσελίδα σχεδιάζεται χρησιμοποιώντας HTML. Το CSS χρησιμοποιείται για να ορίσει χρώματα περιγράμματος γύρω από διακριτές περιοχές της σελίδας και για να ορίσει στυλ στο περιεχόμενο ώστε το μενού να επιπλέει στο αριστερό μέρος της περιοχής κύριου περιεχομένου. Δεν ορίζεται ούτε το χρώμα κειμένου, ούτε του παρασκηνίου. Ο χρήστης ορίζει τα δικά του χρώματα στο πρόγραμμα περιήγησης. Μπορεί να προβάλλει τη σελίδα με χρώματα και αντιθέσεις που είναι βολικά για αυτόν, χωρίς να αποδιοργανώνουν τη διάταξη.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανοίξτε την Ιστοσελίδα σε ένα πρόγραμμα περιήγησης που επιτρέπει στους χρήστες να αλλάξουν τα χρώματα του περιεχομένου HTML.
Αλλάξτε τα χρώματα κειμένου, συνδέσμου και παρασκηνίου στις ρυθμίσεις του προγράμματος περιήγησης, ώστε να είναι διαφορετικά από εκείνα που ορίζονται τώρα στο πρόγραμμα περιήγησης.
Σημείωση: Βεβαιωθείτε ότι δεν επιλέγετε το πρόγραμμα περιήγησης να αγνοεί τα χρώματα που ορίζονται στη σελίδα.
Επιστρέψτε στη σελίδα και ελέγξτε ότι εμφανίζει τη σελίδα στα νέα χρώματα κειμένου, συνδέσμου και παρασκηνίου.
Ελέγξτε ότι οποιαδήποτε περιγράμματα προβάλλονται ακόμα και ότι διατηρείται η διάταξη.
Οι έλεγχοι #3 και #4 είναι αληθείς
Σελίδες που χρησιμοποιούν CSS.
Αυτή η τεχνική σχετίζεται με:
Ενδέχεται να υπάρχουν περιπτώσεις όπου ένας συγγραφέας χρειάζεται να χρησιμοποιήσει μία διάταξη που απαιτεί οριζόντια κύλιση. Στην περίπτωση αυτή, αρκεί η παροχή επιλογών εντός του περιεχομένου για τη μετάβαση σε μια διάταξη που δεν απαιτεί από τον χρήστη να πραγματοποιήσει οριζόντια κύλιση για την ανάγνωση μιας γραμμής κειμένου Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας τυπική τεχνολογία εναλλαγής στυλ.
Θα πρέπει να σημειωθεί ότι αρκεί επίσης να δημιουργήσετε διάταξη του περιεχομένου με τρόπο που η οριζόντια κύλιση απαιτείται για πρόσβαση στο περιεχόμενο, αλλά δεν είναι απαραίτητη για την ανάγνωση μίας γραμμής κειμένου.
Για παράδειγμα, ένα υπολογιστικό φύλλο που απαιτεί οριζόντια κύλιση είναι αποδεκτό εάν δεν είναι απαραίτητη οριζόντια κύλιση για κάθε στήλη ξεχωριστά. (π.χ., η κύλιση είναι μόνο απαραίτητη για να δείτε άλλες στήλες, αλλά όχι για τα αριστερά ή δεξιά άκρα κάθε μεμονωμένης στήλης. Είναι δύσκολο να διατυπωθεί ξεκάθαρα αυτό.)
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτικη έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήσης μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) και Κατανόησης συμμορφούμενων Εναλλακτικών Εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Μια μεσιτική εταιρεία έχει μία ετήσια ηλεκτρονική αναφορά που διαθέτει μία πανομοιότυπη διάταξη με εκείνη της έντυπης έκδοσης και έτσι, απαιτεί οριζόντια κύλιση για την ανάγνωση μίας γραμμής κειμένου. Ένα στοιχείο ελέγχου που εναλλάσσει το φύλλο στυλ βρίσκεται στη σελίδα και παρέχει μία διάταξη που δεν απαιτεί οριζόντια κύλιση.
Ένα οικονομικό υπολογιστικό φύλλο είναι ηλεκτρονικό. Περιλαμβάνει κείμενο που επεξηγεί αλλαγές στην αγορά στέγασης τον Ιανουάριο. Εκτός οθόνης στα δεξιά, υπάρχει μία στήλη με μια εξήγηση των αλλαγών στην αγορά τον Σεπτέμβριο. Ο χρήστης μπορεί να πραγματοποιεί οριζόντια κύλιση στην περιοχή Σεπτεμβρίου και να διαβάζει κάθε γραμμή κειμένου χωρίς επιπλέον κύλιση όταν το μέγεθος παραθύρου μεγιστοποιείται.
Ανοίξτε το περιεχόμενο που απαιτεί οριζόντια κύλιση σε ένα παράθυρο πλήρους οθόνης.
Ελέγξτε ότι υπάρχει η επιλογή εντός του περιεχομένου για τη μετάβαση σε μια διάταξη που δεν απαιτεί από τον χρήστη να πραγματοποιήσει οριζόντια κύλιση για την ανάγνωση μιας γραμμής κειμένου
Ενεργοποιήστε την επιλογή.
Ελέγξτε για να βεβαιωθείτε ότι δεν απαιτείται οριζόντια κύλιση για την ανάγνωση οποιασδήποτε γραμμής κειμένου.
Οι έλεγχοι #2 και #4 είναι αληθείς.
Χρήση CSS με HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι η σειρά του περιεχομένου στον πηγαίο κώδικα είναι όμοια με την οπτική παρουσίαση του περιεχομένου. Η σειρά του περιεχομένου στον πηγαίο κώδικα μπορεί να αλλάξει από τον συγγραφέα σε πολλές οπτικές παρουσιάσεις με CSS. Κάθε σειρά μπορεί να έχει νόημα από μόνη της, αλλά ενδέχεται να προκαλέσει σύγχυση σε χρήστες υποστηρικτικής τεχνολογίας. Αυτό μπορεί να συμβεί λόγω της απενεργοποίησης από τον χρήστη της παρουσίασης που ορίζει ο συγγραφέας, μέσω πρόσβασης στο περιεχόμενο απευθείας από τον πηγαίο κώδικα (όπως με ένα πρόγραμμα ανάγνωσης οθόνης) ή μέσω αλληλεπίδρασης με το περιεχόμενο μέσω πληκτρολογίου. Εάν ένας χρήστης με τύφλωση, που διαβάζει τη σελίδα με πρόγραμμα ανάγνωσης οθόνης που ακολουθεί την πηγαία σειρά, εργάζεται με έναν χρήστη με όραση που διαβάζει τη σελίδα σε οπτική σειρά, ενδέχεται να υπάρξει σύγχυση και για τους δύο καθώς συναντούν πληροφορίες σε διαφορετικές σειρές. Ένας χρήστης με χαμηλή όραση που χρησιμοποιεί έναν μεγεθυντή οθόνης σε συνδυασμό με ένα πρόγραμμα ανάγνωσης οθόνης, ενδέχεται να αντιμετωπίσει πρόβλημα όταν η σειρά ανάγνωσης δείχνει ότι πραγματοποιεί παρακάμψεις στην οθόνη. Ένας χρήστης πληκτρολογίου ενδέχεται να έχει πρόβλημα προβλέποντας το σημείο μετάβασης της σήμανσης όταν η πηγαία σειρά δεν συμφωνεί με την οπτική σειρά.
Ενδέχεται επίσης να υπάρχουν περιπτώσεις όπου η σειρά οπτικής παρουσίασης να είναι απαραίτητη για τη συνολική κατανόηση της σελίδας και εάν η πηγαία σειρά παρουσιάζεται διαφορετικά, μπορεί να είναι πολύ πιο δύσκολη η κατανόηση.
Όταν η πηγαία σειρά συμφωνεί με την οπτική σειρά, όλοι θα διαβάζουν το περιεχόμενο και θα αλληλεπιδρούν με αυτό με την ίδια (σωστή) σειρά.
Σημείωση: Η παράμετρος tabindex
στην HTML έχει δύο λειτουργίες. Μία είναι να ορίσει ένα στοιχείο ως επισημασμένο και η άλλη να το αντιστοιχίσει σε μια θέση στη σειρά επισήμανσης. Μία παράμετρος tabindex
0 καθιστά το στοιχείο ως επισημασμένο, αλλά το προσθέτει στη σειρά επισήμανσης, στην πηγαία σειρά στοιχείων. Η σειρά επισήμανσης θα ακολουθεί θετικές τιμές στην αύξουσα σειρά tabindex. Η ρύθμιση τιμών tabindex
που έχουν ως αποτέλεσμα μία σειρά διαφορετική της σειράς των στοιχείων στο Μοντέλο Αντικειμένου Εγγράφου (DOM), μπορεί να σημαίνει ότι η σειρά είναι λανθασμένη για χρήστες υποστηρικτικών τεχνολογιών. Αυτό οφείλεται κυρίως στο γεγονός ότι η ιδιότητα tabindex ορίζεται σε HTML ή XHTML και όχι σε CSS. Αυτό μπορεί να αλλάξει σε μελλοντικές προδιαγραφές. Ενδέχεται επίσης να διαφέρει από τη σειρά οπτικής παρουσίασης.
Μία ηλεκτρονική εφημερίδα έχει θέσει οπτικά μία γραμμή πλοήγησης στην πάνω αριστερή γωνία της σελίδας, ακριβώς κάτω από το αρχικό της λογότυπο. Στον πηγαίο κώδικα, τα στοιχεία πλοήγησης εμφανίζονται μετά τα στοιχεία που κωδικοποιούν το λογότυπο.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Microsoft Internet Explorer Developer Toolbar. Επιτρέπει τον έλεγχο DOM που δημιουργείται από αρχείο εντολών στο Microsoft Internet Explorer.
Firebug. Επιτρέπει τον έλεγχο DOM, που παράγεται από αρχείο εντολών, στο Firefox.
Εξετάστε οπτικά τη σειρά του περιεχομένου στην Ιστοσελίδα καθώς παρουσιάζεται στον τελικό χρήστη.
Εξετάστε τα στοιχεία στο DOM χρησιμοποιώντας ένα εργαλείο που σας επιτρέπει να δείτε το DOM.
Διασφαλίστε ότι η σειρά του περιεχομένου στα τμήματα πηγαίου κώδικα συμφωνεί με την οπτική παρουσίαση του περιεχομένου στην Ιστοσελίδα. (π.χ., για τη σελίδα της αγγλικής γλώσσας η σειρά είναι από πάνω προς τα κάτω και από αριστερά προς τα δεξιά.) "
Το βήμα #3 είναι αληθές.
CSS
Αυτή η τεχνική σχετίζεται με:
Στο Internet Explorer 6, η κατάσταση λειτουργίας υψηλής αντίθεσης των Windows (Windows High Contrast Mode) θα αλλάξει το μέγεθος γραμματοσειρών βάσει ποσοστού σε ένθετους πίνακες, ώστε να είναι ιδιαίτερα μεγάλες. Στο Firefox και νεότερες εκδόσεις του IE, μην αλλάζετε μέγεθος γραμματοσειρών στην κατάσταση υψηλής αντίθεσης και δεν θα αντιμετωπίσετε αυτό το θέμα.
Σκοπός αυτής της τεχνικής είναι ο προσδιορισμός του πλάτους ή/και ύψους των κοντέινερ, που περιέχουν κείμενο ή που θα δεχτούν εισαγωγή κειμένου, σε μονάδες em
. Αυτό θα επιτρέψει στους πράκτορες χρήστη που υποστηρίζουν την αλλαγή μεγέθους κειμένου, να αλλάξουν μέγεθος στα κοντέινερ κειμένου σύμφωνα με αλλαγές στις ρυθμίσεις μεγέθους κειμένου.
Το πλάτος ή/και ύψος των κοντέινερ κειμένου που έχει προσδιοριστεί μέσω άλλων μονάδων, αντιμετωπίζει κίνδυνο περικοπής κειμένου καθώς υπερβαίνει τα όρια του κοντέινερ όταν το μέγεθος κειμένου έχει αυξηθεί.
Τα κοντέινερ γενικά ελέγχουν τη θέση κειμένου εντός της Ιστοσελίδας και μπορούν να περιλαμβάνουν στοιχεία διάταξης, δομής και στοιχεία ελέγχου φορμών.
Στο παράδειγμα αυτό, ένα στοιχείο div
με τιμή id
για το "nav_menu" χρησιμοποιείται για την τοποθέτηση του μενού πλοήγησης μαζί με την αριστερή πλευρά της περιοχής κύριου περιεχομένου της Ιστοσελίδας. Το μενού πλοήγησης συνίσταται από μια λίστα συνδέσμων κειμένου με την τιμή id
"nav_list". Το μέγεθος κειμένου των συνδέσμων πλοήγησης και το πλάτος του κοντέινερ ορίζονται σε μονάδες em
.
Παράδειγμα κώδικα:
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
Στο παράδειγμα αυτό, στοιχεία input
που περιέχουν κείμενο ή αποδέχονται εισαγωγή κειμένου από τον χρήστη, έχουν λάβει το όνομα κλάσης "form1". Οι κανόνες CSS χρησιμοποιούνται για τον ορισμό του μεγέθους γραμματοσειράς σε μονάδες percent
και του πλάτους για αυτά τα στοιχεία σε μονάδες em
. Αυτό θα επιτρέψει στο κείμενο εντός του στοιχείου ελέγχου φόρμας να αλλάξει μέγεθος σύμφωνα με τις αλλαγές στις ρυθμίσεις μεγέθους κειμένου, χωρίς περικοπή (καθώς το πλάτος του ίδιου του στοιχείου ελέγχου φόρμας θα αλλάξει επίσης μέγεθος, σύμφωνα με το μέγεθος γραμματοσειράς).
Παράδειγμα κώδικα:
input.form1 { font-size: 100%; width: 15em; }
Στο παράδειγμα αυτό, στοιχεία select
έχουν λάβει το όνομα κλάσης "pick." Οι κανόνες CSS χρησιμοποιούνται για τον ορισμό του μεγέθους γραμματοσειράς σε μονάδες percent
και του πλάτους σε μονάδες em
. Αυτό θα επιτρέψει στο κείμενο εντός του στοιχείου ελέγχου φόρμας να αλλάξει μέγεθος σύμφωνα με τις αλλαγές στις ρυθμίσεις μεγέθους κειμένου, χωρίς περικοπή.
Παράδειγμα κώδικα:
input.pick { font-size: 100%; width: 10em; }
Στο παράδειγμα αυτό, στοιχεία input
που ορίζουν πλαίσια ελέγχου ή ραδιόπληκτρα, έχουν λάβει το όνομα κλάσης "choose." Οι κανόνες CSS χρησιμοποιούνται για τον ορισμό του πλάτους και ύψους για αυτά τα στοιχεία σε μονάδες em. Αυτό θα επιτρέψει στο στοιχείο ελέγχου φόρμας να αλλάξει μέγεθος σύμφωνα με τις αλλαγές στις ρυθμίσεις του μεγέθους κειμένου.
Παράδειγμα κώδικα:
input.choose { width: 1.2em; height: 1.2em; }
Προσδιορίστε κοντέινερ που περιέχουν κείμενο ή επιτρέπουν την εισαγωγή κειμένου.
Ελέγξτε ότι το πλάτος ή/και το ύψος του κοντέινερ ορίζεται σε μονάδες em
.
Ελέγξτε ότι το #2 είναι αληθές.
Το CSS χρησιμοποιείται με δημιουργία αρχείου εντολών στην πλευρά του πελάτη ή του διακομιστή.
Αυτή η τεχνική σχετίζεται με:
Όταν κάποια πτυχή της προεπιλεγμένης παρουσίασης μιας Ιστοσελίδας δεν ικανοποιεί ένα κριτήριο επιτυχίας, είναι πιθανό να ικανοποιεί αυτήν την απαίτηση χρησιμοποιώντας την έκφραση "εναλλακτική έκδοση" στις απαιτήσεις συμμόρφωσης (Απαίτηση συμμόρφωσης 1). Για ορισμένες απαιτήσεις, η κλήση μιας λειτουργίας αλλαγής στυλ μέσω ενός συνδέσμου ή στοιχείου ελέγχου στη σελίδα που μπορεί να ρυθμίσει την παρουσίαση ώστε όλες οι όψεις της σελίδας να συμμορφώνονται στο επίπεδο που δηλώνεται, επιτρέπει στους συγγραφείς να αποφεύγουν την ανάγκη παροχής πολλαπλών εκδόσεων των ίδιων πληροφοριών.
Σκοπός αυτής της τεχνικής είναι η επίδειξη του πώς μπορεί να χρησιμοποιηθεί το CSS σε συνδυασμό με τη δημιουργία αρχείων εντολών, για την παροχή συμμορφούμενων εναλλακτικών εκδόσεων μιας Ιστοσελίδας. Σε αυτήν την τεχνική, ένας συγγραφέας παρέχει εναλλακτικές εκδόσεις του περιεχομένου μέσω στοιχείων ελέγχου που ρυθμίζουν το CSS που χρησιμοποιείται για τον έλεγχο της οπτικής παρουσίασης του περιεχομένου. Στοιχεία ελέγχου που παρέχονται εντός της Ιστοσελίδας, επιτρέπουν στους χρήστες να επιλέγουν ή τροποποιούν την παρουσίαση με τρόπο που ικανοποιεί το κριτήριο επιτυχίας στο δηλωμένο επίπεδο. Αυτό καθιστά εφικτή την επιλογή διαφορετικών οπτικών παρουσιάσεων από χρήστες σε περιπτώσεις όπως οι ακόλουθες:
ο χρήστης ενδέχεται να μην είναι σε θέση να προσαρμόσει τις ρυθμίσεις του προγράμματος περιήγησης ή του λειτουργικού συστήματος, λόγω μη εξοικείωσης ή περιορισμένων δικαιωμάτων
το κείμενο παρέχεται με τρόπο που δεν ανταποκρίνεται στις ρυθμίσεις του προγράμματος περιήγησης ή του λειτουργικού συστήματος (όπως κείμενο εντός μιας εικόνας)
η προεπιλεγμένη παρουσίαση του περιεχομένου δεν περιλαμβάνει επαρκή αντίθεση για ορισμένους χρήστες
Προκειμένου να χρησιμοποιηθεί αυτή η τεχνική επιτυχώς, τρία πράγματα πρέπει να ισχύουν.
Πρέπει ο ίδιος σύνδεσμος ή το στοιχείο ελέγχου της αρχικής σελίδας να ικανοποιεί το κριτήριο επιτυχίας μέσω της εναλλακτικής παρουσίασης. Για παράδειγμα, εάν χρησιμοποιείται μια λειτουργία αλλαγής στυλ για την παροχή αυξημένου μεγέθους γραμματοσειρών και το στοιχείο ελέγχου παρουσιάζεται μέσω μικρής γραμματοσειράς, οι χρήστες ενδέχεται να μην είναι σε θέση να ενεργοποιήσουν το στοιχείο ελέγχου και να εμφανίσουν την εναλλακτική παρουσίαση.
Η νέα σελίδα πρέπει να περιέχει όλες τις ίδιες πληροφορίες και λειτουργίες με την αρχική σελίδα.
Η νέα σελίδα πρέπει να συμμορφώνεται με όλα τα κριτήρια επιτυχίας για το επιθυμητό επίπεδο συμμόρφωσης. Για παράδειγμα, ένα εναλλακτικό φύλλο στυλ δεν μπορεί να χρησιμοποιηθεί για να ικανοποιεί μία απαίτηση εάν προκαλεί τη μη συμμόρφωση για μία διαφορετική απαίτηση.
Κατά τη χρήση μιας λειτουργίας αλλαγής στυλ, είναι σημαντικό να εξετάσετε τις ακόλουθες προκλήσεις και περιορισμούς:
Ο αριθμός και τύπος των αλλαγών που μπορεί να πραγματοποιήσει ένας χρήστης είναι περιορισμένος με βάση το αντικείμενο των στοιχείων ελέγχου που παρέχονται από τον συγγραφέα στην Ιστοσελίδα. Μια ποικιλία παρουσίασης και προτιμήσεων θα πρέπει να παρέχεται προκειμένου να αντιμετωπιστούν οι ανάγκες όσο το δυνατόν μεγαλύτερου κοινού. Ωστόσο, είναι επίσης σημαντικό για συγγραφείς, να εξεταστούν αλληλεπιδράσεις μεταξύ προτιμήσεων και της πολυπλοκότητας για χρήστες που ενδέχεται να προκύψει από την παροχή μεγάλου αριθμού επιλογών στους χρήστες.
Η διατήρηση της προτίμησης του χρήστη από μία σελίδα στην επόμενη, μπορεί να επιτευχθεί αποθηκεύοντας ένα cookie στον υπολογιστή του χρήστη (δείτε την ενότητα "Πόροι" για περισσότερες πληροφορίες) ή συμπεριλαμβάνοντας τις προτιμήσεις του σε ένα προφίλ που αποθηκεύεται στον διακομιστή Ιστού, μέσω διαβίβασης μιας παραμέτρου query string ή με άλλα μέσα.
Η τεχνική μέθοδος που χρησιμοποιείται για την υλοποίηση μιας λειτουργίας αλλαγής στυλ, ενδέχεται να αφορά την υποστήριξη και διαθεσιμότητα μίας ή περισσότερων τεχνολογιών στον υπολογιστή του χρήστη (για παράδειγμα, πολλές λύσεις στην πλευρά του πελάτη απαιτούν υποστήριξη τόσο για JavaScript, όσο και για CSS). Εκτός εάν αυτές οι τεχνολογίες αποτελούν στήριξη για συμμόρφωση, οι συγγραφείς θα πρέπει να εξετάσουν τη χρήση τεχνολογιών στην πλευρά του διακομιστή όπου δεν μπορεί να διασφαλιστεί η υποστήριξη και διαθεσιμότητα τεχνολογιών στην πλευρά του πελάτη. Εναλλακτικά, η χρήση τεχνικών που διασφαλίζουν ότι το περιεχόμενο θα μετασχηματιστεί ομαλά όταν μία ή περισσότερες τεχνολογίες χρησιμοποιούνται δεν είναι διαθέσιμες, μπορεί να αποτελέσει έναν αποτελεσματικό τρόπο βελτίωσης σελίδων όταν η υποστήριξη αυτών των τεχνολογιών δεν αποτελεί βάση για συμμόρφωση.
Αυτό το παράδειγμα είναι μίας σελίδας που παρέχει συνδέσμους αλλαγής χρωμάτων κειμένου και παρασκηνίου για τη σελίδα, μέσω JavaScript. Οι σύνδεσμοι θα πρέπει να εισάγονται μόνο εάν υποστηρίζεται JavaScript και διατίθεται στο σύστημα του χρήστη. Διαφορετικά, η επιλογή των συνδέσμων δεν θα οδηγήσει στις επιθυμητές αλλαγές. Αυτό μπορεί να επιτευχθεί με τη χρήση αρχείου εντολών για την εισαγωγή των ίδιων των συνδέσμων (που σημαίνει ότι οι σύνδεσμοι θα είναι παρόντες μόνον όταν υποστηρίζεται και διατίθεται δημιουργία αρχείων εντολών).
Ο ακόλουθος κώδικας εμφανίζει τους συνδέσμους αλλαγής χρώματος που εξαρτώνται από JavaScript και ένα snippet άλλου περιεχομένου στην Ιστοσελίδα, τους συσχετισμένους κανόνες φύλλου στυλ και τη JavaScript που αλλάζει το φύλλο στυλ που χρησιμοποιείται όταν επιλέγεται ένας σύνδεσμος αλλαγής χρώματος.
Το παράδειγμα ισχύει μόνο για την τρέχουσα προβολή σελίδας. Σε ένα περιβάλλον παραγωγής, συνίσταται η αποθήκευση αυτής της προτίμησης σε ένα cookie ή προφίλ χρήστη στην πλευρά του διακομιστή, ώστε οι χρήστες να χρειάζεται να κάνουν την επιλογή μόλις μία φορά ανά τόπο.
Τα συστατικά στοιχεία XHTML:
Παράδειγμα κώδικα:
In <head> section:
<link href="main.css" rel="stylesheet" type="text/css" />
<link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
In <body> section:
<div id="colorswitch">
<p>Change colors:</p>
<ul class="inline">
<li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;"
id="altColors1">dark blue on white</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;"
id="altColors2">yellow on black</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;"
id="altColors3">black on pale yellow</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;"
id="altColors4">black on white</a></li>
<li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;"
id="default">Reset to default</a></li>
</ul>
</div>
<div id="mainbody">
<h1>Conference report</h1>
<p>Last week's conference presented an impressive line-up of speakers...</p>
</div>
Τα συστατικά στοιχεία CSS:
Παράδειγμα κώδικα:
In main.css:
body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
#mainbody {
padding: 1em;
}
#colorswitch {
float: right;
width: 12em;
border: 1px #000066 solid;
padding:0 1em 1em 1em; margin:0;
}
#colorswitch p {
padding-top:.5em;
font-weight:bold;
}
In defaultColors.css:
body, p {
color:#000000;
background-color:#FFFFFF;
}
h1, h2, h3 {
color:#990000;
background-color:#FFFFFF;
}
In altColors1.css:
body, h1, h2, h3, p, a {
color:#000066;
background-color:#FFFFFF;
}
In altColors2.css:
body, h1, h2, h3, p, a {
color:#FFFF33;
background-color:#000000;
}
In altColors3.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFF99;
}
In altColors4.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFFFF;
}
Τα συστατικά στοιχεία JavaScript:
Παράδειγμα κώδικα:
function changeColors (newCSS)
{
document.getElementById('currentCSS').href = newCSS;
}
Είναι διαθέσιμο ένα λειτουργικό παράδειγμα αυτού του κώδικα, "Χρήση στοιχείου ελέγχου JavaScript για την εφαρμογή διαφορετικού εξωτερικού αρχείου CSS" (Using a JavaScript control to apply a different external CSS file).
Αυτό το παράδειγμα θα πρέπει να χρησιμοποιηθεί για απλές αλλαγές σε ένα τμήμα περιεχομένου και ενδέχεται να είναι λιγότερο πρακτικό για σύνθετους τόπους ή σελίδες. Το παράδειγμα κάνει χρήση JavaScript για την αλλαγή του ονόματος κλάσης ώστε να παρουσιάσει οπτικά την επιλογή χρώματος του χρήστη (από ένα ορισμένο σύνολο επιλογών), ως παρασκήνιο επισήμανσης συγκεκριμένου περιεχομένου.
Σημείωση: Ο ακόλουθος κώδικας περιλαμβάνει κλήσεις JavaScript εντός του κώδικα XHTML για να βοηθήσει στην κατανόηση της τεχνικής. Ωστόσο, ο συγγραφέας ενθαρρύνεται να χρησιμοποιήσει τρέχουσα βέλτιστη πρακτική συμπερίληψης JavaScript (δείτε την ενότητα "Πόροι" για περισσότερες πληροφορίες σχετικά με διακριτική JavaScript και προοδευτική βελτίωση).
Τα συστατικά στοιχεία XHTML:
Παράδειγμα κώδικα:
<h1>Product comparison</h1>
<p>The products you selected to compare are listed below.
Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">Change hightlight color: </p>
<ul class="inline">
<li><a href="#" onClick="changeColor('hghltLightYellow');return false;"
class="hghltLightYellow">light yellow</a></li>
<li><a href="#" onClick="changeColor('hghltBrightYellow');return false;"
class="hghltBrightYellow">bright yellow</a></li>
<li><a href="#" onClick="changeColor('hghltLightBlue');return false;"
class="hghltLightBlue">light blue</a></li>
<li><a href="#" onClick="changeColor('hghltBrightBlue');return false;"
class="hghltBrightBlue">bright blue</a></li>
<li><a href="#" onClick="changeColor('hghltLightRed');return false;"
class="hghltLightRed">light red</a></li>
<li><a href="#" onClick="changeColor('hghltDrkRed');return false;"
class="hghltDrkRed">dark red</a></li>
</ul>
<table width="400" border="1">
<tr>
<td></td>
<th scope="col">Product 1</th>
<th scope="col">Product 2</th>
</tr>
<tr>
<th scope="row">Aspect 1</th>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Aspect 2</th>
<td class="hghltLightYellow">Yes</td>
<td class="hghltLightYellow">No</td>
</tr>
<tr>
<th scope="row">Aspect 3</th>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
Τα συστατικά στοιχεία CSS:
Παράδειγμα κώδικα:
body { color:#000000; background-color:#FFFFFF; }
.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }
.inlinePara {display:inline; }
.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }
Τα συστατικά στοιχεία JavaScript:
Παράδειγμα κώδικα:
function changeColor(hghltColor)
{
// collects table data cells into an array
var els = document.getElementsByTagName('td');
// for each item in the array, look for a class name starting with "hghlt"
// if found, change the class value to the current selection
// note that this script assumes the 'td' class attribute is only used for highlighting
for (var i=0; i<els.length; i++)
{
if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
}
}
Είναι διαθέσιμο ένα λειτουργικό παράδειγμα αυτού του κώδικα, "Χρήση JavaScript στην πλευρά του πελάτη για την αλλαγή μιας ιδιότητας CSS" (Using a client-side JavaScript to change a CSS property).
Αυτό το απλό παράδειγμα χρησιμοποιεί PHP $_GET για την αντιστοίχιση ενός εκ των δύο διαθέσιμων εξωτερικών φύλλων στυλ. Όμοια λειτουργικότητα μπορεί να επιτευχθεί μέσω της χρήσης μιας ποικιλίας χαρακτηριστικών PHP. Το παράδειγμα ισχύει μόνο για την τρέχουσα προβολή σελίδας. Σε ένα περιβάλλον παραγωγής, συνιστάται η αποθήκευση αυτής της προτίμησης σε ένα cookie ή προφίλ χρήστη στην πλευρά του διακομιστή, ώστε οι χρήστες να χρειάζεται να κάνουν την επιλογή μόλις μία φορά ανά τόπο.
Ο ακόλουθος κώδικας είναι PHP, αλλά όμοια προσέγγιση θα λειτουργήσει με μια ποικιλία τεχνολογιών στην πλευρά του διακομιστή.
Τα συστατικά στοιχεία PHP και XHMTL:
Παράδειγμα κώδικα:
At the beginning of the PHP page:
<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
{
$thestyle = "style2";
}
else
{
$thestyle = "style1";
}
?>
In the <head> section:
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
In <body> section:
<?php
if ($thestyle == "style1") {
echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
}
else {
echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
}
?>
<div id="mainbody">
<h1>Conference report</h1>
<p>Last week's conference presented an impressive line-up of speakers...</p>
</div>
Τα συστατικά στοιχεία CSS:
Παράδειγμα κώδικα:
In style1.css:
body, p { color:#000000; background-color:#FFFFFF; }
h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
In style2.css:
body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
Είναι διαθέσιμο ένα λειτουργικό παράδειγμα αυτού του κώδικα, "Χρήση PHP $_GET για την εφαρμογή διαφορετικού εξωτερικού αρχείου CSS" (Using PHP $_GET to apply a different external CSS file).
Το παρακάτω παράδειγμα χρησιμοποιεί δύο αρχεία
ένα αρχείο Java Server Page (JSP) με τη φόρμα και τον κωδικό επεξεργασίας φόρμας και
ένα αρχείο συμπερίληψης με λειτουργίες που χρησιμοποιούνται από την προηγούμενη σελίδα και σε άλλες σελίδες που χρησιμοποιούν όμοιο στυλ.
Ο κώδικας στην πλευρά του διακομιστή δίνει στην έξοδο ένα κανονικό στοιχείο συνδέσμου για το φύλλο στυλ που επιλέγει ο χρήστης και στοιχεία συνδέσμου με "εναλλακτικό φύλλο στυλ" για τα άλλα στυλ. Ο κώδικας μπορεί επομένως να χρησιμοποιηθεί ως εφεδρικός για τον κώδικα στην πλευρά του πελάτη στο δεύτερο παράδειγμα.
Η σελίδα JSP με τη μορφή:
Παράδειγμα κώδικα:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
%><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Change Style</title>
<%
String fStyle = "";
String styleName = "style";
String defaultStyle = "default";
Cookie[] cookies = request.getCookies();
// get style from post request parameters
if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
fStyle = request.getParameter("styleSelect");
// code that validates user input (security) not shown
if (fStyle.equals("nostyle")) { // user prefers no author style
} else { // user requests author style
out.println(createStyleLinks(fStyle).toString());
}
storeStylePreferenceCookie(request, response, fStyle);
} else if (request.getMethod().equals("GET")) {
// GET request; get style from cookie; else default style links
// get style from cookie
if (cookies != null) {
// get style from cookies
fStyle = getStyleFromCookies(cookies);
if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
out.println(createStyleLinks(fStyle).toString());
} else { // no cookie for style; process request for style preference
// default style links
out.println(createStyleLinks(defaultStyle).toString());
}
} else { // GET request without cookies: default styles
out.println(createStyleLinks(defaultStyle).toString());
}//end else cookies
}
%>
</head>
<body id="home">
<form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
<p><label for="styleSelect">Select style: </label>
<select id="styleSelect" name="styleSelect">
<option value="default">Default (shades of green)</option>
<option value="wonb">White on black</option>
<option value="bonw">Black on white</option>
</select>
<input type="submit" value="Change Style" />
</p>
</form>
</body>
</html>
Το αρχείο styleswitcher.jsp που συμπεριλαμβάνεται στο προηγούμενο αρχείο:
Παράδειγμα κώδικα:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
/**
* Get the links (link elements) to the CSS files based on cookies, ...
*/
private String getStyleLinks(HttpServletRequest request) {
String styleLinks = "";
Cookie[] cookies = request.getCookies();
String defaultStyle = "default";
String tempStyle = "";
// GET request; get style from cookie; else default style links
// get style from cookie
if (cookies != null) {
// get style from cookies
tempStyle = getStyleFromCookies(cookies);
if ( tempStyle.equals("NULL_STYLE") ) {
// no cookie for style; process request for style preference
// default style links
styleLinks = createStyleLinks(defaultStyle).toString();
} else { // user requests author style
styleLinks = createStyleLinks(tempStyle).toString();
}
} else { // GET request without cookies: default styles
styleLinks = createStyleLinks(defaultStyle).toString();
}//end else cookies
return styleLinks;
}
/**
* Get style cookie from request
*/
private String getStyleFromCookies( Cookie[] cookies ) {
String fStyle = "NULL_STYLE";
for (int i = 0; i < cookies.length; i++) {
Cookie cookie = cookies[i];
String name = cookie.getName();
if ( name.equals("style") ) {
fStyle = cookie.getValue();
// code that validates cookie value (security) not shown
}
}
return fStyle;
}
/**
* Store the style preference in a persistent cookie
*/
private void storeStylePreferenceCookie(HttpServletRequest request,
HttpServletResponse response, String theStyle) {
final int ONE_YEAR = 60 * 60 * 24 * 365;
Cookie styleCookie = new Cookie("style", theStyle);
styleCookie.setMaxAge(ONE_YEAR);
response.addCookie(styleCookie);
}
/**
* Create the link elements for the stylesheets
*/
private StringBuffer createStyleLinks(String prefStyle) {
StringBuffer theStyleLinks = new StringBuffer();
//two-dimensional array with identifiers (adding '.css' gives the name of the CSS file)
// and strings for the title attribute of the link element
// the identifiers must correspond to the in the "value" attributes in the "option"
// elements in the style switcher form
String [] [] styles = {
{ "default", "Default style"},
{ "wonb", "White on black"},
{ "bonw", "Black on white"}
};
// loop over 2dim array: if styles[i][1] matches prefStyle,
// output as normal, else as alternate stylesheet
for (int i = 0; i < styles.length; i++) {
if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
.append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
} else { // output other stylesheets as alternate stylesheets
theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
.append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
.append("\" type=\"text/css\" />").append("\n");
}
} // end for loop
return theStyleLinks;
}
%>
Άλλες σελίδες JSP μπορούν να χρησιμοποιήσουν αυτόν τον κώδικα μέσω του παρακάτω κώδικα "include" και "scriptlet":
Παράδειγμα κώδικα:
<%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Η επιλογή χρήστη μπορεί να γίνει σταθερή στις σελίδες και από μία επίσκεψη σε άλλη, αποθηκεύοντας πληροφορίες στον υπολογιστή του χρήστη μέσω ενός cookie. Αυτή η λειτουργία απαιτεί υποστήριξη cookie, καθώς και να επιτρέπονται στον υπολογιστή του χρήστη. Τα cookies μπορούν να δημιουργηθούν, διαβαστούν, τροποποιηθούν και διαγραφούν χρησιμοποιώντας αρχεία εντολών στην πλευρά του πελάτη, όπως Javascript ή από αρχεία εντολών στην πλευρά του διακομιστή, όπως αρχεία εντολών CGI. Η εμπιστοσύνη σε τεχνολογίες στην πλευρά του πελάτη θα απαιτεί την υποστήριξη και διαθεσιμότητα της τεχνολογίας στον υπολογιστή του χρήστη, επιπλέον της υποστήριξης και αποδοχής cookie.
Πληροφορίες για τη δημιουργία και χρήση cookie μπορείτε να βρείτε στον Ιστό. Ακολουθούν ορισμένες προτάσεις:
Συνίσταται οι συγγραφείς να ελέγχουν την υποστήριξη cookie και να παρέχουν ένα πρόσθετο στοιχείο ελέγχου εάν δεν υποστηρίζονται cookies. Αυτό το πρόσθετο στοιχείο ελέγχου θα πρέπει να συμπεριλαμβάνει πληροφορίες για τη συνέπεια της επιλογής, όπως "Εφαρμογή επιλογής σε όλες τις σελίδες". Το μήνυμα ή η σελίδα που παρουσιάζεται στον χρήστη ως απάντηση στην επιλογή του πρόσθετου στοιχείου ελέγχου, παρέχει πληροφορίες σχετικά με την απαίτηση cookie και τις επιλογές του για επίλυση αυτής. Στην περίπτωση που ο χρήστης δεν δύναται να ενεργοποιήσει την υποστήριξη cookie, συμπεριλάβετε μία δήλωση σχετικά με τις συνέπειες για αυτόν εάν επιλέξει να συνεχίσει την περιήγηση στον τόπο και παρέχετε πληροφορίες για τον τρόπο ρύθμισης του πράκτορα χρήστη του ώστε να επιτύχει όμοια αποτελέσματα.
Για παράδειγμα, "Το πρόγραμμα περιήγησής σας δεν έχει διαμορφωθεί για αποδοχή cookie. Σε αυτόν τον τόπο, τα cookies απαιτούνται προκειμένου να εφαρμόσουν τις επιλεγμένες σας αλλαγές σε όλες τις σελίδες του τόπου. Για να βρείτε τον τρόπο ενεργοποίησης των cookies στον υπολογιστή σας, επισκεφθείτε τη διεύθυνση "Πώς να ενεργοποιήσετε cookies" (How to Enable Cookies). Να σημειωθεί ότι αυτό ενδέχεται να απαιτεί δικαιώματα διαχείρισης για τον υπολογιστή που χρησιμοποιείτε. Χωρίς υποστήριξη cookie, οι ρυθμίσεις σας δεν θα επιμείνουν στη συμπερίληψη άλλων σελίδων σε αυτόν τον τόπο. Καταβάλλουμε κάθε προσπάθεια για να παρέχουμε αυτή τη λειτουργία χωρίς να βασιζόμαστε στις ικανότητες του υπολογιστή σας. Εν τω μεταξύ, θα είστε σε θέση να επιλέγετε την αλλαγή για κάθε σελίδα που επισκέπτεστε."
Μια τρέχουσα βέλτιστη πρακτική υλοποίησης JavaScript σε μια σελίδα HTML ή XHTML είναι η χρήση της με τρόπο που διαχωρίζει τη συμπεριφορά περιεχομένου από τη δομή και την παρουσίασή της. Οι όροι "Προοδευτική βελτίωση" και "Διακριτική JavaScript" χρησιμοποιούνται συχνά για να περιγραφούν αρχεία εντολών που ενισχύουν ή βελτιώνουν τη λειτουργία μιας σελίδας, αλλά και μετασχηματίζονται ομαλά ώστε το περιεχόμενο να συνεχίζει να λειτουργεί ακόμα και όταν δεν υποστηρίζεται JavaScript.
Ακολουθούν ορισμένα προτεινόμενα σημεία εκκίνησης για περισσότερες πληροφορίες:
"Wikipedia: Διακριτική JavaScript" (Wikipedia: Unobtrusive JavaScript)
"About.com: Διακριτική JavaScript" (About.com: Unobtrusive JavaScript)
Ελέγξτε ότι η Ιστοσελίδα περιέχει στοιχεία ελέγχου που επιτρέπουν στους χρήστες να επιλέγουν εναλλακτικές παρουσιάσεις.
Ελέγξτε ότι το στοιχείο ελέγχου αλλάζει την παρουσίαση.
Επαληθεύστε ότι η σελίδα που προκύπτει είναι μια συμμορφούμενη εναλλακτική έκδοση της αρχικής σελίδας.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Κάθε τεχνολογία που υποστηρίζει CSS.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιδείξει πώς μπορεί να χρησιμοποιηθεί το CSS για αντικατάσταση δομημένου HTML κειμένου με εικόνες κειμένου, με τρόπο που καθιστά εφικτό για χρήστες να εμφανίσουν περιεχόμενο σύμφωνα με τις προτιμήσεις τους. Για χρήση αυτής της τεχνικής, ένας συγγραφέας αρχίζει με τη δημιουργία μιας σελίδας HTML που χρησιμοποιεί σημασιολογικά στοιχεία για να επισημάνει τη δομή της σελίδας. Έπειτα, ο συγγραφέας σχεδιάζει δύο ή περισσότερα φύλλα στυλ για αυτήν τη σελίδα. Ένα φύλλο στυλ παρουσιάζει το κείμενο HTML ως κείμενο και το δεύτερο χρησιμοποιεί χαρακτηριστικά CSS για την αντικατάσταση του κειμένου HTML με εικόνες κειμένου. Τέλος, μέσω της χρήσης δημιουργίας αρχείων εντολών στην πλευρά του διακομιστή ή στην πλευρά του πελάτη, ο συγγραφέας παρέχει ένα στοιχείο ελέγχου που επιτρέπει στον χρήστη να εναλλάσσεται μεταξύ των διαθέσιμων προβολών.
Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για να ικανοποιεί το κριτήριο επιτυχίας 1.4.5 ή 1.4.9, εάν μια παρουσίαση που δεν περιλαμβάνει εικόνες κειμένου είναι διαθέσιμη και εφόσον το στοιχείο ελέγχου διεπαφής χρήστη που παρέχεται για να επιτρέπει στους χρήστες να μεταβαίνουν σε μια εναλλακτική παρουσίαση, ικανοποιεί το σχετικό κριτήριο. Όπου είναι εφικτό, οι συγγραφείς θα πρέπει να παραδίδουν την παρουσίαση που δεν περιλαμβάνει εικόνες κειμένου ως προεπιλεγμένη παρουσίαση. Επιπλέον, το στοιχείο ελέγχου που χρησιμοποιείται θα πρέπει να βρίσκεται κοντά στην αρχή της σελίδας.
Διάφορες τεχνικές 'αντικατάστασης εικόνας' έχουν αναπτυχθεί για να αντιμετωπίσουν μια ποικιλία από θέματα υποστηρικτικής τεχνολογίας που αφορούν σε πράκτορες χρήστη, διαμόρφωση και συμβατότητα (δείτε την ενότητα "Πόροι" για περισσότερες πληροφορίες). Ενώ υπάρχουν πολλές προσεγγίσεις που μπορούν να χρησιμοποιήσουν οι συγγραφείς για την αντικατάσταση κειμένου, είναι σημαντικό να εξεταστεί η συμβατότητα με υποστηρικτική τεχνολογία, εάν η τεχνική θα λειτουργήσει σωστά σε περίπτωση απενεργοποίησης της δημιουργίας αρχείου εντολών, του CSS, των εικόνων (ή συνδυασμού αυτών). Καθώς μπορεί να είναι δύσκολο να εντοπιστεί μία μεμονωμένη λύση που να λειτουργεί για όλες τις περιπτώσεις, αυτή η τεχνική συνιστά τη χρήση ενός στοιχείου ελέγχου που επιτρέπει σε χρήστες να εναλλάσσονται σε μια παρουσίαση που δεν περιλαμβάνει μια τεχνική αντικατάστασης εικόνας.
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήσης μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) και της Κατανόησης συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Ένας τόπος ενός σχεδιαστικού γραφείου, χρησιμοποιεί μια λειτουργία αλλαγής στυλ που επιτρέπει στους χρήστες να εμφανίζουν δύο παρουσιάσεις της αρχικής τους σελίδας. Για την προεπιλεγμένη έκδοση, το κείμενο επικεφαλίδας αντικαθίσταται με εικόνες κειμένου. Ένα στοιχείο ελέγχου στη σελίδα επιτρέπει στους χρήστες να εναλλάσσονται με μια έκδοση που παρουσιάζει τις επικεφαλίδες ως κείμενο.
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
...
<div id="Header">
<h1><span>Pufferfish Design Studio</span></h1>
<h2><span>Surprising Identity and Design Solutions</span></h2>
</div>
...
Ακολουθεί το CSS της παρουσίασης που περιλαμβάνει εικόνες κειμένου. Να σημειωθεί ότι το CSS χρησιμοποιεί τοποθέτηση για να θέσει τα περιεχόμενα των στοιχείων heading εκτός οθόνης, ώστε το κείμενο να παραμένει διαθέσιμο στους χρήστες προγράμματος ανάγνωσης οθόνης.
Παράδειγμα κώδικα:
...
#Header h1 {
background-image: url(pufferfish-logo.png);
height: 195px;
width: 290px;
background-repeat: no-repeat;
margin-top: 0;
position: absolute;
}
#Header h1 span {
position: absolute;
left: -999em;
}
#Header h2 {
background-image: url(beauty.png);
background-repeat: no-repeat;
height: 234px;
width: 33px;
margin-left: 8px;
position: absolute;
margin-top: 250px;
}
#Header h2 span {
position: absolute;
left: -999em;
}
Το CSS της παρουσίασης δεν περιλαμβάνει εικόνες κειμένου.
Παράδειγμα κώδικα:
...
#Header h1 {
font: normal 200%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #000099;
background: #ffffff;
}
#Header h2 {
font: normal 160%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #336600;
background: #ffffff;
}
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Προσβάσιμη αντικατάσταση εικόνας (Accessible Image Replacement)
Αντικατάσταση εικόνας - Χωρίς span (Image Replacement - Span)
Αντικατάσταση κειμένου από μια εικόνα (Replacing Text By An Image)
Υπέρ της αντικατάστασης εικόνας Fahrner (In Defense of Fahrner Image Replacement)
CSS2: Ιδιότητες παρασκηνίου: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' και 'background' (CSS2: 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background')
Ελέγξτε ότι η Ιστοσελίδα περιλαμβάνει ένα στοιχείο ελέγχου που επιτρέπει στους χρήστες να επιλέγουν μια εναλλακτική παρουσίαση.
Ελέγξτε ότι όταν το στοιχείο ελέγχου ενεργοποιηθεί, η σελίδα που προκύπτει περιλαμβάνει κείμενο (κείμενο που ορίζεται μέσω προγραμματισμού) οπουδήποτε χρησιμοποιούνται οι εικόνες κειμένου.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Τα χρονικά όρια που ελέγχονται από τη δημιουργία αρχείων εντολών από την πλευρά του πελάτη.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στον χρήστη να επεκτείνει την προεπιλεγμένη λήξη του χρόνου σύνδεσης παρέχοντας έναν μηχανισμό για επέκταση του χρόνου όταν τα αρχεία εντολών παρέχουν λειτουργία με προεπιλεγμένα χρονικά όρια. Προκειμένου να μπορεί ο χρήστης να αιτηθεί μεγαλύτερο χρονικό όριο, το αρχείο εντολών μπορεί να παρέχει μια φόρμα (για παράδειγμα) που επιτρέπει στον χρήστη να εισάγει ένα μεγαλύτερο χρονικό όριο ή που υποδεικνύει ότι απαιτείται περισσότερος χρόνος. Εάν προειδοποιείτε τον χρήστη ότι πρόκειται να λήξει το χρονικό όριο (δείτε την τεχνική Παροχής ενός αρχείου εντολών που προειδοποιεί τον χρήστη ότι πρόκειται να λήξει το χρονικό όριο (SCR16: Providing a script that warns the user a time limit is about to expire)), αυτή η φόρμα μπορεί να είναι διαθέσιμη από το παράθυρο προειδοποίησης. Ο χρήστης μπορεί να επεκτείνει το χρονικό όριο κατά τουλάχιστον 10 φορές του προεπιλεγμένου χρονικού ορίου, είτε επιτρέποντας στον χρήστη να υποδείξει πόσο πρόσθετο χρόνο χρειάζεται ή επιτρέποντας επανειλημμένως την επέκταση του χρονικού ορίου στον χρήστη.
Μια Ιστοσελίδα περιέχει τα τρέχοντας στατιστικά στοιχεία των μετοχών και έχει ρυθμιστεί να ανανεώνεται περιοδικά. Όταν ο χρήστης έχει προειδοποιηθεί πριν την ανανέωση για πρώτη φορά, του παρέχεται μια επιλογή επέκτασης της χρονική περιόδου μεταξύ των ανανεώσεων.
Σε ένα ηλεκτρονικό παιχνίδι σκάκι, δίνεται σε κάθε παίκτη χρονικό όριο για την ολοκλήρωση κάθε κίνησης. Όταν ο παίκτης λάβει προειδοποίηση ότι ο χρόνος για την κίνηση έχει σχεδόν τελειώσει, παρέχεται στον χρήστη επιλογή αύξησης του χρόνου.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Σε μια Ιστοσελίδα που χρησιμοποιεί αρχεία εντολών για την εφαρμογή ενός χρονικού ορίου, περιμένετε μέχρι να λήξη ο χρόνος σύνδεσης.
Καθορίστε εάν έχει δοθεί η επιλογή επέκτασης του χρονικού ορίου.
Το #2 είναι αληθές και έχει δοθεί περισσότερος χρόνος για την ολοκλήρωση της αλληλεπίδρασης.
HTML και XHTML με υποστήριξη αρχείων εντολών.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιδείξει τη χρήση συμβάντων ανεξαρτήτων συσκευής για την αλλαγή μιας διακοσμητικής εικόνας, σε απάντηση ενός συμβάντος ποντικιού ή σήμανσης. Χρησιμοποιήστε τα συμβάντα onmouseover
και onmouseout για την αλλαγή μιας διακοσμητικής εικόνας όταν το ποντίκι μετακινείται επάνω σε ένα στοιχείο της σελίδας ή απομακρύνεται από αυτό. Επίσης, χρησιμοποιήστε τα συμβάντα onfocus
και onblur
για να αλλάξετε την εικόνα όταν το στοιχείο επισημαίνεται ή καταργείται η επισήμανση αυτού.
Το παρακάτω παράδειγμα έχει μια διακοσμητική εικόνα μπροστά σε ένα στοιχείο anchor. Όταν ο χρήστης τοποθετεί τον δείκτη ποντικιού πάνω στην ετικέτα anchor, η διακοσμητική εικόνα μπροστά από το anchor αλλάζει. Όταν το ποντίκι απομακρύνεται, η εικόνα αλλάζει στην προηγούμενη έκδοσή της. Το ίδιο εφέ αλλαγής εικόνας προκύπτει όταν ο χρήστης επισημαίνει μέσω πληκτρολογίου το στοιχείο anchor. Όταν πραγματοποιείται σήμανση η εικόνα αλλάζει, όταν καταργείται σήμανση η εικόνα επιστρέφει στην προηγούμενη όψη της. Αυτό επιτυγχάνεται με επισύναψη ρουτίνων χειρισμού συμβάντων onmouseover
, onmouseout
, onfocus
και onblur
στο στοιχείο anchor. Η ρουτίνα χειρισμού συμβάντων είναι μια λειτουργία JavaScript με την ονομασία updateImage(), η οποία αλλάζει την παράμετρο src της εικόνας. Η updateImage() λαμβάνει την ονομασία της με βάση τα συμβάντα onmouseover, onmouseout, onfocus και onblur.
Σε κάθε εικόνα δίνεται ένα μοναδικό αναγνωριστικό. Αυτό το μοναδικό αναγνωριστικό διαβιβάζεται στην updateImage() μαζί με μια τιμή boolean που υποδεικνύει ποια εικόνα θα χρησιμοποιηθεί: updateImage(imgId, isOver);
. Η τιμή boolean 'αληθές' διαβιβάζεται όταν το ποντίκι βρίσκεται πάνω στο στοιχείο anchor ή έχει σήμανση. Μία τιμή 'ψευδές' διαβιβάζεται όταν το ποντίκι απομακρύνεται από το στοιχείο anchor ή καταργείται η σήμανση. Η λειτουργία updateImage() χρησιμοποιεί το αναγνωριστικό εικόνας για να φορτώσει την εικόνα και, στη συνέχεια, αλλάζει την παράμετρο src βάσει της τιμής boolean. Να σημειωθεί ότι καθώς η εικόνα προορίζεται για διακοσμητικούς σκοπούς, έχει μια παράμετρο null alt.
Σημείωση: Είναι καλύτερο να χρησιμοποιείτε εικόνες όμοιες σε μέγεθος και να προσδιορίζετε τις παραμέτρους ύψους και πλάτους στο στοιχείο εικόνας. Αυτό θα αποτρέψει κάθε αλλαγές στη διάταξη της σελίδας, όταν ενημερώνεται η εικόνα. Αυτό το παράδειγμα χρησιμοποιεί εικόνες που είναι πανομοιότυπες σε μέγεθος.
Παράδειγμα κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Changing Image Source in a Device Independent Manner</title>
<script type="text/javascript">
/* This function will change the image src of an image element.
* param imgId - the id of the image object to change
* param isOver - true when mouse is over or object has focus,
* false when mouse move out or focus is lost
*/
function updateImage(imgId, isOver) {
var theImage = document.getElementById(imgId);
if (theImage != null) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
// These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
if (isOver) {
theImage.setAttribute("src","yellowplus.gif");
}
else {
theImage.setAttribute("src","greyplus.gif");
}
}
}
</script>
</head>
<body>
<p>Mouse over or tab to the links below and see the image change.</p>
<a href="http://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
<img src="greyplus.gif" border="0" alt="" id="wai">
W3C Web Accessibility Initiative</a> &
<a href="http://www.w3.org/International/" onmouseover="updateImage('i18n', true);"
onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
onblur="updateImage('i18n',false);">
<img src="greyplus.gif" border="0" alt="" id="i18n">
W3C Internationalization</a>
</body>
</html>
Φορτώστε την Ιστοσελίδα και ελέγξτε τα συμβάντα μέσω ενός ποντικιού ή πληκτρολογίου.
Ελέγξτε ότι η 'τυπική' εικόνα προβάλλεται φυσιολογικά, όταν φορτώνεται η Ιστοσελίδα.
Χρήση του ποντικιού
Μετακινήστε το ποντίκι πάνω στο στοιχείο που περιέχει τις ρουτίνες χειρισμού συμβάντων (στο παράδειγμα αυτό είναι ένα στοιχείο anchor). Ελέγξτε ότι η εικόνα αλλάζει στην αναμενόμενη εικόνα.
Απομακρύνετε το ποντίκι από το στοιχείο. Ελέγξτε ότι η εικόνα αλλάζει πίσω στην 'τυπική' εικόνα.
Χρήση του πληκτρολογίου
Χρησιμοποιήστε το πληκτρολόγιο για να ορίσετε σήμανση στο στοιχείο που περιέχει τις ρουτίνες χειρισμού συμβάντων. Ελέγξτε ότι η εικόνα αλλάζει στην αναμενόμενη εικόνα.
Χρησιμοποιήστε το πληκτρολόγιο για να καταργήσετε τη σήμανση από το στοιχείο (γενικά μέσω μεταφοράς της σήμανσης σε άλλο στοιχείο). Ελέγξτε ότι η εικόνα αλλάζει στην 'τυπική' εικόνα.
Επαληθεύστε ότι η διάταξη άλλων στοιχείων στη σελίδα δεν επηρεάζεται όταν αλλάζει η εικόνα.
Όλα τα βήματα για τους παραπάνω ελέγχους είναι αληθή.
Οι τεχνολογίες αρχείων εντολών που χρησιμοποιούν ειδοποιήσεις αρχείων εντολών για μη επείγουσα επικοινωνία.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να εμφανίσει ένα πλαίσιο διαλόγου με μήνυμα (ειδοποίηση) προς τον χρήστη. Όταν εμφανίζεται η ειδοποίηση, επισημαίνεται και ο χρήστης πρέπει να ενεργοποιήσει το κουμπί "OK" στο πλαίσιο διαλόγου για να την εξαφανίσει. Εφόσον οι ειδοποιήσεις προκαλούν αλλαγή της επισήμανσης, μπορεί να αποσπάσουν τον χρήστη, ειδικά όταν χρησιμοποιούνται για μη επείγουσα επικοινωνία. Οι ειδοποιήσεις για μη επείγοντες σκοπούς, όπως εμφάνιση της φράσης της ημέρας, χρήσιμων συμβουλών χρήσης ή αντίστροφης μέτρησης για ένα συγκεκριμένο συμβάν, δεν παρουσιάζονται εκτός εάν ο χρήστης τις ενεργοποιήσει μέσω επιλογής που παρέχεται στην Ιστοσελίδα.
Αυτή η τεχνική αναθέτει σε μια καθολική μεταβλητή JavaScript να αποθηκεύσει την προτίμηση του χρήστη για την εμφάνιση των ειδοποιήσεων. Η προεπιλεγμένη τιμή είναι ψευδής. Δημιουργείται μια λειτουργία αναδίπλωσης για να ελέγξει την τιμή της μεταβλητής αυτής πριν την εμφάνιση ειδοποίησης. Όλες οι κλήσεις για εμφάνιση μιας ειδοποίησης πραγματοποιούνται από τη λειτουργία αναδίπλωσης αντί της απευθείας κλήσης της συνάρτησης alert(). Πιο πριν στη σελίδα, παρέχεται ένα πλήκτρο στον χρήστη για να του επιτρέψει την εμφάνιση ειδοποιήσεων στη σελίδα. Αυτή η τεχνική λειτουργεί ανά επίσκεψη. Κάθε φορά που φορτώνεται η σελίδα, οι ειδοποιήσεις απενεργοποιούνται και ο χρήστης πρέπει να τις ενεργοποιήσει μη αυτόματα. Εναλλακτικά, ο συγγραφέας θα μπορούσε να χρησιμοποιήσει αρχεία "cookies" για την αποθήκευση των προτιμήσεων χρήστη στις περιόδους λειτουργίας.
Το αρχείο εντολών παρακάτω θα εμφανίζει μια παράθεση σε ένα πλαίσιο ειδοποίησης κάθε δέκα δευτερόλεπτα, εάν ο χρήστης επιλέξει το κουμπί "Ενεργοποίηση ειδοποιήσεων". Ο χρήστης μπορεί να απενεργοποιήσει τις παραθέσεις ξανά επιλέγοντας "Απενεργοποίηση ειδοποιήσεων".
Παράδειγμα κώδικα:
<script type="text/javascript">
var bDoAlerts = false; // global variable which specifies whether to
// display alerts or not
/* function to enable/disable alerts.
* param boolean bOn - true to enable alerts, false to disable them.
*/
function modifyAlerts(isEnabled) {
bDoAlerts = isEnabled;
}
/* wrapper function for displaying alerts. Checks the value of bDoAlerts
*and only calls the alert() function when bDoAlerts is true.
*/
function doAlert(aMessage) {
if (bDoAlerts) {
alert(aMessage);
}
}
// example usage - a loop to display famous quotes.
var gCounter = -1; // global to store counter
// quotes variable would be initialized with famous quotations
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
if (++gCounter >= quotes.length) {
gCounter = 0;
}
doAlert(quotes[gCounter]);
setTimeout("showQuotes();", 10000);
}
showQuotes();
</script>
Εντός του σώματος της σελίδας, συμπεριλάβετε έναν τρόπο ενεργοποίησης και απενεργοποίησης των ειδοποιήσεων. Ακολουθεί ένα παράδειγμα:
Παράδειγμα κώδικα:
<body>
<p>Press the button below to enable the display of famous quotes
using an alert box<br />
<button id="enableBtn" type="button" onclick="modifyAlerts(true);">
Turn Alerts On</button><br />
<button id="disableBtn" type="button" onclick="modifyAlerts(false);">
Turn Alerts Off</button></p>
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: Επίδειξη ειδοποιήσεων (Demonstration of Alerts).
Για μια Ιστοσελίδα που υποστηρίζει μη επείγουσες διακοπές με χρήση ειδοποίησης JavaScript:
Φορτώστε την Ιστοσελίδα και επιβεβαιώστε ότι δεν εμφανίζονται μη επείγουσες ειδοποιήσεις.
Επιβεβαιώστε ότι υπάρχει μηχανισμός ενεργοποίησης των μη επειγουσών ειδοποιήσεων.
Ενεργοποιήστε τις μη επείγουσες ειδοποιήσεις και επιβεβαιώστε ότι εμφανίζονται.
Για μια Ιστοσελίδα που υποστηρίζει μη επείγουσες διακοπές με χρήση ειδοποίησης JavaScript, οι έλεγχοι 1, 2 και 3 είναι αληθείς.
Υπάρχουν χρονικά όρια που ελέγχονται από αρχείο εντολών.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να ενημερώσει τους χρήστες ότι εξαντλήθηκε σχεδόν ο χρόνος τους για την ολοκλήρωση μιας αλληλεπίδρασης. Όταν τα αρχεία εντολών παρέχουν λειτουργία με χρονικά όρια, το αρχείο εντολών μπορεί να συμπεριλάβει λειτουργία για να προειδοποιήσει τον χρήστη για επικείμενο χρονικό όριο και να παράσχει μηχανισμό υποβολής αίτησης για περισσότερο χρόνο. 20 ή περισσότερα δευτερόλεπτα πριν το χρονικό όριο, το αρχείο εντολών παρέχει ένα πλαίσιο διαλόγου επιβεβαίωσης που αναφέρει ότι επίκειται χρονικό όριο και ρωτά εάν ο χρήστης χρειάζεται περισσότερο χρόνο. Εάν ο χρήστης απαντήσει "ναι", τότε το χρονικό όριο ξεκινά από την αρχή. Εάν ο χρήστης απαντήσει "όχι" ή δεν απαντήσει, επιτρέπεται η λήξη του χρονικού ορίου.
Αυτή η τεχνική εμπλέκει χρονικά όρια με τη μέθοδο window.setTimeout()
. Εάν, για παράδειγμα, η λήξη του χρονικού ορίου ρυθμιστεί στα 60 δευτερόλεπτα, μπορείτε να ρυθμίσετε τη λήξη στα 40 δευτερόλεπτα και τη χρήση του πλαισίου διαλόγου επιβεβαίωσης. Όταν το πλαίσιο διαλόγου επιβεβαίωσης εμφανιστεί, ορίζεται νέο χρονικό όριο στα υπόλοιπα 20 δευτερόλεπτα. Με την εκπνοή της "περιόδου χάριτος του χρονικού ορίου", εκτελείται η ενέργεια που θα εκτελούταν στην εκπνοή του χρόνου σύνδεσης των 60 δευτερολέπτων.
Μια σελίδα με τιμές μετοχών χρησιμοποιεί αρχείο εντολών για να ανανεώσει τη σελίδα κάθε πέντε λεπτά, για να διασφαλίσει ότι παραμένουν διαθέσιμα τα πιο πρόσφατα στατιστικά στοιχεία. 20 δευτερόλεπτα πριν την λήξη της περιόδου των πέντε λεπτών, εμφανίζεται ένα πλαίσιο διαλόγου ρωτώντας τον χρήστη εάν χρειάζεται περισσότερο χρόνο πριν την ανανέωση της σελίδας Αυτό επιτρέπει στον χρήστη να γνωρίζει την επικείμενη ανανέωση και να την αποφύγει, εάν το επιθυμεί.
Παράδειγμα κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<url>http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</title>">
<html lang="en">
<head>
<title>Stock Market Quotes</title>
<script type="text/javascript">
<!--
function timeControl() {
// set timer for 4 min 40 sec, then ask user to confirm.
setTimeout('userCheck()', 280000);
}
function userCheck() {
// set page refresh for 20 sec
var id=setTimeout('pageReload()', 20000);
// If user selects "OK" the timer is reset
// else the page will refresh from the server.
if (confirm("This page is set to refresh in 20 seconds.
Would you like more time?"))
{
clearTimeout(id);
timeControl();
}
}
function pageReload() {
window.location.reload(true);
}
timeControl();
-->
</script>
</head>
<body>
<h1>Stock Market Quotes</h1>
...etc...
</body>
</html>
Σε μια Ιστοσελίδα με χρονικό όριο που ελέγχεται από αρχείο εντολών:
φορτώστε τη σελίδα και ξεκινήστε έναν χρονομετρητή με 20 δευτερόλεπτα λιγότερα του χρονικού ορίου.
όταν ο χρονομετρητής εκπνεύσει, ελέγξτε εάν εμφανίζεται ένα πλαίσιο διαλόγου επιβεβαίωσης με προειδοποίηση για το επικείμενο χρονικό όριο.
Το #2 είναι αληθές.
Περιεχόμενο που επικυρώνει τα δεδομένα εισόδου του πελάτη.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επικυρώσει τα δεδομένα εισόδου του χρήστη καθώς καταχωρούνται οι τιμές για κάθε πεδίο, μέσω δημιουργίας αρχείου εντολών στην πλευρά του πελάτη. Εάν βρεθούν σφάλματα, ένα πλαίσιο διαλόγου ειδοποίησης περιγράφει τη φύση του σφάλματος σε κείμενο. Μόλις ο χρήστης εξαφανίσει το πλαίσιο διαλόγου ειδοποίησης, είναι χρήσιμο εάν το αρχείο εντολών τοποθετήσει την επισήμανση πληκτρολογίου στο πεδίο όπου παρουσιάστηκε το σφάλμα.
Το ακόλουθο αρχείο εντολών ελέγχει ότι έχει καταχωριστεί έγκυρη ημερομηνία στο στοιχείο ελέγχου φόρμας.
Παράδειγμα κώδικα:
<label for="date">Date:</label>
<input type="text" name="date" id="date"
onchange="if(isNaN(Date.parse(this.value)))
alert('This control is not a valid date.
Please re-enter the value.');" />
Για πεδία φόρμας που απαιτούν συγκεκριμένα δεδομένα εισόδου:
καταχωρίστε μη έγκυρα δεδομένα
καθορίστε εάν παρέχεται ειδοποίηση περιγραφής του σφάλματος.
Το #2 είναι αληθές
HTML και XHTML με υποστήριξη αρχείων εντολών. Αυτή η τεχνική χρησιμοποιεί τη δομή try/catch του JavaScript 1.4.
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική έχει δοκιμαστεί σε Windows XP με χρήση JAWS 7.0 και WindowEyes 5.5, με Firefox 1.5 και IE 6. Να σημειωθεί ότι πρέπει να είναι ενεργοποιημένο το JavaScript στο πρόγραμμα περιήγησης.
Σκοπός αυτής της τεχνικής είναι να δείξει τη σωστή χρήση ενός συμβάντος onchange με στοιχείο select για την ενημέρωση άλλων στοιχείων στην Ιστοσελίδα. Αυτή η τεχνική δεν θα προκαλέσει αλλαγή του περιβάλλοντος. Όταν υπάρχει ένα ή περισσότερα στοιχεία select στην Ιστοσελίδα, ένα συμβάν onchange σε ένα, μπορεί να ενημερώσει τις επιλογές σε άλλο στοιχείο select στην Ιστοσελίδα. Όλα τα δεδομένα που απαιτούνται από τα στοιχεία select περιλαμβάνονται εντός της Ιστοσελίδας.
Είναι σημαντικό να σημειωθεί ότι το στοιχείο select που τροποποιείται, βρίσκεται μετά το στοιχείο select ενεργοποίησης στη σειρά ανάγνωσης της Ιστοσελίδας. Αυτό διασφαλίζει ότι οι υποστηρικτικές τεχνολογίες θα καταλάβουν την αλλαγή και οι χρήστες θα αντιμετωπίσουν τα νέα δεδομένα όταν επισημανθεί το τροποποιημένο στοιχείο. Αυτή η τεχνική βασίζεται στην υποστήριξη JavaScript στον πράκτορα χρήστη.
Αυτό το παράδειγμα περιέχει δύο στοιχεία select. Όταν επιλεγεί ένα στοιχείο στο πρώτο στοιχείο select, οι επιλογές στο άλλο στοιχείο select ενημερώνονται αντίστοιχα. Το πρώτο στοιχείο select περιέχει μια λίστα ηπείρων. Το δεύτερο στοιχείο select θα περιέχει μέρος μιας λίστας με χώρες που βρίσκονται στην επιλεγμένη ήπειρο. Υπάρχει ένα συμβάν onchange συσχετισμένο με το στοιχείο select ηπείρου. Όταν αλλάζει η επιλογή ηπείρου, τροποποιούνται τα στοιχεία στο στοιχείο select χώρας με χρήση JavaScript μέσω DOM. Όλα τα δεδομένα που απαιτούνται, η λίστα χωρών και ηπείρων, περιλαμβάνονται εντός της Ιστοσελίδας.
Επισκόπηση του κώδικα παρακάτω
μεταβλητή συστοιχία countryLists που περιέχει τη λίστα χωρών για κάθε ήπειρο στην πρόταση select ενεργοποίησης.
συνάρτηση countryChange() που καλείται από το συμβάν onchange στο στοιχείο select ηπείρου.
Ο κώδικας XHTML για τη δημιουργία των στοιχείων select στο σώμα της Ιστοσελίδας.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>Dynamic Select Statements</title>
<script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
countryLists["empty"] = ["Select a Country"];
countryLists["North America"] = ["Canada", "United States", "Mexico"];
countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Asia"] = ["Russia", "China", "Japan"];
countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the countryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>
<body>
<noscript>This page requires JavaScript be available and enabled to function properly</noscript>
<h1>Dynamic Select Statements</h1>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
</body>
</html>
Ακολουθεί ένα λειτουργικό παράδειγμα: "Δυναμική επιλογή" (Dynamic Select)
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
Μεταβείτε στο στοιχείο select ενεργοποίησης (σε αυτό το παράδειγμα της επιλογής ηπείρων) και αλλάξτε την τιμή του στοιχείου select.
Μεταβείτε στο στοιχείο select που ενημερώνεται από το στοιχείο ενεργοποίησης (σε αυτό το παράδειγμα της επιλογής χωρών).
Ελέγξτε ότι οι τιμές επιλογών που συμφωνούν εμφανίζονται στο άλλο στοιχείο select.
Μεταβείτε στο στοιχείο select ενεργοποίησης, πραγματοποιήστε πλοήγηση στις επιλογές αλλά μην αλλάξετε την τιμή.
Ελέγξτε ότι οι τιμές επιλογών που συμφωνούν εμφανίζονται στο συσχετισμένο στοιχείο.
Συνιστάται να δοκιμάζονται τα στοιχεία select με μια υποστηρικτική τεχνολογία για να επιβεβαιωθεί ότι αναγνωρίζονται οι αλλαγές στο συσχετισμένο στοιχείο.
Τα βήματα #3 και #5 είναι αληθή.
Εφαρμόζεται σε όλο το περιεχόμενο που χρησιμοποιεί αρχείο εντολών για εφαρμογή λειτουργίας.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει τη χρήση συμβάντων πληκτρολογίου και ποντικιού με κώδικα που έχει λειτουργία δημιουργίας αρχείου εντολών συσχετισμένη με συμβάν. Η χρήση συμβάντων πληκτρολογίου και ποντικιού μαζί διασφαλίζει ότι είναι δυνατή η λειτουργία του περιεχομένου μέσω μιας μεγάλης σειράς συσκευών. Για παράδειγμα, ένα αρχείο εντολών εκτελεί την ίδια ενέργεια όταν εντοπίζεται πάτημα πλήκτρου που εκτελείται όταν γίνεται κλικ του ποντικιού. Αυτή η τεχνική υπερβαίνει την απαίτηση του κριτηρίου επιτυχίας για πρόσβαση πληκτρολογίου συμπεριλαμβάνοντας όχι μόνο πρόσβαση πληκτρολογίου, αλλά και την πρόσβαση με χρήση άλλων συσκευών.
Σε JavaScript, οι συνηθισμένες ρουτίνες χειρισμού συμβάντων περιλαμβάνουν τις: onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Μερικές λειτουργίες ποντικιού έχουν μια λογική αντίστοιχη λειτουργία πληκτρολογίου (όπως 'onmouseover' και 'onfocus'). Πρέπει να παρασχεθεί η λειτουργία διαχείρισης πληκτρολογίου που εκτελεί την ίδια λειτουργία με τη ρουτίνα χειρισμού συμβάντων ποντικιού.
Ο ακόλουθος πίνακας προτείνει λειτουργίες διαχείρισης συμβάντων πληκτρολογίων για αντιστοίχιση με ρουτίνες χειρισμού συμβάντων ποντικιού.
Χρήση... | ...με |
---|---|
mousedown
|
keydown
|
mouseup
|
keyup
|
click
[1]
|
keypress
[2]
|
mouseover
|
focus
|
mouseout
|
blur
|
1 Αν και το click
είναι κατ' αρχήν μια ρουτίνα χειρισμού συμβάντων ποντικιού, οι περισσότεροι HTML και XHTML πράκτορες χρήστη επεξεργάζονται αυτό το συμβάν όταν το στοιχείο ελέγχου είναι ενεργοποιημένο, ανεξάρτητα από το εάν ενεργοποιήθηκε με το ποντίκι ή το πληκτρολόγιο. Στην πράξη, συνεπώς, δεν είναι απαραίτητη η δημιουργία διπλοτύπου του συμβάντος. Συμπεριλαμβάνεται εδώ για λόγους πληρότητας εφόσον οι μη HTML πράκτορες χρήστη έχουν αυτό το ζήτημα.
2 Εφόσον η λειτουργία διαχείρισης συμβάντος keypress
αντιδρά σε κάθε πλήκτρο, η ρουτίνα χειρισμού συμβάντων θα πρέπει πρώτα να διασφαλίσει ότι πλήκτρο "Enter" πατήθηκε πριν τη διαχείριση του συμβάντος. Διαφορετικά, η ρουτίνα χειρισμού συμβάντων θα εκτελείται κάθε φορά που ο χρήστης πατά οποιοδήποτε πλήκτρο, ακόμα και το πλήκτρο "tab" για έξοδο από το στοιχείο ελέγχου, και αυτό δεν είναι συνήθως επιθυμητό.
Μερικές λειτουργίες ποντικιού (όπως οι dblclick
και mousemove
) δεν έχουν αντίστοιχη λειτουργία πληκτρολογίου. Αυτό σημαίνει ότι μερικές λειτουργίες ίσως χρειάζεται να εφαρμοστούν με διαφορετικό τρόπο για κάθε συσκευή (για παράδειγμα, συμπεριλαμβάνοντας μια σειρά κουμπιών για εκτέλεση, μέσω πληκτρολογίου, των ισοδύναμων λειτουργιών ποντικιού που εφαρμόζονται).
Σε αυτό το παράδειγμα συνδέσμου εικόνας, η εικόνα αλλάζει όταν ο χρήστης τοποθετήσει τη συσκευή κατάδειξης πάνω από την εικόνα. Για να παρασχεθεί μια παρόμοια εμπειρία στους χρήστες πληκτρολογίου, η εικόνα αλλάζει επίσης όταν ο χρήστης μετακινείται σε αυτή με το πλήκτρο "tab".
Παράδειγμα κώδικα:
<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>
Αυτό το παράδειγμα δείχνει μια εικόνα για την οποία μπορεί να χρησιμοποιηθεί το πληκτρολόγιο για ενεργοποίηση της λειτουργίας. Δημιουργείται διπλότυπο του συμβάντος ποντικιού onclick
από κατάλληλο συμβάν πληκτρολογίου onkeypress
. Η παράμετρος tabindex
διασφαλίζει ότι το πληκτρολόγιο θα σταματήσει στην εικόνα με χρήση tab. Σημειώστε ότι σε αυτό το παράδειγμα, η συνάρτηση nextPage()
πρέπει να ελέγξει ότι το πλήκτρο του πληκτρολογίου που πατήθηκε ήταν το "Enter", διαφορετικά θα απαντήσει σε όλες τις ενέργειες πληκτρολογίου ενώ η εικόνα έχει επισήμανση, που δεν αποτελεί την επιθυμητή συμπεριφορά.
Παράδειγμα κώδικα:
<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif"
alt="Go to next page">
Σημείωση: Αυτό το παράδειγμα χρησιμοποιεί tabindex σε στοιχείο img
. Αν και δεν είναι μη έγκυρο επί του παρόντος, παρέχεται ως μεταβατική τεχνική για να λειτουργήσει η συνάρτηση.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε όλες τις αλληλεπιδραστικές λειτουργίες
Ελέγξτε ότι είναι δυνατή η πρόσβαση σε όλες τις αλληλεπιδραστικές λειτουργίες μέσω του πληκτρολογίου μόνο
Το #2 είναι αληθές
Χρησιμοποιούνται ECMAScript εντός της HTML και της XHTML
Αυτή η τεχνική σχετίζεται με:
Αυτό το παράδειγμα δοκιμάστηκε με επιτυχία σε Windows XP με IE 6 και Firefox 1.5.0.1, χρησιμοποιώντας JAWS 7 και WindowEyes 5.5. Σημειώστε ότι κατά την προσθήκη νέου περιεχομένου σε σελίδα, οι εφαρμογές ανάγνωσης οθόνης ίσως δεν εκφωνήσουν αυτόματα το νέο περιεχόμενο. Για να διασφαλιστεί η εκφώνηση του νέου περιεχομένου, ρυθμίστε την επισήμανση στο νέο στοιχείο ή βεβαιωθείτε ότι προστίθεται στην τρέχουσα θέση και θα εμφανιστεί καθώς ο χρήστης συνεχίζει να διαπερνά τη σελίδα.
Σκοπός αυτής της τεχνικής είναι να δείξει τον τρόπο χρήσης των συναρτήσεων του DOM για προσθήκη περιεχομένου σε σελίδα αντί της χρήσης document.write
ή object.innerHTML
. Η μέθοδος document.write()
δεν δουλεύει με XHTML όταν εξυπηρετείται με τον σωστό τύπο MIME (application/xhtml+xml), και η ιδιότητα innerHTML
δεν αποτελεί μέρος της προδιαγραφής DOM και άρα πρέπει να αποφευχθεί. Εάν οι συναρτήσεις DOM χρησιμοποιούνται για την προσθήκη περιεχομένου, πράκτορες χρήστη μπορούν να έχουν πρόσβαση στο DOM για ανάκτηση του περιεχομένου. Η συνάρτηση createElement()
μπορεί να χρησιμοποιηθεί για τη δημιουργία στοιχείων εντός του DOM. Η createTextNode()
χρησιμοποιείται για τη δημιουργία κειμένου συσχετισμένου με στοιχεία. Οι συναρτήσεις appendChild()
, removeChild()
, insertBefore()
και replaceChild()
χρησιμοποιούνται για την προσθήκη και αφαίρεση στοιχείων και κόμβων. Άλλες συναρτήσεις DOM χρησιμοποιούνται για την εκχώρηση παραμέτρων σε δημιουργημένα στοιχεία.
Σημείωση: Όταν προστίθενται στοιχεία με δυνατότητα επισήμανσης σε έγγραφο, μην προσθέτετε παραμέτρους tabindex
για το ρητό ορισμό της σειρά στηλοθέτησης, καθώς αυτό μπορεί να δημιουργήσει προβλήματα κατά την προσθήκη στοιχείων με δυνατότητα επισήμανσης στο μέσον ενός εγγράφου. Επιτρέψτε την εκχώρηση της προεπιλεγμένης σειράς στηλοθέτησης στο νέο στοιχείο μέσω του μη ρητού ορισμού της παραμέτρου tabindex
.
Αυτό το παράδειγμα δείχνει τη χρήση δημιουργίας αρχείου εντολών στην πλευρά του πελάτη για την επικύρωση μιας φόρμας. Εάν βρεθούν σφάλματα, εμφανίζονται κατάλληλα μηνύματα σφάλματος. Το παράδειγμα χρησιμοποιεί τις συναρτήσεις DOM για την προσθήκη ειδοποίησης σφάλματος για τίτλο, μια σύντομη παράγραφο που εξηγεί ότι προέκυψε σφάλμα, και μια ταξινομημένη λίστα σφαλμάτων. Το περιεχόμενο του τίτλου είναι γραμμένο ως σύνδεσμος, ώστε να μπορεί να χρησιμοποιηθεί για να προσελκύσει την προσοχή του χρήστη στο σφάλμα χρησιμοποιώντας τη μέθοδο επισήμανσης. Κάθε στοιχείο στη λίστα είναι επίσης γραμμένο ως σύνδεσμος που τοποθετεί την επισήμανση στο πεδίο φόρμας με το σφάλμα, όταν ακολουθεί σύνδεσμο.
Για λόγους απλότητας, το παράδειγμα επικυρώνει δύο πεδία κειμένου, αλλά μπορεί να επεκταθεί εύκολα σε γενική λειτουργία διαχείρισης φόρμας. Η επικύρωση στην πλευρά του πελάτη δεν πρέπει να είναι το μόνο μέσο επικύρωσης και πρέπει να υποστηρίζεται από επικύρωση στην πλευρά του διακομιστή. Το όφελος της επικύρωσης στην πλευρά του πελάτη είναι ότι μπορείτε να παρέχετε άμεσα σχόλια στον χρήστη για να εξοικονομήσει το χρόνο αναμονής μέχρι τα σφάλματα να επιστρέψουν από τον διακομιστή, και ότι βοηθά στη μείωση της άσκοπης κυκλοφορίας δεδομένων στον διακομιστή.
Ακολουθεί το αρχείο εντολών που προσθέτει ρουτίνες χειρισμού συμβάντων στη φόρμα. Εάν είναι ενεργοποιημένη η δημιουργία αρχείων εντολών, θα κληθεί η συνάρτηση validateNumbers() για να εκτελέσει επικύρωση στην πλευρά του πελάτη πριν υποβληθεί η φόρμα στον διακομιστή. Εάν δεν είναι ενεργοποιημένη η δημιουργία αρχείων εντολών, η φόρμα θα υποβληθεί αυτόματα στον διακομιστή και η επικύρωση θα πρέπει να πραγματοποιηθεί επίσης στον διακομιστή.
Παράδειγμα κώδικα:
window.onload = initialise;
function initialise()
{
// Ensure we're working with a relatively standards compliant user agent
if (!document.getElementById || !document.createElement || !document.createTextNode)
return;
// Add an event handler for the number form
var objForm = document.getElementById('numberform');
objForm.onsubmit= function(){return validateNumbers(this);};
}
Ακολουθεί η συνάρτηση επικύρωσης. Σημειώστε ότι χρησιμοποιούνται οι συναρτήσεις DOM createElement(), createTextNode() και appendChild() για τη δημιουργία των στοιχείων μηνυμάτων σφάλματος.
Παράδειγμα κώδικα:
function validateNumbers(objForm)
{
// Test whether fields are valid
var bFirst = isNumber(document.getElementById('num1').value);
var bSecond = isNumber(document.getElementById('num2').value);
// If not valid, display errors
if (!bFirst || !bSecond)
{
var objExisting = document.getElementById('validationerrors');
var objNew = document.createElement('div');
var objTitle = document.createElement('h2');
var objParagraph = document.createElement('p');
var objList = document.createElement('ol');
var objAnchor = document.createElement('a');
var strID = 'firsterror';
var strError;
// The heading element will contain a link so that screen readers
// can use it to place focus - the destination for the link is
// the first error contained in a list
objAnchor.appendChild(document.createTextNode('Errors in Submission'));
objAnchor.setAttribute('href', '#firsterror');
objTitle.appendChild(objAnchor);
objParagraph.appendChild(document.createTextNode('Please review the following'));
objNew.setAttribute('id', 'validationerrors');
objNew.appendChild(objTitle);
objNew.appendChild(objParagraph);
// Add each error found to the list of errors
if (!bFirst)
{
strError = 'Please provide a numeric value for the first number';
objList.appendChild(addError(strError, '#num1', objForm, strID));
strID = '';
}
if (!bSecond)
{
strError = 'Please provide a numeric value for the second number';
objList.appendChild(addError(strError, '#num2', objForm, strID));
strID = '';
}
// Add the list to the error information
objNew.appendChild(objList);
// If there were existing errors, replace them with the new lot,
// otherwise add the new errors to the start of the form
if (objExisting)
objExisting.parentNode.replaceChild(objNew, objExisting);
else
{
var objPosition = objForm.firstChild;
objForm.insertBefore(objNew, objPosition);
}
// Place focus on the anchor in the heading to alert
// screen readers that the submission is in error
objAnchor.focus();
// Do not submit the form
objForm.submitAllowed = false;
return false;
}
return true;
}
// Function to validate a number
function isNumber(strValue)
{
return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
}
Παρακάτω ακολουθούν οι βοηθητικές συναρτήσεις για τη δημιουργία του μηνύματος σφάλματος και τη ρύθμιση της επισήμανσης στο συσχετισμένο πεδίο φόρμας.
Παράδειγμα κώδικα:
// Function to create a list item containing a link describing the error
// that points to the appropriate form field
function addError(strError, strFragment, objForm, strID)
{
var objAnchor = document.createElement('a');
var objListItem = document.createElement('li');
objAnchor.appendChild(document.createTextNode(strError));
objAnchor.setAttribute('href', strFragment);
objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
// If strID has a value, this is the first error in the list
if (strID.length > 0)
objAnchor.setAttribute('id', strID);
objListItem.appendChild(objAnchor);
return objListItem;
}
// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
// Allow keyboard navigation over links
if (objEvent && objEvent.type == 'keypress')
if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
return true;
// set focus to the form control
var strFormField = objAnchor.href.match(/[^#]\w*$/);
objForm[strFormField].focus();
return false;
}
Ακολουθεί η HTML για το παράδειγμα φόρμας.
Παράδειγμα κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ECMAScript Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form id="numberform" method="post" action="form.php">
<fieldset>
<legend>Numeric Fields</legend>
<p>
<label for="num1">Enter first number</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>
<label for="num2">Enter second number</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Submit Form">
</p>
</form>
</body>
</html>
Αυτό το παράδειγμα περιορίζεται σε δημιουργία αρχείων εντολών στην πλευρά του πελάτη και θα πρέπει να υποστηρίζεται από επικύρωση στην πλευρά του διακομιστή. Το παράδειγμα περιορίζεται στη δημιουργία μηνυμάτων σφάλματος όταν είναι διαθέσιμη η δημιουργία αρχείων στην πλευρά του πελάτη.
Ακολουθεί ο σύνδεσμος για ένα λειτουργικό παράδειγμα: Επικύρωση φόρμας (Form Validation)
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Το Μοντέλο Αντικειμένου Εγγράφου: Περισσότερες μέθοδοι" (The Document Object Model, More methods) από το Webreference.com
Προσβάσιμες φόρμες που χρησιμοποιούν το WCAG 2.0 (Accessible Forms using WCAG 2.0)
(καμία δεν εμπεριέχεται στη λίστα)
Για σελίδες που δημιουργούν δυναμικά νέο περιεχόμενο:
Εξετάστε τον πηγαίο κώδικα και ελέγξτε ότι το νέο περιεχόμενο δεν δημιουργείται με χρήση document.write(), innerHTML, outerHTML, innerText ή outerText.
Ελέγξτε ότι το #1 είναι αληθές.
Τεχνολογίες που υποστηρίζουν αναβοσβήσιμο του περιεχόμενου ελεγχόμενο από αρχείο εντολών.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να ελέγχει το αναβοσβήσιμο με αρχείο εντολών, ώστε να είναι δυνατή η ρύθμισή του για διακοπή σε λιγότερο από πέντε δευτερόλεπτα από το αρχείο εντολών. Το αρχείο εντολών χρησιμοποιείται για να ξεκινήσει το εφέ του αναβοσβησίματος του περιεχομένου, να ελεγχθεί η εναλλαγή μεταξύ των καταστάσεων εμφάνισης και απόκρυψης, και επίσης να διακοπεί το εφέ στα πέντε δευτερόλεπτα ή λιγότερο. Η συνάρτηση setTimeout()
μπορεί να χρησιμοποιηθεί για την εναλλαγή του αναβοσβησίματος του περιεχομένου μεταξύ των καταστάσεων εμφάνισης και απόκρυψης, και για τη διακοπή του όταν ο αριθμός των επαναλήψεων μεταξύ τους πλησιάζει τα πέντε δευτερόλεπτα.
Αυτό το παράδειγμα χρησιμοποιεί Javascript για τον έλεγχο του αναβοσβησίματος περιεχομένου XHTML. Η γλώσσα Javascript δημιουργεί το εφέ του αναβοσβησίματος αλλάζοντας την κατάσταση ορατότητας του περιεχομένου. Ελέγχει την έναρξη του εφέ και το σταματά εντός πέντε δευτερολέπτων.
Παράδειγμα κώδικα:
...
<div id="blink1" class="highlight">New item!</div>
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "visible";
}
// blink "off" state
function hide()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "hidden";
}
// toggle "on" and "off" states every 450 ms to achieve a blink effect
// end after 4500 ms (less than five seconds)
for(var i=900; i < 4500; i=i+900)
{
setTimeout("hide()",i);
setTimeout("show()",i+450);
}
-->
</script>
...
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: "Χρήση αρχείου εντολών για τον έλεγχο του αναβοσβησίματος" (Using script to control blinking).
Για κάθε εμφάνιση περιεχομένου που αναβοσβήνει:
Ξεκινήστε έναν χρονομετρητή για 5 δευτερόλεπτα στην έναρξη του εφέ αναβοσβησίματος.
Όταν λήξει ο χρονομετρητής, καθορίστε εάν σταμάτησε το αναβοσβήσιμο.
Για κάθε εμφάνιση του περιεχομένου που αναβοσβήνει, το #2 είναι αληθές.
HTML 4.01 και XHTML 1.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφευχθεί η σύγχυση που μπορεί να προκληθεί από την εμφάνιση νέων παραθύρων για τα οποία δεν υπήρξε αίτηση από τον ο χρήστης. Το ξαφνικό άνοιγμα νέων παραθύρων μπορεί να αποπροσανατολίσει ή να αγνοηθεί πλήρως από μερικούς χρήστες. Εάν ο τύπος εγγράφου δεν επιτρέπει την παράμετρο target
(δεν υπάρχει σε HTML 4.01 Strict ή XHTML 1.0 Strict) ή εάν ο προγραμματιστής προτιμά να μην τη χρησιμοποιήσει, είναι δυνατό το άνοιγμα νέων παραθύρων με ECMAScript. Το παράδειγμα παρακάτω δείχνει πώς ανοίγουν νέα παράθυρα με αρχείο εντολών: προσθέτει μια ρουτίνα χειρισμού συμβάντων σε σύνδεσμο (στοιχείο a
) και προειδοποιεί τον χρήστη ότι το περιεχόμενο θα ανοίξει σε νέο παράθυρο.
Επισημείωση:
Το αρχείο εντολών περιλαμβάνεται στην κεφαλή του εγγράφου και ο σύνδεσμος έχει αναγνωριστικό που μπορεί να χρησιμοποιηθεί ως αγκίστρι (hook) από το αρχείο εντολών.
Παράδειγμα κώδικα:
<script type="text/javascript" src="popup.js"></script>
…
<a href="help.html" id="newwin">Show Help</a
Αρχείο εντολών:
Παράδειγμα κώδικα:
// Use traditional event model whilst support for event registration
// amongst browsers is poor.
window.onload = addHandlers;
function addHandlers()
{
var objAnchor = document.getElementById('newwin');
if (objAnchor)
{
objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
objAnchor.onclick = function(event){return launchWindow(this, event);}
// UAAG requires that user agents handle events in a device-independent manner
// but only some browsers do this, so add keyboard event to be sure
objAnchor.onkeypress = function(event){return launchWindow(this, event);}
}
}
function launchWindow(objAnchor, objEvent)
{
var iKeyCode, bSuccess=false;
// If the event is from a keyboard, we only want to open the
// new window if the user requested the link (return or space)
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;
// If not carriage return or space, return true so that the user agent
// continues to process the action
if (iKeyCode != 13 && iKeyCode != 32)
return true;
}
bSuccess = window.open(objAnchor.href);
// If the window did not open, allow the browser to continue the default
// action of opening in the same window
if (!bSuccess)
return true;
// The window was opened, so stop the browser processing further
return false;
}
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Wikipedia: "Προοδευτική βελτίωση" (Wikipedia: Progressive Enhancement)
Ενεργοποιήστε κάθε σύνδεσμο στο έγγραφο για να ελέγξετε εάν ανοίγει νέο παράθυρο.
Για κάθε σύνδεσμο που ανοίγει ένα νέο παράθυρο, ελέγξτε ότι χρησιμοποιεί αρχείο εντολών για να επιτύχει καθένα από τα παρακάτω:
να υποδείξει ότι ο σύνδεσμος θα ανοίξει σε ένα νέο παράθυρο,
να χρησιμοποιήσει ρουτίνες χειρισμού συμβάντων ανεξάρτητες συσκευών και
να επιτρέψει στο πρόγραμμα περιήγησης να ανοίξει το περιεχόμενο στο ίδιο παράθυρο, εάν ένα νέο παράθυρο δεν άνοιξε ήδη.
Το #2 είναι αληθές.
HTML και XHTML, αρχείο εντολών
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να θέσει στοιχεία διεπαφής χρήστη που έχουν εισαχθεί στο Μοντέλο αντικειμένου εγγράφου (DOM) με τέτοιον τρόπο ώστε η σειρά στηλοθέτησης και η σειρά ανάγνωσης στο πρόγραμμα ανάγνωσης οθόνης να ορίζονται σωστά από την προεπιλεγμένη συμπεριφορά του πράκτορα χρήστη. Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για κάθε στοιχείο διεπαφής χρήστη που είναι κρυφό και εμφανίζεται, όπως μενού και παράθυρα.
Η σειρά ανάγνωσης σε ένα πρόγραμμα ανάγνωσης οθόνης βασίζεται στη σειρά των στοιχείων HTML και XHTML στο Μοντέλο αντικειμένου εγγράφου, όπως και η προεπιλεγμένη σειρά στηλοθέτησης. Αυτή η τεχνική εισάγει νέο περιεχόμενο στο DOM και ακολουθεί αμέσως το στοιχείο που ενεργοποιήθηκε για το έναυσμα του αρχείου εντολών. Το στοιχείο ενεργοποίησης πρέπει να είναι ένας σύνδεσμος ή κουμπί και το αρχείο εντολών πρέπει να κληθεί από το συμβάν onclick. Αυτά τα στοιχεία έχουν εγγενή δυνατότητα σήμανσης και το συμβάν τους onclick εξαρτάται των συσκευών. Η σήμανση παραμένει στο ενεργοποιημένο στοιχείο και το νέο περιεχόμενο, που έχει εισαχθεί ύστερα από αυτό, γίνεται το επόμενο στοιχείο τόσο στη σειρά στηλοθέτησης, όσο και στη σειρά ανάγνωσης του προγράμματος ανάγνωσης οθόνης.
Να σημειωθεί ότι αυτή η τεχνική λειτουργεί για σύγχρονες ενημερώσεις. Για ασύγχρονες ενημερώσεις (ορισμένες φορές ονομάζονται AJAX), απαιτείται μια πρόσθετη τεχνική για να ενημερώσει την υποστηρικτική τεχνολογία ότι έχει εισαχθεί ασύγχρονο περιεχόμενο.
Αυτό το παράδειγμα δημιουργεί ένα μενού όταν γίνεται κλικ σε έναν σύνδεσμο και το εισάγει ύστερα από τον σύνδεσμο. Το συμβάν onclick του συνδέσμου χρησιμοποιείται για την κλήση του αρχείου εντολών ShowHide, διαβιβάζοντας ένα αναγνωριστικό για το νέο μενού ως παράμετρο.
Παράδειγμα κώδικα:
<a href="#" onclick="ShowHide('foo',this)">Toggle</a>
Το αρχείο εντολών ShowHide δημιουργεί ένα div που περιέχει το νέο μενού και εισάγει έναν νέο σύνδεσμο σε αυτό. Η τελευταία γραμμή είναι ο πυρήνας του αρχείου εντολών. Εντοπίζει τον γονέα του στοιχείου που ενεργοποίησε το αρχείο εντολών και προσθέτει το div που δημιούργησε ως νέο θυγατρικό στοιχείο σε αυτό. Αυτό οδηγεί το νέο div στο DOM ύστερα από τον σύνδεσμο. Όταν ο χρήστης πατήσει το πλήκτρο tab, η σήμανση θα μεταφερθεί στο πρώτο στοιχείο με δυνατότητα σήμανσης στο μενού, τον σύνδεσμο που δημιουργήσαμε.
Παράδειγμα κώδικα:
function ShowHide(id,src)
{
var el = document.getElementById(id);
if (!el)
{
el = document.createElement("div");
el.id = id;
var link = document.createElement("a");
link.href = "javascript:void(0)";
link.appendChild(document.createTextNode("Content"));
el.appendChild(link);
src.parentElement.appendChild(el);
}
else
{
el.style.display = ('none' == el.style.display ? 'block' : 'none');
}
}
Το CSS χρησιμοποιείται για να κάνει το div και τον σύνδεσμο να μοιάζουν με ένα μενού.
Εντοπίστε όλες τις περιοχές της σελίδας που ενεργοποιούν παράθυρα που δεν είναι αναδυόμενα.
Ελέγξτε ότι τα παράθυρα ενεργοποιούνται από το συμβάν click ενός κουμπιού ή συνδέσμου.
Χρησιμοποιώντας ένα εργαλείο που σας επιτρέπει να επιθεωρήσετε το DOM που δημιουργήθηκε από αρχείο εντολών, ελέγξτε ότι το παράθυρο βρίσκεται δίπλα στο DOM.
Τα #2 και #3 είναι αληθή.
HTML και XHTML, αρχείο εντολών
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού για επαναταξινόμηση συστατικού στοιχείου που χρησιμοποιείται πολύ και είναι και ιδιαίτερα προσβάσιμος. Οι δύο πιο κοινοί μηχανισμοί επαναταξινόμησης είναι η αποστολή χρηστών σε μια σελίδα εγκατάστασης, όπου μπορούν να αριθμήσουν συστατικά στοιχεία ή να τους επιτραπεί να μεταφέρουν και αποθέσουν συστατικά στοιχεία στην επιθυμητή θέση. Η μέθοδος μεταφοράς και απόθεσης χρησιμοποιείται πολύ περισσότερο, καθώς επιτρέπει στον χρήστη να διαρρυθμίσει τα στοιχεία στον χώρο, ένα τη φορά και να αποκτήσει μια άποψη για τα αποτελέσματα. Δυστυχώς, η μεταφορά και απόθεση βασίζεται στη χρήση ενός ποντικιού. Αυτή η τεχνική επιτρέπει στους χρήστες να αλληλεπιδράσουν με ένα μενού στα συστατικά στοιχεία για επαναταξινόμηση αυτών με τρόπο ανεξάρτητο συσκευών. Μπορεί να χρησιμοποιηθεί αντί για (ή σε συνδυασμό με) μια λειτουργία επαναταξινόμησης μεταφοράς και απόθεσης.
Το μενού είναι μια λίστα συνδέσμων που χρησιμοποιούν το συμβάν onclick, που είναι ανεξάρτητο συσκευών, για τη ενεργοποίηση αρχείων εντολών τα οποία επαναταξινομούν το περιεχόμενο. Το περιεχόμενο επαναταξινομείται στο Μοντέλο αντικείμενο εγγράφου (DOM), όχι απλά οπτικά, ώστε να βρίσκεται στη σωστή σειρά για όλες τις συσκευές.
Αυτό το παράδειγμα πραγματοποιεί επαναταξινόμηση προς τα πάνω και κάτω. Αυτή η προσέγγιση μπορεί επίσης να χρησιμοποιηθεί για επαναταξινόμηση δύο διαστάσεων, προσθέτοντας αριστερές και δεξιές επιλογές.
Τα συστατικά στοιχεία σε αυτό το παράδειγμα είναι στοιχεία λίστας σε μια μη ταξινομημένη λίστα. Μη ταξινομημένες λίστες είναι ένα πολύ καλό σημασιολογικό μοντέλο για σύνολα όμοιων στοιχείων, όπως αυτά τα συστατικά στοιχεία. Η προσέγγιση μενού μπορεί επίσης να χρησιμοποιηθεί για άλλους τύπους ομαδοποιήσεων.
Οι υπομονάδες είναι στοιχεία λίστας και κάθε υπομονάδα, επιπλέον του περιεχομένου σε στοιχεία div, περιέχει ένα μενού που αναπαρίσταται ως μια ένθετη λίστα.
Παράδειγμα κώδικα:
<ul id="swapper">
<li id="black">
<div class="module">
<div class="module_header">
<!-- menu link -->
<a href="#" onclick="ToggleMenu(event);">menu</a>
<!-- menu -->
<ul class="menu">
<li><a href="#" onclick="OnMenuClick(event)"
onkeypress="OnMenuKeypress(event);">up</a></li>
<li><a href="#" onclick="OnMenuClick(event)"
onkeypress="OnMenuKeypress(event);">down</a></li>
</ul>
</div>
<div class="module_body">
Text in the black module
</div>
</div>
</li>
...
</ul>
Καθώς έχουμε καλύψει την εμφάνιση και απόκρυψη μενού στα δείγματα απλού δένδρου, θα εστιάσουμε εδώ απλώς στον κώδικα που εναλλάσσει τις υπομονάδες. Όταν εναρμονίζουμε τα συμβάντα και ακυρώνουμε την προεπιλεγμένη ενέργεια συνδέσμου, αρχίζει η δουλειά μας. Πρώτα, ορίζουμε έναν αριθμό τοπικών μεταβλητών για τα στοιχεία με τα οποία θα εργαστούμε: το μενού, την υπομονάδα για επαναταξινόμηση, το menuLink. Έπειτα, ύστερα από τον έλεγχο της κατεύθυνσης επαναταξινόμησης, επιχειρούμε να λάβουμε τον κόμβο προς εναλλαγή. Εάν εντοπίσουμε έναν, καλούμε την swapNode() για εναλλαγή των δύο υπομονάδων και την PositionElement() για μεταφορά του απόλυτης τοποθέτησης μενού μαζί με την υπομονάδα και, στη συνέχεια, ορίζουμε τη σήμανση πίσω στο στοιχείο μενού που πραγματοποίησε την έναρξη όλης αυτής της διαδικασίας.
Παράδειγμα κώδικα:
function MoveNode(evt,dir)
{
HarmonizeEvent(evt);
evt.preventDefault();
var src = evt.target;
var menu = src.parentNode.parentNode;
var module = menu.parentNode.parentNode.parentNode;
var menuLink = module.getElementsByTagName("a")[0];
var swap = null;
switch(dir)
{
case 'up':
{
swap = module.previousSibling;
while (swap && swap.nodeType != 1)
{
swap = swap.previousSibling;
}
break;
}
case 'down':
{
swap = module.nextSibling;
while (swap && swap.nodeType != 1)
{
swap = swap.nextSibling;
}
break;
}
}
if (swap && swap.tagName == node.tagName)
{
module.swapNode(swap);
PositionElement(menu,menuLink,false,true);
}
src.focus();
}
Το CSS για την εναλλαγή κόμβου δεν είναι ιδιαίτερα διαφορετικό των προηγούμενων δειγμάτων δένδρου, με ορισμένες ρυθμίσεις μεγέθους και χρώματος για τις υπομονάδες και το μικρό μενού.
Παράδειγμα κώδικα:
ul#swapper { margin:0px; padding:0px; list-item-style:none; }
ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em;
border:1px solid black; }
ul#swapper li a { color:white; text-decoration:none; font-size:90%; }
ul#swapper li div.module_header { text-align:right; padding:0 0.2em; }
ul#swapper li div.module_body { padding:0.2em; }
ul#swapper ul.menu { padding:0; margin:0; list-style:none; background-color:#eeeeee;
height:auto; position:absolute; text-align:left; border:1px solid gray; display:none; }
ul#swapper ul.menu li { height:auto; border:none; margin:0; text-align:left;
font-weight:normal; width:5em; }
ul#swapper ul.menu li a { text-decoration:none; color:black; padding:0 0.1em;
display:block; width:100%; }
Εντοπίστε όλα τα συστατικά στοιχεία στην Ιστοσελίδα που μπορεί να επαναταξινομηθεί μέσω μεταφοράς και απόθεσης.
Ελέγξτε ότι υπάρχει επίσης ένας μηχανισμός επαναταξινόμησης αυτών χρησιμοποιώντας μενού, δομημένα από λίστες συνδέσμων.
Ελέγξτε ότι τα μενού περιέχονται εντός των επαναταξινομημένων στοιχείων στο DOM.
Ελέγξτε ότι τα αρχεία εντολών για επαναταξινόμηση ενεργοποιούνται μόνο από το συμβάν onclick των συνδέσμων.
Ελέγξτε ότι τα στοιχεία επαναταξινομούνται στο DOM, όχι μόνον οπτικά.
Τα #2 έως #5 είναι αληθή.
Τεχνολογίες που παρέχουν δημιουργία αρχείων εντολών στην πλευρά του πελάτη.
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική επιτρέπει στους χρήστες να παρακάμψουν επαναλαμβανόμενο υλικό, τοποθετώντας αυτό το υλικό σε ένα μενού που μπορεί να επεκταθεί ή αναδιπλωθεί κάτω από τον έλεγχο του χρήστη. Ο χρήστης μπορεί να παρακάμψει το επαναλαμβανόμενο υλικό με αναδίπλωση του μενού. Ο χρήστης καλεί ένα στοιχείο ελέγχου διεπαφής χρήστης για την απόκρυψη ή κατάργηση των στοιχείων του μενού. Η ενότητα "Πόροι" παραθέτει διάφορες τεχνικές για μενού, γραμμές εργαλείων και δένδρα, οποιαδήποτε από τις οποίες μπορεί να χρησιμοποιηθεί για την παροχή ενός μηχανισμού παράκαμψης πλοήγησης.
Σημείωση: Όμοιες προσεγγίσεις μπορούν να υλοποιηθούν μέσω δημιουργίας αρχείων εντολών στην πλευρά του διακομιστή και επαναφόρτωσης μιας τροποποιημένης έκδοσης της Ιστοσελίδας.
Οι σύνδεσμοι πλοήγησης στην κορυφή μιας Ιστοσελίδας είναι όλοι καταχωρήσεις σε ένα μενού που υλοποιούνται μέσω HTML, CSS και Javascript. Όταν η γραμμή πλοήγησης επεκταθεί, οι σύνδεσμοι πλοήγησης είναι διαθέσιμοι προς τον χρήστη. Όταν αναδιπλωθεί η γραμμή πλοήγησης, οι σύνδεσμοι δεν είναι διαθέσιμοι.
Παράδειγμα κώδικα:
...
<script type="text/javascript">
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
</script>
...
<a href="#" onclick="toggle("navbar")">Toggle Navigation Bar</a>
<ul> id="navbar">
<li><a href="http://target1.html">Link 1</a></li>
<li><a href="http://target2.html">Link 2</a></li>
<li><a href="http://target3.html">Link 3</a></li>
<li><a href="http://target4.html">Link 4</a></li>
</ul>
...
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: "Εναλλαγή της γραμμής πλοήγησης με έναν σύνδεσμο" (Toggle navigation bar with a link).
Ο πίνακας περιεχομένων για ένα σύνολο Ιστοσελίδων επαναλαμβάνεται κοντά στην αρχή κάθε Ιστοσελίδας. Ένα κουμπί στην αρχή του πίνακα περιεχομένων επιτρέπει στον χρήστη να καταργήσει ή επαναφέρει τη σελίδα.
Παράδειγμα κώδικα:
...
<script type="text/javascript">
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
</script>
...
<button onclick="return toggle('toc');">Toggle Table of Contents</button>
<div id="toc">
...
</div>
...
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: "Εναλλαγή πίνακα περιεχομένων με ένα κουμπί" (Toggle table of contents with a button).
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι ορισμένα στοιχεία ελέγχου διεπαφής χρήστη επιτρέπουν την επέκταση ή αναδίπλωση του επαναλαμβανόμενου περιεχομένου.
Ελέγξτε ότι όταν το περιεχόμενο επεκτείνεται, συμπεριλαμβάνεται στο καθορισμένο μέσω προγραμματισμού περιεχόμενο, σε μια λογική θέση στη σειρά ανάγνωσης.
Ελέγξτε ότι όταν το περιεχόμενο αναδιπλώνεται, δεν αποτελεί μέρος του καθορισμένου μέσω προγραμματισμού περιεχομένου.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML, αρχείο εντολών
Αυτή η τεχνική σχετίζεται με:
Η HTML 4.01 ορίζει μόνο την παράμετρο tabindex για a
, area
, button
, input
, object
, select
και textarea
και περιορίζει την τιμή της στο πεδίο μεταξύ 0 και 32767. Η χρήση της tabindex
με άλλους τύπους στοιχείου και της τιμής -1 της παραμέτρου tabindex, υποστηρίζεται στο Internet Explorer 5.01 και νεότερες εκδόσεις, στο Firefox 1.5 και νεότερες εκδόσεις, στο Opera 9.5 και νεότερες εκδόσεις και στο Camino. Να σημειωθεί ότι η τροποποίηση της σήμανσης μέσω αρχείου εντολών μπορεί να προκαλέσει μη αναμενόμενη συμπεριφορά στα προγράμματα ανάγνωσης οθόνης που χρησιμοποιούν έναν οπτικό δείκτη.
Σκοπός αυτής της τεχνικής είναι η επίδειξη του τρόπου παροχής πρόσβασης πληκτρολογίου σε ένα στοιχείο ελέγχου διεπαφής χρήστη που υλοποιείται από ενέργειες σε στατικά στοιχεία HTML, όπως div
ή span
. Αυτή η τεχνική διασφαλίζει ότι το στοιχείο έχει δυνατότητα σήμανσης με ρύθμιση της παραμέτρου tabindex
και διασφαλίζει ότι η ενέργεια μπορεί να ενεργοποιηθεί από το πληκτρολόγιο με παροχή μιας ρουτίνας χειρισμού onkeyup
ή onkeypress
, επιπλέον μιας λειτουργίας διαχείρισης onclick
.
Όταν η παράμετρος tabindex
έχει την τιμή 0, το στοιχείο μπορεί να επισημανθεί μέσω του πληκτρολογίου και περιλαμβάνεται στη σειρά στηλοθέτησης του εγγράφου. Όταν η παράμετρος tabindex
έχει την τιμή -1, το στοιχείο δεν παρέχει δυνατότητα μετακίνησης σε αυτό με το πλήκτρο tab, αλλά μπορεί να οριστεί σήμανση μέσω προγραμματισμού, χρησιμοποιώντας το element.focus()
.
Καθώς τα στατικά στοιχεία HTML δεν έχουν συσχετισμένες ενέργειες με αυτά, δεν είναι δυνατή η παροχή εφεδρικής υλοποίησης ή επεξήγησης σε περιβάλλοντα στα οποία η δημιουργία αρχείων εντολών δεν είναι διαθέσιμη. Αυτή η τεχνική θα πρέπει να χρησιμοποιείται μόνο σε περιβάλλοντα στα οποία μόνο η δημιουργία αρχείων εντολών στην πλευρά του πελάτη είναι αξιόπιστη.
Σημείωση: Τέτοια στοιχεία ελέγχου διεπαφής χρήστη πρέπει επίσης να ικανοποιούν το κριτήριο επιτυχίας 4.1.2. Η εφαρμογή αυτής της τεχνικής χωρίς επίσης την παροχή πληροφοριών ρόλου, ονόματος και κατάστασης σχετικά με το στοιχείο ελέγχου διεπαφής χρήστη, θα οδηγήσει στην Αποτυχία Α59 του κριτηρίου επιτυχίας 4.1.2 λόγω χρήσης αρχείου εντολών για να καταστεί το div ή span στοιχείο ελέγχου δεπαφής χρήστη στην HTML.
Στο στοιχείο div
της σελίδας αποδίδεται μία μοναδική παράμετρος id
και μία παράμετρος tabindex
με τιμή 0. Ένα αρχείο εντολών χρησιμοποιεί το Μοντέλο αντικειμένου εγγράφου (DOM) για τον εντοπισμό του στοιχείου div
μέσω του αναγνωριστικού του και για να προσθέσει τη ρουτίνα χειρισμού onclick
και τη ρουτίνα χειρισμού onkeyup
. Η ρουτίνα χειρισμού onkeyup
θα καλέσει την ενέργεια όταν πατηθεί το πλήκτρο Enter. Να σημειωθεί ότι το στοιχείο div
πρέπει να φορτωθεί στο DOM πριν καταστεί δυνατός ο εντοπισμός και η τροποποίησή του. Αυτό συνήθως επιτυγχάνεται καλώντας το αρχείο εντολών από το συμβάν onload
του στοιχείου body
. Το αρχείο εντολών προσθήκης ρουτίνων χειρισμού συμβάντων θα εκτελεστεί μόνον εάν ο πράκτορας χρήστη υποστηρίζει και έχει ενεργοποιημένο το JavaScript.
Παράδειγμα κώδικα:
...
<script type="text/javascript">
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
//return false from the function to make certain that the href of the link does not get invoked
return false;
}
// this is the function to perform the action when the Enter key has been pressed.
function doSomethingOnEnter(event) {
var key = 0;
// Determine the key pressed, depending on whether window.event or the event object is in use
if (window.event) {
key = window.event.keyCode;
} else if (event) {
key = event.keyCode;
}
// Was the Enter key pressed?
if (key == 13) {
return doSomething(event);
}
// The event has not been handled, so return true
return true;
}
// This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing
// div element. This function must be called after the div element with id="active" has been loaded into the DOM.
// In this example the setUpActions() function is called from the onload event for the body element.
function setUpActions() {
// get the div object
var active=document.getElementById("active");
// assign the onclick handler to the object.
// It is important to return false from the onclick handler to prevent the href attribute
// from being followed after the function returns.
active.onclick=doSomething;
// assign the onkeyup handler to the object.
active.onkeyup=doSomethingOnEnter;
}
</script>
<body onload="setUpActions();">
<p>Here is the link to modify with a javascript action:</p>
<div>
<span id="active" tabindex="0">Do Something</span>
</div>
<div id="message">Hello, world!</div>
...
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: Δημιουργία div με ενέργειες χρησιμοποιώντας JavaScript (Creating Divs with Actions using JavaScript).
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Αρχεία εντολών" (Scripts)
HTML 4.01 "Επισήμανση ενός στοιχείου" (Giving focus to an element)
Προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου (WAI-ARIA) Έκδοση 1.0, "Καθολικές καταστάσεις και ιδιότητες" (Global States and Properties)
WAI-ARIA Primer, "Πρόβλεψη πληκτρολογίου ή σήμανσης εισαγωγής δεδομένων" (Provision of the keyboard or input focus)
"Υποστήριξη Firefox για ARIA: Προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου" (Firefox support for ARIA: Accessible Rich Internet Applications)
Σε έναν πράκτορα χρήστη που υποστηρίζει δημιουργία αρχείων εντολών:
Κάντε κλικ στο στοιχείο ελέγχου με το ποντίκι
Ελέγξτε ότι η ενέργεια δημιουργίας αρχείων εντολών εκτελείται σωστά
Ελέγξτε ότι είναι εφικτή η πλοήγηση προς το στοιχείο ελέγχου και η επισήμανση αυτού μέσω του πληκτρολογίου
Ορίστε σήμανση πληκτρολογίου στο στοιχείο ελέγχου
Ελέγξτε ότι πατώντας το πλήκτρο ENTER καλείται η ενέργεια δημιουργίας αρχείων εντολών.
Όλοι οι έλεγχοι είναι αληθείς.
Δημιουργία αρχείων εντολών στην πλευρά του πελάτη που χρησιμοποιείται με HTML και XHTML
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέπει στους χρήστες την επιλογή προσθήκης πρόσθετων πληροφοριών στο κείμενο συνδέσμων, ώστε οι σύνδεσμοι να μπορούν να είναι κατανοητοί εκτός περιβάλλοντος.
Ορισμένοι χρήστες προτιμούν συνδέσμους που είναι αυτόνομοι, όπου δεν υπάρχει ανάγκη εξερεύνησης του περιβάλλοντος του συνδέσμου. Άλλοι χρήστες κρίνουν ότι η συμπερίληψη πληροφοριών περιβάλλοντος σε κάθε σύνδεσμο είναι επαναλαμβανόμενη και μειώνει την ικανότητα τους χρήσης ενός τόπου. Μεταξύ χρηστών υποστηρικτικής τεχνολογίας, τα σχόλια για την ομάδα εργασίας που προτιμάται είναι διίστανται. Αυτή η τεχνική επιτρέπει στους χρήστες να επιλέγουν την προσέγγιση που τους εξυπηρετεί καλύτερα.
Ένας σύνδεσμος παρέχεται κοντά στην αρχή της σελίδας που θα επεκτείνει το κείμενο συνδέσμου των συνδέσμων στη σελίδα, ώστε να μην είναι απαραίτητο κανένα πρόσθετο περιβάλλον για την κατανόηση του σκοπού οποιουδήποτε συνδέσμου. Πρέπει να είναι πάντα εφικτή η κατανόηση του σκοπού του συνδέσμου επέκτασης απευθείας από το κείμενο συνδέσμου του.
Αυτή η τεχνική επεκτείνει τους συνδέσμους μόνο για την τρέχουσα προβολή σελίδας. Είναι επίσης δυνατή και σε ορισμένες περιπτώσεις συνίσταται, η αποθήκευση αυτής της προτίμησης σε ένα cookie ή προφίλ χρήστη στην πλευρά του διακομιστή, ώστε οι χρήστες να χρειάζεται να κάνουν την επιλογή μόλις μία φορά ανά τόπο.
Αυτό το παράδειγμα χρησιμοποιεί Javascript για να προσθέσει πληροφορίες περιβάλλοντος απευθείας στο κείμενο ενός συνδέσμου. Η κλάση συνδέσμου χρησιμοποιείται για να καθοριστεί ποιο πρόσθετο κείμενο θα προστεθεί. Όταν ο σύνδεσμος "Επέκταση συνδέσμων" ενεργοποιηθεί, κάθε σύνδεσμος στη σελίδα θα ελεγχθεί για να διαπιστωθεί εάν πρόσθετο κείμενο πρέπει να προστεθεί.
Παράδειγμα κώδικα:
...
<script>
var linkContext = {
"hist":" version of The History of the Web",
"cook":" version of Cooking for Nerds"
};
function doExpand() {
var links = document.links;
var link;
for (link in links) {
var cn = links[link].className;
if (linkContext[cn]) {
links[link].appendChild(document.createTextNode(linkContext[cn]));
}
}
}
</script>
<h1>Books for download</h1>
<p><a href="#" onclick="doExpand();">Expand Links</a></p>
<ul>
<li>The History of the Web:
<a href="history.docx" class="hist">Word</a>,
<a href="history.pdf" class="hist">PDF</a>,
<a href="history.html" class="hist">HTML</a>
</li>
<li>Cooking for Nerds:
<a href="history.docx" class="cook">Word</a>,
<a href="history.pdf" class="cook">PDF</a>,
<a href="history.html" class="cook">HTML</a>
</li>
</ul>
...
Ελέγξτε ότι υπάρχει ένας σύνδεσμος κοντά στην αρχή της σελίδας για την επέκταση συνδέσμων
Εάν ο σύνδεσμος προσδιορίζεται στο βήμα 1 ως ένας σύνδεσμος, ελέγξτε ότι μπορεί να προσδιοριστεί από το κείμενο συνδέσμου μόνο
Εντοπίστε οποιουσδήποτε συνδέσμους στη σελίδα που δεν μπορούν να προσδιοριστούν από το κείμενο συνδέσμου μόνο
Ενεργοποιήστε το στοιχείο ελέγχου που προσδιορίζεται στο βήμα 1
Ελέγξτε ότι ο σκοπός των συνδέσμων που προσδιορίζονται στο βήμα 3 μπορεί τώρα να προσδιοριστεί από το κείμενο συνδέσμου μόνο
Οι έλεγχοι #1, #2 και #5 είναι αληθείς
HTML και XHTML, CSS, αρχείο εντολών
Αυτή η τεχνική σχετίζεται με:
Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε πράκτορες χρήστη που δεν υποστηρίζουν την ψευδο-κλάση :focus
, αλλά υποστηρίζουν αρχεία εντολών, συμπεριλαμβανομένου του Microsoft Internet Explorer.
Σκοπός αυτής της τεχνικής είναι να επιτρέψει στον συγγραφέα να χρησιμοποιήσει JavaScript για την εφαρμογή CSS, προκειμένου να καταστήσει περισσότερο ορατό τον δείκτη σήμανσης από ότι είναι αρχικά. Όταν επισημαίνεται ένα στοιχείο, το χρώμα παρασκηνίου ή το περίγραμμα αλλάζει για να γίνει περισσότερο διακριτό οπτικά. Όταν το στοιχείο παύει να επισημαίνεται, επιστρέφει στο φυσιολογικό του στυλ. Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε κάθε πράκτορα χρήστη HTML που υποστηρίζει αρχεία εντολών και CSS, ανεξάρτητα από το εάν υποστηρίζει ψευδο-κλάση :focus.
Στο παράδειγμα αυτό, όταν επισημαίνεται ο σύνδεσμος το υπόβαθρό του γίνεται κίτρινο. Όταν καταργείται η σήμανση, καταργείται και το κίτρινο χρώμα. Να σημειωθεί ότι εάν ο σύνδεσμος είχε χρώμα παρασκηνίου εξαρχής, θα χρησιμοποιούσατε αυτό το χρώμα αντί για "" στο αρχείο εντολών.
Παράδειγμα κώδικα:
...
<script>
function toggleFocus(el)
{
el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
}
</script>
...
<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
...
Μετακινηθείτε με το πλήκτρο tab σε κάθε στοιχείο της σελίδας
Ελέγξτε ότι είναι ορατός ο ενδείκτης σήμανσης
Το βήμα #2 είναι αληθές
Αρχείο εντολών που χρησιμοποιείται με HTML ή XHTML.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιδείξει την προβολή ενός μηνύματος σφάλματος όταν έχει αποτύχει η επαλήθευση ενός πεδίου φόρμας στην πλευρά του πελάτη. Στοιχεία anchor χρησιμοποιούνται για την προβολή των μηνυμάτων σφάλματος σε μια λίστα και εισάγονται πάνω από τα πεδία προς επαλήθευση. Στοιχεία anchor χρησιμοποιούνται στα μηνύματα σφάλματος ώστε η σήμανση να μπορεί να τοποθετηθεί στα μηνύματα σφάλματος, τραβώντας την προσοχή του χρήστη σε αυτά. Το href
των στοιχείων anchor περιέχει έναν σύνδεσμο σελίδας, ο οποίος παραπέμπει στα πεδία όπου μπορούν να εντοπιστούν τα πεδία.
Σε μια ανεπτυγμένη εφαρμογή, εάν απενεργοποιηθεί η Javascript, δεν θα προκύψει επικύρωση στην πλευρά του πελάτη. Επομένως, αυτή η τεχνική θα αρκεί μόνο σε περιπτώσεις όπου η δημιουργία αρχείου εντολών αποτελεί βάση για συμμόρφωση ή όταν οι τεχνικές επικύρωσης στην πλευρά του πελάτη χρησιμοποιούνται επίσης για τον εντοπισμό κάθε σφαλμάτων και την επιστροφή στη σελίδα με πληροφορίες σχετικά με τα πεδία με σφάλματα.
Αυτό το παράδειγμα επικυρώνει απαιτούμενα πεδία, καθώς και πεδία όπου απαιτείται μια συγκεκριμένη μορφή. Όταν προσδιορίζεται ένα σφάλμα, το αρχείο εντολών εισάγει μια λίστα μηνυμάτων σφάλματος στο DOM και μεταφέρει σε αυτά τη σήμανση.
Κώδικας HTML και Javascript
Ακολουθεί η HTML για το παράδειγμα φόρμας:
Παράδειγμα κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/validate.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="scripts/validate.js"/>
</head>
<body>
<h1>Form Validation</h1>
<p>The following form is validated before being submitted if scripting is available,
otherwise the form is validated on the server. All fields are required, except those
marked optional. If errors are found in the submission, the form is cancelled and
a list of errors is displayed at the top of the form.</p>
<p> Please enter your details below. </p>
<h2>Validating Form</h2>
<form id="personalform" method="post" action="index.php">
<div class="validationerrors"/>
<fieldset>
<legend>Personal Details</legend>
<p>
<label for="forename">Please enter your forename</label>
<input type="text" size="20" name="forename" id="forename" class="string"
value=""/>
</p>
<p>
<label for="age">Please enter your age</label>
<input type="text" size="20" name="age" id="age" class="number" value=""/>
</p>
<p>
<label for="email">Please enter your email address</label>
<input type="text" size="20" name="email" id="email" class="email" value=""/>
</p>
</fieldset>
<p>
<input type="submit" name="signup" value="Sign up"/>
</p>
</form>
<h2>Second Form</h2>
<form id="secondform" method="post" action="index.php#focuspoint">
<div class="validationerrors"/>
<fieldset>
<legend>Second Form Details</legend>
<p>
<label for="suggestion">Enter a suggestion</label>
<input type="text" size="20" name="suggestion" id="suggestion"
class="string" value=""/>
</p>
<p>
<label for="optemail">Please enter your email address (optional)</label>
<input type="text" size="20" name="optemail" id="optemail"
class="optional email" value=""/>
</p>
<p>
<label for="rating">Please rate this suggestion</label>
<input type="text" size="20" name="rating" id="rating"
class="number" value=""/>
</p>
<p>
<label for="jibberish">Enter some jibberish (optional)</label>
<input type="text" size="20" name="jibberish" id="jibberish" value=""/>
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Add Suggestion"/>
</p>
</form>
</body>
</html>
Ακολουθεί το Javascript που εκτελεί την επικύρωση και εισάγει τα μηνύματα σφάλματος:
Παράδειγμα κώδικα:
window.onload = initialise;
function initialise()
{
var objForms = document.getElementsByTagName('form');
var iCounter;
// Attach an event handler for each form
for (iCounter=0; iCounter<objForms.length; iCounter++)
{
objForms[iCounter].onsubmit = function(){return validateForm(this);};
}
}
// Event handler for the form
function validateForm(objForm)
{
var arClass = [];
var iErrors = 0;
var objField = objForm.getElementsByTagName('input');
var objLabel = objForm.getElementsByTagName('label');
var objList = document.createElement('ol');
var objError, objExisting, objNew, objTitle, objParagraph, objAnchor, objPosition;
var strLinkID, iFieldCounter, iClassCounter, iCounter;
// Get the id or name of the form, to make a unique
// fragment identifier
if (objForm.id)
{
strLinkID = objForm.id + 'ErrorID';
}
else
{
strLinkID = objForm.name + 'ErrorID';
}
// Iterate through input form controls, looking for validation classes
for (iFieldCounter=0; iFieldCounter<objField.length; iFieldCounter++)
{
// Get the class for the field, and look for the appropriate class
arClass = objField[iFieldCounter].className.split(' ');
for (iClassCounter=0; iClassCounter<arClass.length; iClassCounter++)
{
switch (arClass[iClassCounter])
{
case 'string':
if (!isString(objField[iFieldCounter].value, arClass))
{
if (iErrors === 0)
{
logError(objField[iFieldCounter], objLabel, objList, strLinkID);
}
else
{
logError(objField[iFieldCounter], objLabel, objList, '');
}
iErrors++;
}
break;
case 'number':
if (!isNumber(objField[iFieldCounter].value, arClass))
{
if (iErrors === 0)
{
logError(objField[iFieldCounter], objLabel, objList, strLinkID);
}
else
{
logError(objField[iFieldCounter], objLabel, objList, '');
}
iErrors++;
}
break;
case 'email' :
if (!isEmail(objField[iFieldCounter].value, arClass))
{
if (iErrors === 0)
{
logError(objField[iFieldCounter], objLabel, objList, strLinkID);
}
else
{
logError(objField[iFieldCounter], objLabel, objList, '');
}
iErrors++;
}
break;
}
}
}
if (iErrors > 0)
{
// If not valid, display error messages
objError = objForm.getElementsByTagName('div');
// Look for existing errors
for (iCounter=0; iCounter<objError.length; iCounter++)
{
if (objError[iCounter].className == 'validationerrors')
{
objExisting = objError[iCounter];
}
}
objNew = document.createElement('div');
objTitle = document.createElement('h2');
objParagraph = document.createElement('p');
objAnchor = document.createElement('a');
if (iErrors == 1)
{
objAnchor.appendChild(document.createTextNode('1 Error in Submission'));
}
else
{
objAnchor.appendChild(document.createTextNode(iErrors + ' Errors in Submission'));
}
objAnchor.href = '#' + strLinkID;
objAnchor.className = 'submissionerror';
objTitle.appendChild(objAnchor);
objParagraph.appendChild(document.createTextNode('Please review the following'));
objNew.className = 'validationerrors';
objNew.appendChild(objTitle);
objNew.appendChild(objParagraph);
objNew.appendChild(objList);
// If there were existing error, replace them with the new lot,
// otherwise add the new errors to the start of the form
if (objExisting)
{
objExisting.parentNode.replaceChild(objNew, objExisting);
}
else
{
objPosition = objForm.firstChild;
objForm.insertBefore(objNew, objPosition);
}
// Allow for latency
setTimeout(function() { objAnchor.focus(); }, 50);
// Don't submit the form
objForm.submitAllowed = false;
return false;
}
// Submit the form
return true;
}
// Function to add a link in a list item that points to problematic field control
function addError(objList, strError, strID, strErrorID)
{
var objListItem = document.createElement('li');
var objAnchor = document.createElement('a');
// Fragment identifier to the form control
objAnchor.href='#' + strID;
// Make this the target for the error heading
if (strErrorID.length > 0)
{
objAnchor.id = strErrorID;
}
// Use the label prompt for the error message
objAnchor.appendChild(document.createTextNode(strError));
// Add keyboard and mouse events to set focus to the form control
objAnchor.onclick = function(event){return focusFormField(this, event);};
objAnchor.onkeypress = function(event){return focusFormField(this, event);};
objListItem.appendChild(objAnchor);
objList.appendChild(objListItem);
}
function focusFormField(objAnchor, objEvent)
{
var strFormField, objForm;
// Allow keyboard navigation over links
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
{
return true;
}
}
// set focus to the form control
strFormField = objAnchor.href.match(/[^#]\w*$/);
objForm = getForm(strFormField);
objForm[strFormField].focus();
return false;
}
// Function to return the form element from a given form field name
function getForm(strField)
{
var objElement = document.getElementById(strField);
// Find the appropriate form
do
{
objElement = objElement.parentNode;
} while (!objElement.tagName.match(/form/i) && objElement.parentNode);
return objElement;
}
// Function to log the error in a list
function logError(objField, objLabel, objList, strErrorID)
{
var iCounter, strError;
// Search the label for the error prompt
for (iCounter=0; iCounter<objLabel.length; iCounter++)
{
if (objLabel[iCounter].htmlFor == objField.id)
{
strError = objLabel[iCounter].firstChild.nodeValue;
}
}
addError(objList, strError, objField.id, strErrorID);
}
// Validation routines - add as required
function isString(strValue, arClass)
{
var bValid = (typeof strValue == 'string' && strValue.replace(/^\s*|\s*$/g, '')
!== '' && isNaN(strValue));
return checkOptional(bValid, strValue, arClass);
}
function isEmail(strValue, arClass)
{
var objRE = /^[\w-\.\']{1,}\@([\da-zA-Z\-]{1,}\.){1,}[\da-zA-Z\-]{2,}$/;
var bValid = objRE.test(strValue);
return checkOptional(bValid, strValue, arClass);
}
function isNumber(strValue, arClass)
{
var bValid = (!isNaN(strValue) && strValue.replace(/^\s*|\s*$/g, '') !== '');
return checkOptional(bValid, strValue, arClass);
}
function checkOptional(bValid, strValue, arClass)
{
var bOptional = false;
var iCounter;
// Check if optional
for (iCounter=0; iCounter<arClass.length; iCounter++)
{
if (arClass[iCounter] == 'optional')
{
bOptional = true;
}
}
if (bOptional && strValue.replace(/^\s*|\s*$/g, '') === '')
{
return true;
}
return bValid;
}
Ορίστε ένα λειτουργικό παράδειγμα αυτής της τεχνικής που υλοποιείται μέσω PHP, Javascript, CSS και XHTML: "Παράδειγμα επικύρωσης φόρμας" (Form Validation Example).
Δημιουργήστε μηνύματα σφάλματος χρησιμοποιώντας ετικέτες anchor και κατάλληλα αρχεία εντολών μέσω της παραπάνω τεχνικής.
Φορτώστε τη σελίδα.
Εισάγετε μια έγκυρη τιμή στα πεδία που σχετίζονται με ένα μήνυμα σφάλματος και επαληθεύστε ότι δεν προβάλλονται μηνύματα σφάλματος.
Εισάγετε μια έγκυρη τιμή στα πεδία που σχετίζονται με ένα μήνυμα σφάλματος και επαληθεύστε ότι προβάλλεται το σωστό μήνυμα σφάλματος για το πεδίο.
Επαληθεύστε ότι τα μηνύματα σφάλματος επισημαίνονται.
Εισάγετε μια έγκυρη τιμή στα πεδία που σχετίζονται με το προβαλλόμενο μήνυμα σφάλματος και επαληθεύστε ότι καταργείται αυτό το μήνυμα σφάλματος.
Επαναλάβετε για όλα τα πεδία με συσχετισμένα μηνύματα σφάλματος που έχουν δημιουργηθεί με ετικέτες anchor.
Σημείωση: Συνίσταται επίσης να εκτελέσετε την παραπάνω διαδικασία χρησιμοποιώντας μια υποστηρικτική τεχνολογία.
Οι έλεγχοι #2, #3, #4 και #5 είναι όλοι αληθείς.
Τεχνολογίες που υποστηρίζουν κύλιση του περιεχόμενου ελεγχόμενο από αρχείο εντολών.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου διακοπής της κύλισης περιεχομένου για τους χρήστες, όταν η κύλιση οφείλεται σε ένα αρχείο εντολών. Η κύλιση περιεχομένου μπορεί να καθιστά δύσκολη ή αδύνατη την ανάγνωση από χρήστες με χαμηλή όραση ή νοητικές αναπηρίες. Η κίνηση μπορεί επίσης να αποσπά την προσοχή ορισμένων ατόμων, καθιστώντας δύσκολη τη συγκέντρωσή τους σε άλλα τμήματα της Ιστοσελίδας.
Σε αυτό το παράδειγμα, χρησιμοποιούνται CSS και Javascript για την οπτική παρουσίαση ορισμένου κειμένου σε μια κυλιόμενη μορφή. Συμπεριλαμβάνεται ένας σύνδεσμος για την παύση της κίνησης κύλισης.
Αυτή η υλοποίηση θα εμφανίσει το πλήρες κείμενο και θα παραλείψει τον σύνδεσμο όταν δεν υποστηρίζεται ή είναι ανενεργή η Javascript ή το CSS.
Ο παρακάτω κώδικας είναι μια τροποποιημένη έκδοση του Accessible Scroller της webSemantic (από τον Ιούλιο του 2008).
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
...
<div id="scroller">
<p id="tag">This text will scroll and a Pause/Scroll link will be present
when Javascript and CSS are supported and active.</p>
</div>
...
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
...
body {font:1em verdana,sans-serif; color:#000; margin:0}
/* position:relative and overflow:hidden are required */
#scroller { position:relative; overflow:hidden; width:15em; border:1px solid #008080; }
/* add formatting for the scrolling text */
#tag { margin:2px 0; }
/* #testP must also contain all text-sizing properties of #tag */
#testP { visibility:hidden; position:absolute; white-space:nowrap; }
/* used as a page top marker and to limit width */
#top { width:350px; margin:auto; }
...
Το συστατικό στοιχείο JavaScript:
Παράδειγμα κώδικα:
var speed=50 // speed of scroller
var step=3 // smoothness of movement
var StartActionText= "Scroll" // Text for start link
var StopActionText = "Pause" // Text for stop link
var x, scroll, divW, sText=""
function onclickIE(idAttr,handler,call){
if ((document.all)&&(document.getElementById)){idAttr[handler]="Javascript:"+call}
}
function addLink(id,call,txt){
var e=document.createElement('a')
e.setAttribute('href',call)
var linktext=document.createTextNode(txt)
e.appendChild(linktext)
document.getElementById(id).appendChild(e)
}
function getElementStyle() {
var elem = document.getElementById('scroller');
if (elem.currentStyle) {
return elem.currentStyle.overflow;
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, '');
return compStyle.getPropertyValue("overflow");
}
return "";
}
function addControls(){
// test for CSS support first
// test for the overlow property value set in style element or external file
if (getElementStyle()=="hidden") {
var f=document.createElement('div');
f.setAttribute('id','controls');
document.getElementById('scroller').parentNode.appendChild(f);
addLink('controls','Javascript:clickAction(0)',StopActionText);
onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
document.getElementById('controls').style.display='block';
}
}
function stopScroller(){clearTimeout(scroll)}
function setAction(callvalue,txt){
var c=document.getElementById('controls')
c.childNodes[0].setAttribute('href','Javascript:clickAction('+callvalue+')')
onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction
('+callvalue+')')
c.childNodes[0].firstChild.nodeValue=txt
}
function clickAction(no){
switch(no) {
case 0:
stopScroller();
setAction(1,StartActionText);
break;
case 1:
startScroller();
setAction(0,StopActionText);
}
}
function startScroller(){
document.getElementById('tag').style.whiteSpace='nowrap'
var p=document.createElement('p')
p.id='testP'
p.style.fontSize='25%' //fix for mozilla. multiply by 4 before using
x-=step
if (document.getElementById('tag').className) p.className=document.getElementById
('tag').className
p.appendChild(document.createTextNode(sText))
document.body.appendChild(p)
pw=p.offsetWidth
document.body.removeChild(p)
if (x<(pw*4)*-1){x=divW}
document.getElementById('tag').style.left=x+'px'
scroll=setTimeout('startScroller()',speed)
}
function initScroller(){
if (document.getElementById && document.createElement && document.body.appendChild) {
addControls();
divW=document.getElementById('scroller').offsetWidth;
x=divW;
document.getElementById('tag').style.position='relative';
document.getElementById('tag').style.left=divW+'px';
var ss=document.getElementById('tag').childNodes;
for (i=0;i<ss.length;i++) {sText+=ss[i].nodeValue+" "};
scroll=setTimeout('startScroller()',speed);
}
}
function addLoadEvent(func) {
if (!document.getElementById | !document.getElementsByTagName) return
var oldonload = window.onload
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload()
func()
}
}
}
addLoadEvent(initScroller)
Ένα λειτουργικό παράδειγμα αυτού του κώδικα είναι διαθέσιμο, "Παράδειγμα χρήσης αρχείου εντολών για την κύλιση περιεχομένου και παροχή ενός μηχανισμού για την παύση του" (Example of using script to scroll content and providing a mechanism to pause it).
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε ότι ένας μηχανισμός παρέχεται για την παύση του περιεχομένου σε κύλιση.
Χρησιμοποιήστε τον μηχανισμό παύσης για να σταματήσετε το περιεχόμενο σε κύλιση.
Ελέγξτε ότι η κύλιση σταμάτησε και δεν ξεκινά από μόνη της εκ νέου.
Ελέγξτε ότι ένας μηχανισμός παρέχεται για την επανεκκίνησης του περιεχομένου που είναι σε παύση.
Χρησιμοποιήστε τον μηχανισμό επανεκκίνησης που παρέχεται για να ξεκινήσει εκ νέου το περιεχόμενο σε κύλιση.
Ελέγξτε ότι η κύλιση έχει ξεκινήσει εκ νέου από το σημείο όπου είχε σταματήσει.
Οι έλεγχοι #3 και #6 είναι αληθείς.
Δημιουργία αρχείων εντολών στην πλευρά του πελάτη
Αυτή η τεχνική σχετίζεται με:
Ο υπολογισμός μεγέθους και θέσης μπορεί να είναι σύνθετος και διαφορετικά προγράμματα περιήγησης μπορεί να παράγουν διαφορετικά αποτελέσματα. Αυτό μπορεί να συμβεί όταν η δημιουργία στυλ CSS αναμειγνύει αποστάσεις, περιθώρια και πλάτη για ένα αντικείμενο ή όταν αναμειγνύει μια μετατόπιση (offset) και απλή τιμή, π.χ. offsetWidth και width. Ορισμένα από τα παραπάνω συμπεριφέρονται διαφορετικά στη λειτουργία μεγέθυνσης. Δείτε την ενότητα "MSDN: Διόρθωση του προβλήματος αντί για πρωτότυπες σκέψεις" (MSDN: Fix the Box Instead of Thinking Outside It) για μια εξήγηση για τον τρόπο που το Internet Explorer 6 και νεότερες εκδόσεις διαφέρουν από προηγούμενες εκδόσεις του Internet Explorer.
Σκοπός αυτής της τεχνικής είναι ο υπολογισμός του μεγέθους και της θέσης των στοιχείων με τρόπο που θα κλιμακώνεται κατάλληλα καθώς κλιμακώνεται το μέγεθος κειμένου.
Υπάρχουν τέσσερις ιδιότητες στην Javascript που βοηθούν στον προσδιορισμό του μεγέθους και της θέσης των στοιχείων:
offsetHeight
(το ύψος του στοιχείου σε pixel)
offsetWidth
(το πλάτος του στοιχείου σε pixel)
offsetLeft
(η απόσταση του στοιχείου από την αριστερή πλευρά του γονέα (offsetParent) σε pixel)
offsetTop
(η απόσταση του στοιχείου από την κορυφή του γονέα του (offsetParent) σε pixel)
Ο υπολογισμός του ύψους και πλάτους χρησιμοποιώντας τα offsetHeight
και offsetWidth
είναι απλός, αλλά όταν υπολογίζεται η αριστερή και άνω θέση ενός αντικειμένου ως απόλυτες τιμές, χρειάζεται να εξετάσουμε το γονικό στοιχείο. Η παρακάτω λειτουργία calculatePosition
επαναλαμβάνεται μέσω όλων των γονικών κόμβων ενός στοιχείου, ώστε να αποδώσει μια τελική τιμή. Η λειτουργία λαμβάνει δύο παραμέτρους, την objElement
(το όνομα του εν λόγω στοιχείου) και την ιδιότητα μετατόπισης (offsetLeft
ή offsetTop
):
Η λειτουργία Javascript:
Παράδειγμα κώδικα:
function calculatePosition(objElement, strOffset)
{
var iOffset = 0;
if (objElement.offsetParent)
{
do
{
iOffset += objElement[strOffset];
objElement = objElement.offsetParent;
} while (objElement);
}
return iOffset;
}
Το παρακάτω παράδειγμα δείχνει τη χρήση της παραπάνω λειτουργίας μέσω ευθυγράμμισης ενός αντικειμένου κάτω από ένα αντικείμενο παραπομπής, στην ίδια απόσταση από τα αριστερά:
Παράδειγμα κώδικα:
// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px';
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ανοίξτε μια σελίδα που σχεδιάζεται για ρύθμιση των μεγεθών κοντέινερ παράλληλα με την αλλαγή του μεγέθους κειμένου.
Αυξήστε το μέγεθος κειμένου έως και 200%, χρησιμοποιώντας τη ρύθμιση μεγέθους κειμένου του προγράμματος περιήγησης (όχι το χαρακτηριστικό μεγέθυνσης).
Εξετάστε το κείμενο ώστε να διασφαλίσετε ότι το μέγεθος κοντέινερ κειμένου ρυθμίζεται για να εξυπηρετήσει το μέγεθος του κειμένου.
Διασφαλίστε ότι δεν πραγματοποιείται περικοπή σε κανένα κείμενο ή έχει εξαφανιστεί ως αποτέλεσμα της αύξησης στο μέγεθος κειμένου.
Οι έλεγχοι #3 και #4 είναι αληθείς.
Αρχείο εντολών που χρησιμοποιείται με HTML ή XHTML.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η επίδειξη του τρόπου κλήσης μιας λειτουργίας δημιουργίας αρχείου εντολών με τρόπο που είναι προσβάσιμος από πληκτρολόγιο, μέσω σύνδεσης αυτής σε ένα στοιχείο ελέγχου που είναι προσβάσιμο από πληκτρολόγιο. Προκειμένου να διασφαλιστεί ότι οι ενέργειες αρχείου εντολών μπορούν να κληθούν μέσω του πληκτρολογίου, αντιστοιχίζονται με στοιχεία HTML "εγγενών ενεργοποιήσιμα" (σύνδεσμοι και κουμπιά). Το συμβάν onclick αυτών των στοιχείων είναι ανεξάρτητο συσκευών. Αν και η ονομασία του συμβάντος onclick παραπέμπει στη χρήση ποντικιού, στην πραγματικότητα αντιστοιχεί στην προεπιλεγμένη ενέργεια ενός συνδέσμου ή κουμπιού. Η προεπιλεγμένη ενέργεια προκύπτει όταν ο χρήστης κάνει κλικ στο στοιχείο με ένα ποντίκι, αλλά επίσης και όταν ο χρήστης επισημαίνει το στοιχείο και πατά το πλήκτρο enter ή space και όταν το στοιχείο ενεργοποιείται μέσω του API προσβασιμότητας.
Αν και αυτή η τεχνική βασίζεται στη δημιουργία αρχείου εντολών στην πλευρά του πελάτη, είναι ωφέλιμη η παροχή εφεδρικής υλοποίησης ή επεξήγησης για περιβάλλοντα στα οποία δεν είναι διαθέσιμη η δημιουργία αρχείου εντολών. Όταν χρησιμοποιούνται στοιχεία anchor για την κλήση μιας ενέργειας JavaScript, παρέχεται μια εφεδρική υλοποίηση ή επεξήγηση μέσω της παραμέτρου href
. Όταν χρησιμοποιούνται κουμπιά, παρέχεται μέσω μιας δημοσίευσης φόρμας.
Σύνδεσμος που εκτελεί ένα αρχείο εντολών και δεν έχει εφεδρεία για προγράμματα περιήγησης χωρίς αρχεία εντολών. Αυτή η προσέγγιση θα πρέπει να χρησιμοποιείται μόνο όταν το αρχείο εντολών βασίζεται σε μια Τεχνολογία υποστήριξης προσβασιμότητας.
Αν και δεν επιθυμούμε την πλοήγηση από αυτόν τον σύνδεσμο, πρέπει να χρησιμοποιήσουμε την παράμετρο href στο στοιχείο a
, προκειμένου να καταστήσουμε αυτόν τον σύνδεσμο αληθή και να λάβουμε τα κατάλληλα συμβάντα. Στην περίπτωση αυτή, χρησιμοποιούμε το '#' ως τον σύνδεσμο-στόχο, αλλά μπορείτε να χρησιμοποιήσετε οτιδήποτε άλλο. Δεν θα πραγματοποιηθεί ποτέ πλοήγηση σε αυτόν τον σύνδεσμο.
Το "return false;" στο τέλος της λειτουργίας διαχείρισης συμβάντος doStuff() ενημερώνει το πρόγραμμα περιήγησης για να μην πλοηγηθεί στο URI. Χωρίς αυτό, η σελίδα θα ανανεωθεί ύστερα από την εκτέλεση του αρχείου εντολών.
Παράδειγμα κώδικα:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a>
Σύνδεσμος που εκτελεί αρχείο εντολών, αλλά πλοηγείται σε άλλη σελίδα όταν δεν είναι διαθέσιμο το αρχείο εντολών. Αυτή η προσέγγιση μπορεί να χρησιμοποιηθεί από τόπους που δεν βασίζονται σε αρχείο εντολών, εάν και μόνο αν ο στόχος πλοήγησης παρέχει την ίδια λειτουργικότητα με το αρχείο εντολών. Αυτό το παράδειγμα είναι πανομοιότυπο του παραδείγματος 1, με την εξαίρεση ότι η παράμετρος href του ορίζει τώρα μια πραγματική σελίδα, dostuff.htm. Η σελίδα dostuff.htm πρέπει να παρέχει την ίδια λειτουργικότητα με το αρχείο εντολών. Το "return false;" στο τέλος της λειτουργίας διαχείρισης συμβάντος doStuff(), ενημερώνει το πρόγραμμα περιήγησης για να μην πλοηγηθεί στο URI. Χωρίς αυτό, το πρόγραμμα περιήγησης θα πλοηγηθεί στη σελίδα dostuff.htm, ύστερα από την εκτέλεση του αρχείου εντολών.
Παράδειγμα κώδικα:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="dostuff.htm" onclick="return doStuff();">do stuff</a>
Ένα λειτουργικό παράδειγμα αυτού του κώδικα είναι διαθέσιμο. Ανατρέξτε στην ενότητα, "Δημιουργία συνδέσμων ενεργειών χρησιμοποιώντας JavaScript" (Creating Action Links using JavaScript).
Κουμπί που εκτελεί ένα αρχείο εντολών και επιστρέφει σε μια δημοσίευσης φόρμας για χρήστες χωρίς αρχείο εντολών. Αυτή η προσέγγιση μπορεί να χρησιμοποιηθεί από τόπους που δεν βασίζονται σε αρχείο εντολών, εάν και μόνο αν η δημοσίευση φόρμας παρέχει την ίδια λειτουργικότητα με το αρχείο εντολών. Το onsubmit="return false;" αποτρέπει την υποβολή της φόρμας.
Παράδειγμα κώδικα:
<script>
function doStuff()
{
//do stuff
}
</script>
<form action="doStuff.aspx" onsubmit="return false;">
<input type="submit" value="Do Stuff" onclick="doStuff();" />
</form>
Ένα λειτουργικό παράδειγμα αυτού του κώδικα είναι διαθέσιμο. Ανατρέξτε στην ενότητα, "Δημιουργία κουμπιών ενεργειών χρησιμοποιώντας JavaScript" (Creating Action Button using JavaScript).
Κουμπί που εκτελεί ένα αρχείο εντολών, υλοποιημένο με το input type="image"
. Να σημειωθεί ότι η παράμετρος title πρέπει να προστεθεί στο input
για την παροχή ενός ισοδύναμου κειμένου για την εικόνα. Αυτή η προσέγγιση θα πρέπει να χρησιμοποιηθεί μόνο όταν βασίζεστε στο αρχείο εντολών.
Παράδειγμα κώδικα:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<input type="image" src="stuff.gif" title="Do stuff" onclick="return doStuff();" />
Κουμπί που εκτελεί ένα αρχείο εντολών, υλοποιημένο με input type="submit"
, input type="reset"
ή input type="button"
. Αυτή η προσέγγιση θα πρέπει να χρησιμοποιηθεί μόνο όταν βασίζεστε στο αρχείο εντολών.
Παράδειγμα κώδικα:
<input type="submit" onclick="return doStuff();" value=â€Do Stuff†/>
Κουμπί που εκτελεί ένα αρχείο εντολών, υλοποιημένο με button
…/button
. Αυτό είναι πολύτιμο όταν επιθυμείτε περισσότερο έλεγχο επί της εμφάνισης του κουμπιού σας. Σε αυτό το συγκεκριμένο παράδειγμα, το κουμπί περιέχει τόσο ένα εικονίδιο, όσο και κάποιο κείμενο. Αυτή η προσέγγιση θα πρέπει να χρησιμοποιηθεί μόνο όταν βασίζεστε στο αρχείο εντολών.
Παράδειγμα κώδικα:
<button onclick="return doStuff();">
<img src="stuff.gif" alt="stuff icon">
Do Stuff
</button>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Για όλες τις ενέργειες αρχείου εντολών που σχετίζονται με τα στοιχεία a
, button
ή input
:
Σε έναν πράκτορα χρήστη που υποστηρίζει δημιουργία αρχείων εντολών
Κάντε κλικ στο στοιχείο ελέγχου με το ποντίκι.
Ελέγξτε ότι η ενέργεια δημιουργίας αρχείων εντολών εκτελείται σωστά.
Εάν το στοιχείο ελέγχου είναι ένα στοιχείο anchor, ελέγξτε ότι το URI στην παράμετρο href
του στοιχείου anchor δεν καλείται.
Ελέγξτε ότι είναι εφικτή η πλοήγηση προς το στοιχείο ελέγχου και η επισήμανση αυτού μέσω του πληκτρολογίου.
Ορίστε σήμανση πληκτρολογίου στο στοιχείο ελέγχου.
Ελέγξτε ότι πατώντας το πλήκτρο ENTER καλείται η ενέργεια δημιουργίας αρχείων εντολών.
Εάν το στοιχείο ελέγχου είναι ένα στοιχείο anchor, ελέγξτε ότι το URI στην παράμετρο href
του στοιχείου anchor δεν καλείται.
Σε έναν πράκτορα χρήστη που δεν υποστηρίζει δημιουργία αρχείων εντολών
Κάντε κλικ στο στοιχείο ελέγχου με το ποντίκι.
Εάν το στοιχείο ελέγχου είναι ένα στοιχείο anchor, ελέγξτε ότι το URI στην παράμετρο href
του στοιχείου anchor καλείται.
Ελέγξτε ότι είναι εφικτή η πλοήγηση προς το στοιχείο ελέγχου και η επισήμανση αυτού μέσω του πληκτρολογίου.
Ορίστε σήμανση πληκτρολογίου στο στοιχείο ελέγχου.
Εάν το στοιχείο ελέγχου είναι ένα στοιχείο anchor, ελέγξτε ότι πατώντας το πλήκτρο ENTER καλείται το URI της παραμέτρου href
του στοιχείου anchor.
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Κάθε τεχνολογία που μετακινεί, αναβοσβήνει ή ενημερώνει κείμενο και μπορεί να δημιουργήσει ένα στατικό μπλοκ κειμένου.
Αυτή η τεχνική σχετίζεται με:
Ορισμένες Ιστοσελίδες εμφανίζουν κείμενο σε κύλιση καθώς υπάρχει περιορισμένο διάστημα διαθέσιμο. Η κύλιση του κειμένου σε ένα μικρό παράθυρο κειμένου καθιστά το περιεχόμενο διαθέσιμο για χρήστες που μπορούν να διαβάσουν αρκετά γρήγορα, αλλά προκαλεί προβλήματα σε χρήστες που διαβάζουν πιο αργά ή χρησιμοποιούν υποστηρικτική τεχνολογία. Αυτή η τεχνική παρέχει έναν μηχανισμό διακοπής της κίνησης και καθιστά ολόκληρο το μπλοκ κειμένου διαθέσιμο στατικά. Το κείμενο ενδέχεται να είναι διαθέσιμο σε ένα ξεχωριστό παράθυρο ή σε μία (μεγαλύτερη) ενότητα της σελίδας. Οι χρήστες μπορούν τότε να διαβάσουν το κείμενο με τη δική τους ταχύτητα.
Αυτή η τεχνική δεν ισχύει όταν το κείμενο που κινείται δεν μπορεί να εμφανιστεί ολόκληρο στην οθόνη (π.χ. μια μεγάλη συζήτηση).
Σημείωση: Αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια τεχνική εναλλαγής στυλ για την παρουσίαση μιας σελίδας που είναι μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για μη συμμορφούμενο περιεχόμενο. Ανατρέξτε στην τεχνική Χρήσης μιας λειτουργίας εναλλαγής στυλ για την παροχή συμμορφούμενης εναλλακτικής έκδοσης (C29: Using a style switcher to provide a conforming alternate version) (CSS) και Κατανόησης συμμορφούμενων εναλλακτικών εκδόσεων (Understanding Conforming Alternate Versions) για περισσότερες πληροφορίες.
Πραγματοποιείται κύλιση ενός μεγάλου μπλοκ κειμένου μέσα από μια μικρή περιοχή μαρκίζας της σελίδας. Ένα κουμπί επιτρέπει στον χρήστη να διακόψει την κύλιση και να εμφανίσει ολόκληρο το μπλοκ κειμένου.
Σημείωση: Αυτό το παράδειγμα κώδικα απαιτεί αμφότερα τα CSS και Javascript να ενεργοποιηθούν και να είναι διαθέσιμα.
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
#scrollContainer {
visibility: visible;
overflow: hidden;
top: 50px; left: 10px;
background-color: darkblue;
}
.scrolling {
position: absolute;
width: 200px;
height: 50px;
}
.notscrolling {
width: 500px;
margin:10px;
}
#scrollingText {
top: 0px;
color: white;
}
.scrolling #scrollingText {
position: absolute;
}
</a>
Το αρχείο εντολών και το περιεχόμενο HTML:
Παράδειγμα κώδικα:
<script type="text/javascript">
var tid;
function init() {
var st = document.getElementById('scrollingText');
st.style.top = '0px';
initScrolling();
}
function initScrolling () {
tid = setInterval('scrollText()', 300);
}
function scrollText () {
var st = document.getElementById('scrollingText');
if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
st.style.top = (parseInt(st.style.top) - 5) + 'px';
} else {
var sc = document.getElementById('scrollContainer');
st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
}
}
function toggle() {
var scr = document.getElementById('scrollContainer');
if (scr.className == 'scrolling') {
scr.className = 'notscrolling';
clearInterval(tid);
document.getElementById('scrollButton').value="Shrink";
} else {
scr.className = 'scrolling';
initScrolling();
document.getElementById('scrollButton').value="Expand";
}
}
<input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
<div id="scrollContainer" class="scrolling">
<div id="scrollingText" class="on">
.... Text to be scrolled ...
</div>
</div>
...
Ακολουθεί ένα λειτουργικό παράδειγμα αυτού του κώδικα: "Επέκταση κειμένου σε κύλιση σε θέση" (Expanding Scrolling Text in Place).
Δεν υπάρχουν διαθέσιμοι έλεγχοι για την τεχνική αυτή.
HTML και XHTML που χρησιμοποιούνται με αρχείο εντολών.
Αυτή η τεχνική σχετίζεται με:
Οι σχεδιαστές τόπων συχνά επιθυμούν να δημιουργούν παράθυρα που δεν κάνουν χρήση αναδυόμενων παραθύρων που παρέχονται από το πρόγραμμα περιήγησης. Αυτό τυπικά επιτυγχάνεται περικλείοντας τα περιεχόμενα παραθύρου σε ένα div
και τοποθετώντας το div
πάνω από το περιεχόμενο σελίδας, χρησιμοποιώντας τη φθίνουσα σειρά και απόλυτη τοποθέτηση σε CSS.
Για να είναι προσβάσιμα, αυτά τα παράθυρα πρέπει να ακολουθούν ορισμένους απλούς κανόνες.
Ενεργοποιήστε το αρχείο εντολών που ανοίγει το παράθυρο από το συμβάν onclick
ενός συνδέσμου ή κουμπιού.
Τοποθετήστε το div
στο Μοντέλο αντικειμένου εγγράφου (DOM) αμέσως μετά το στοιχείο που το ενεργοποίησε. Το στοιχείο ενεργοποίησης θα διατηρήσει τη σήμανση και η εισαγωγή του περιεχομένου παραθύρου ύστερα από το στοιχείο θα καταστήσει το περιεχόμενο στο εσωτερικό του παραθύρου επόμενο στη σειρά ανάγνωσης του προγράμματος ανάγνωσης οθόνης και επόμενο στη σειρά στηλοθέτησης. Το παράθυρο μπορεί ακόμα να τοποθετηθεί απολύτως ώστε να βρίσκεται οπουδήποτε στη σελίδα οπτικά. Αυτό μπορεί να πραγματοποιηθεί είτε δημιουργώντας το παράθυρο στην HTML και κρύβοντας αυτό με CSS, όπως στο παρακάτω παράδειγμα ή με εισαγωγή του αμέσως μετά το στοιχείο ενεργοποίησης με αρχείο εντολών.
Διασφαλίστε ότι η HTML εντός του παραθύρου div ικανοποιεί το ίδιο πρότυπο προσβασιμότητας με άλλο περιεχόμενο.
Είναι επίσης καλό, αλλά όχι πάντα απαραίτητο, να ορίσετε τον σύνδεσμο ανοίγματος ώστε να ανοίγει και κλείνει το παράθυρο και να κλείνει το παράθυρο όταν καταργείται η σήμανση πληκτρολογίου.
Η HTML για αυτό το παράδειγμα περιλαμβάνει ένα στοιχείο ενεργοποίησης, στην περίπτωση αυτή ένα κουμπί και ένα div που λειτουργεί ως το πλαίσιο για το παράθυρο.
Το στοιχείο ενεργοποίησης είναι ένα κουμπί και το αρχείο εντολών ενεργοποιείται από το συμβάν onclick. Αυτό στέλνει τα κατάλληλα συμβάντα στο λειτουργικό σύστημα ώστε η υποστηρικτική τεχνολογία να είναι ενήμερη της αλλαγής στο DOM.
Στο παράδειγμα αυτό, τα κουμπιά Υποβολή και Επαναφορά στο παράθυρο, απλώς κρύβουν το div
.
Παράδειγμα κώδικα:
...
<button onclick="TogglePopup(event,true)"
name="pop0001">Options</button>
<div class="popover" id="pop0001">
<h3>Edit Sort Information</h3>
<form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
<fieldset>
<legend>Sort Order</legend>
<input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
<input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
</fieldset>
<div class="buttons">
<input type="submit" value="OK" />
<input type="reset" value="Cancel" />
</div>
</form>
</div>
...
Το στυλ των στοιχείων div
, heading και form
δημιουργείται με CSS ώστε να έχουν την εμφάνιση ενός παραθύρου.
Παράδειγμα κώδικα:
...
a { color:blue; }
a.clickPopup img { border:none; width:0; }
div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...
Το αρχείο εντολών ενεργοποιεί την εμφάνιση του αναδυόμενου div
, εμφανίζοντας και κρύβοντάς το.
Παράδειγμα κώδικα:
...
function TogglePopup(evt,show)
{
HarmonizeEvent(evt);
var src = evt.target;
if ("click" == evt.type)
{
evt.returnValue = false;
}
var popID = src.getAttribute("name");
if (popID)
{
var popup = document.getElementById(popID);
if (popup)
{
if (true == show)
{
popup.style.display = "block";
}
else if (false == show)
{
popup.style.display = "none";
}
else
{
popup.style.display = "block" == popup.style.display ? "none" : "block";
}
if ("block" == popup.style.display)
{
//window.alert(document.documentElement.scrollHeight);
popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
}
}
}
}
function SubmitForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
function ResetForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
...
Ένα λειτουργικό παράδειγμα είναι διαθέσιμο, "Ένα κουμπί επιλογών που ανοίγει ένα παράθυρο" (An options button that opens a dialog).
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"Διατριβή W4A: Προσβασιμότητα για ιστότοπους DHTML απλής έως μέτριας πολυπλοκότητας" (W4A Paper: Accessibility for Simple to Moderate-Complexity DHTML Web Sites) των Cynthia C. Shelly και George Young, Microsoft Corporation. (Μορφή PDF)
Microsoft Developer Network Whitepaper: "Εγγραφή προσβάσιμων εφαρμογών Ιστού" ( Writing Accessible Web Applications) των Cynthia C. Shelly και George Young. (Μορφή Microsoft Word)
Microsoft Active Accessibility 2.0 SDK. Περιλαμβάνει το Inspect32.exe και άλλα εργαλεία MSAA.
Microsoft Internet Explorer Developer Toolbar.. Επιτρέπει τον έλεγχο DOM που δημιουργείται από αρχείο εντολών στο Microsoft Internet Explorer
Firebug. Επιτρέπει τον έλεγχο DOM, που παράγεται από αρχείο εντολών, στο Firefox.
Εντοπίστε όλες τις περιοχές της σελίδας που ενεργοποιούν παράθυρα που δεν είναι αναδυόμενα.
Ελέγξτε ότι τα παράθυρα μπορούν να ανοίξουν μέσω χρήσης του πλήκτρου tab στην περιοχή και πατώντας το πλήκτρο enter.
Ελέγξτε ότι όταν ανοίξει, το παράθυρο είναι το επόμενο στη σειρά στηλοθέτησης.
Ελέγξτε ότι τα παράθυρα ενεργοποιούνται από το συμβάν click ενός κουμπιού ή συνδέσμου.
Χρησιμοποιώντας ένα εργαλείο που σας επιτρέπει να επιθεωρήσετε το DOM που δημιουργήθηκε από αρχείο εντολών, ελέγξτε ότι το παράθυρο βρίσκεται δίπλα στο DOM.
Οι έλεγχοι #2, #3, #4 και #5 είναι αληθείς.
Τεχνολογίες στην πλευρά του διακομιστή, συμπεριλαμβανομένων γλωσσών scripting στην πλευρά του διακομιστή και αρχεία διαμόρφωσης διακομιστή με URL ή πρότυπα URL για ανακατευθύνσεις.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αποφύγει τη σύγχυση που μπορεί να προκληθεί όταν δύο νέες σελίδες φορτώνονται διαδοχικά και γρήγορα διότι η μία σελίδα (αυτή που ζητήθηκε από τον χρήστη) ανακατευθύνει στην άλλη. Μερικοί πράκτορες χρήστη υποστηρίζουν τη χρήση στοιχείου HTML meta
για ανακατεύθυνση του χρήστη σε άλλη σελίδα μετά από συγκεκριμένο αριθμό δευτερολέπτων. Αυτό καθιστά μη προσβάσιμη μια σελίδα σε μερικούς χρήστες, εδικά αυτούς με εφαρμογές ανάγνωσης οθόνης. Οι τεχνολογίες στην πλευρά του διακομιστή παρέχουν μεθόδους για εφαρμογή ανακατευθύνσεων με τρόπο που δεν προκαλεί σύγχυση στους χρήστες. Ένα αρχείο εντολών στην πλευρά του διακομιστή ή ένα αρχείο διαμόρφωσης μπορούν να προκαλέσουν την αποστολή κατάλληλης απάντησης HTTP από τον διακομιστή με κωδικό κατάστασης σε εύρος 3xx και κεφαλίδα "Location" με άλλο URL. Όταν η εφαρμογή περιήγησης λαμβάνει την απάντηση αυτή, η γραμμή τοποθεσίας αλλάζει και η εφαρμογή περιήγησης υποβάλλει αίτηση με το νέο URL.
Σε Java Servlets ή JavaServer Pages (JSP), οι προγραμματιστές μπορούν να χρησιμοποιήσουν HttpServletResponse.sendRedirect(String url)
.
Παράδειγμα κώδικα:
…
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
…
response.sendRedirect("/newUserLogin.do");
}
Αυτό αποτελεί απάντηση με κωδικό κατάστασης 302 ("Βρέθηκε") και κεφαλίδα "Location" με το νέο URL στον πράκτορα χρήστη. Είναι δυνατόν να ρυθμιστεί άλλος κώδικας κατάστασης με response.sendError(int code, String message)
με μία από τις σταθερές που καθορίζονται στη διεπαφή javax.servlet.http.HttpServletResponse ως κώδικας κατάστασης.
Παράδειγμα κώδικα:
…
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
…
response.sendError(response.SC_MOVED_PERMANENTLY, "/newUserLogin.do");
}
Εάν μια εφαρμογή χρησιμοποιήσει HttpServletResponse.encodeURL(String url)
για επανεγγραφή URL διότι η εφαρμογή εξαρτάται από περιόδους λειτουργίας, πρέπει να χρησιμοποιηθεί η μέθοδος HttpServletResponse.encodeRedirectURL(String url)
αντί της HttpServletResponse.sendRedirect(String url)
. Είναι επίσης δυνατόν να επανεγγραφεί ένα URL με HttpServletResponse.encodeURL(String url)
και στη συνέχεια να μεταβιβαστεί αυτό το URL σε HttpServletResponse.sendRedirect(String url)
.
Σε Active Server Page (ASP) με VBScript, οι προγραμματιστές μπορούν να χρησιμοποιήσουν Response.Redirect
.
Παράδειγμα κώδικα:
Response.Redirect "newUserLogin.asp"
ή
Παράδειγμα κώδικα:
Response.Redirect("newUserLogin.asp")
Ο κώδικας παρακάτω αποτελεί ένα πιο πλήρες παράδειγμα με συγκεκριμένο κώδικα κατάστασης HTTP.
Παράδειγμα κώδικα:
Response.Clear
Response.Status = 301
Response.AddHeader "Location", "newUserLogin.asp"
Response.Flush
Response.End
Σε PHP, οι προγραμματιστές μπορούν να στείλουν μια μη επεξεργασμένη κεφαλίδα HTTP με τη μέθοδο header
. Ο κώδικας παρακάτω αποστέλλει κωδικό κατάστασης 301 και μια νέα τοποθεσία. Εάν η κατάστασης δεν ρυθμιστεί ρητώς, η απάντηση ανακατεύθυνσης αποστέλλει κωδικό κατάστασης HTTP 302.
Παράδειγμα κώδικα:
<?php
header("HTTP/1.1 301 Moved Permanently);
header("Location: http://www.example.com/newUserLogin.php");
?>
Οι προγραμματιστές μπορούν να ρυθμίσουν τον διακομιστή Ιστού Apache να χειρίζεται ανακατευθύνσεις, όπως στο ακόλουθο παράδειγμα.
Παράδειγμα κώδικα:
redirect 301 /oldUserLogin.jsp http://www.example.com/newUserLogin.do
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Χρήση βασικών αναδρομολογήσεων: μην σπάτε το κουμπί επιστροφής! (Use standard redirects: do not break the back button!) (W3C QA Tip).
"Τεχνικές μόνιμης ανακατεύθυνσης HTTP 301" (HTTP 301 Permanent Redirection Techniques) του Shailesh N. Humbad.
Interface javax.servlet.http.HttpServletResponse in the Java Servlets 2.3 API documentation.
"κεφαλίδα" (header) στο Εγχειρίδιο PHP.
Το Apache Module mod_alias στην "Τεκμηρίωση διακομιστή Apache HTTP Έκδοση 2.2" (Apache HTTP Server Version 2.2 Documentation) περιγράφει πώς είναι δυνατός ο προσδιορισμός των ανακατευθύνσεων στο Apache 2.2.
Το Module mod_alias στην "Τεκμηρίωση διακομιστή Apache HTTP Έκδοση 1.3" (Apache HTTP Server Version 1.3 Documentation) περιγράφει πώς είναι δυνατός ο προσδιορισμός των ανακατευθύνσεων στο Apache 1.3.
(καμία δεν εμπεριέχεται στη λίστα)
Βρείτε κάθε σύνδεσμο ή παραπομπή μέσω προγραμματισμού προς άλλη σελίδα ή Ιστοσελίδα.
Για κάθε σύνδεσμο ή παραπομπή μέσω προγραμματισμού προς URI στο σύνολο των Ιστοσελίδων που αξιολογούνται, ελέγξτε εάν η μονάδα Ιστού που παραπέμπεται περιέχει κώδικα (π.χ. στοιχείο meta ή αρχείο εντολών) που προκαλεί ανακατεύθυνση στην πλευρά του πελάτη.
Για κάθε σύνδεσμο ή παραπομπή μέσω προγραμματισμού προς URI στο σύνολο των Ιστοσελίδων που αξιολογούνται, ελέγξτε εάν το URI που παραπέμπεται δεν προκαλεί ανακατεύθυνση Ή προκαλεί ανακατεύθυνση στην πλευρά του διακομιστή χωρίς λήξη του χρόνου σύνδεσης.
Το βήμα 2 είναι ψευδές ΚΑΙ το βήμα 3 είναι αληθές.
Περιεχόμενο που βρίσκεται σε έναν διακομιστή Ιστού που υποστηρίζει .htaccess (τυπικά Apache), όπου μια συμμορφούμενη έκδοση περιεχομένου παρέχεται ως εναλλακτική σε μια μη συμμορφούμενη έκδοση.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι οι χρήστες μπορούν να έχουν πάντα πρόσβαση σε προσβάσιμη έκδοση του περιεχομένου όταν είναι διαθέσιμες επίσης μη συμμορφούμενες εκδόσεις. Όποτε το περιεχόμενο παρέχεται σε μορφή που δεν συμμορφώνεται με το WCAG, ο ιστότοπος συνολικά μπορεί και πάλι να συμμορφωθεί εάν παρέχονται εναλλακτικές εκδόσεις του μη προσβάσιμου περιεχομένου. Το κριτήριο συμμόρφωσης 4 απαιτεί οι εναλλακτικές εκδόσεις να μπορούν να προκύπτουν από το μη συμμορφούμενο περιεχόμενο ή από το URI του.
Καθώς δεν είναι πάντα δυνατή η παροχή ενός προσβάσιμου συνδέσμου από το εσωτερικό μη συμμορφούμενου περιεχομένου, αυτή η τεχνική περιγράφει πώς οι συγγραφείς μπορούν να χρησιμοποιούν την υπομονάδα του Apache "mod_access", ώστε να διασφαλίζουν ότι μη συμμορφούμενο περιεχόμενο είναι προσβάσιμο μόνο από URI που λειτουργούν ως εναλλακτικές εκδόσεις στο μη συμμορφούμενο περιεχόμενο ή από σελίδες που περιλαμβάνουν συνδέσμους τόσο για τη μη συμμορφούμενη έκδοση, όσο και για την εναλλακτική έκδοση.
Το παρακάτω αρχείο .htaccess χρησιμοποιεί την υπομονάδα Apache 'mod_redirect' για να ανακατευθύνει αιτήσεις για το "inaccessbile.html" στο "accessible.html", εκτός εάν η αίτηση προέρχεται από το "accessible.html".
Παράδειγμα κώδικα:
# If the request for inaccessible content comes from a file
# called accessible.html, then set an environment variable that
# allows the inaccessible version to be displayed.
SetEnvIf Referer .*(accessible.html)$ let_me_in
<FilesMatch ^(inaccessible.html)$>
Order Deny,Allow
Deny from all
Allow from env=let_me_in
</FilesMatch>
# If the request comes from anyplace but accessible.html, then
# redirect the error condition to a location where the accessible
# version resides
ErrorDocument 403 /example_directory/accessible.html
Αυτό το παράδειγμα θεωρεί μια δομή καταλόγου όπου έγγραφα είναι διαθέσιμα σε πολλαπλές μορφές. Μία από τις μορφές δεν ικανοποιεί το WCAG στο δηλωμένο επίπεδο και χρησιμοποιεί την επέκταση αρχείου "jna" (Just Not Accessible/Απλά μη προσβάσιμο). Όλα αυτά τα αρχεία αποθηκεύονται σε έναν φάκελο με την ονομασία "jna" με ένα αρχείο .htaccess, το οποίο διασφαλίζει ότι κάθε άμεση αίτηση για ένα αρχείο με την επέκταση .jna από σελίδες όπου μη προσβάσιμες εκδόσεις δεν είναι ήδη διαθέσιμες, ανακατευθύνεται σε μια σελίδα ευρετηρίου που παραθέτει όλες τις διαθέσιμες μορφές.
Παράδειγμα κώδικα:
# If the request for inaccessible content comes from a file at
# http://example.com/documents/index.html, then set an environment
# variable that allows the inaccessible version to be displayed.
SetEnvIf Referer ^http://example.com/documents/index.html$ let_me_in
<FilesMatch ^(.*\.jna)$>
Order Deny,Allow
Deny from all
Allow from env=let_me_in
</FilesMatch>
# If the request comes from anyplace but http://example.com/documents/index.html, then
# redirect the error condition to a location where a link the accessible
# version resides
ErrorDocument 403 http://example.com/documents/index.html
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Πιστοποίηση, Εξουσιοδότηση και Έλεγχος πρόσβασης (Authentication, Authorization and Access Control)
"Πρόγραμμα εκμάθησης Apache: αρχεία .htaccess" (Apache Tutorial: .htaccess files)
Προσδιορίστε σελίδες που δεν συμμορφώνονται με το WCAG στο δηλωμένο επίπεδο συμμόρφωσης, όπου προσβάσιμες εναλλακτικές εξυπηρετούνται με βάση τη χρήση αρχείων .htaccess.
Επισκεφθείτε το URI του μη συμμορφούμενου περιεχομένου.
Επαληθεύεστε ότι η σελίδα που προκύπτει είναι ένα από τα ακόλουθα:
μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για το μη συμμορφούμενο περιεχόμενο
μια σελίδα που περιλαμβάνει έναν σύνδεσμο για τη συμμορφούμενη εναλλακτική έκδοση και το μη συμμορφούμενο περιεχόμενο
Είτε ο έλεγχος #3.1 ή ο #3.2 είναι αληθής.
Περιεχόμενο που δημιουργείται χρησιμοποιώντας αρχεία εντολών στην πλευρά του διακομιστή, όπου μια συμμορφούμενη έκδοση περιεχομένου παρέχεται ως εναλλακτική μιας μη συμμορφούμενης έκδοσης βάσει του HTTP Referer.
Αυτή η τεχνική σχετίζεται με:
Καθώς ορισμένοι πράκτορες χρήστη δεν υποστηρίζουν την κεφαλίδα HTTP Referer, μπορούν να διαμορφώνονται για μη αποστολή ενός ή βρίσκονται πίσω από proxy ή firewall που το καταργεί, είναι δυνατό για ορισμένους χρήστες να μην έχουν πρόσβαση σε μη συμμορφούμενο περιεχόμενο όταν υλοποιείται αυτή η τεχνική.
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι οι χρήστες μπορούν να αποκτήσουν μια προσβάσιμη έκδοση του περιεχομένου όταν παρέχονται αμφότερες οι μη συμμορφούμενες και συμμορφούμενες εκδόσεις.
Η "Απαίτηση συμμόρφωσης 1" (Conformance Requirement 1) επιτρέπει σε μη συμμορφούμενες σελίδες να συμπεριληφθούν στον σκοπό της συμμόρφωσης εφόσον έχουν μια "συμμορφούμενη εναλλακτική έκδοση" (conforming alternate version). Δεν είναι πάντα δυνατό για συγγραφείς να συμπεριλάβουν συνδέσμους που υποστηρίζουν προσβασιμότητα σε συμμορφούμενο περιεχόμενο από το εσωτερικό μη συμμορφούμενου περιεχομένου. Επομένως, οι συγγραφείς μπορεί να χρειαστεί να βασιστούν στη χρήση τεχνολογιών δημιουργίας αρχείου εντολών στην πλευρά του διακομιστή (π.χ. PHP, ASP, JSP) για να διασφαλίσουν ότι η μη συμμορφούμενη έκδοση μπορεί να προσεγγιστεί μόνο από μια συμμορφούμενη σελίδα.
Αυτή η τεχνική περιγράφει τον τρόπο χρήσης πληροφοριών που παρέχονται από το HTTP referer
για να διασφαλίσουν ότι μη συμμορφούμενο περιεχόμενο μπορεί να προσεγγιστεί μόνο από μια συμμορφούμενη σελίδα. Η κεφαλίδα HTTP referer
ορίζεται από τον πράκτορα χρήστη και περιέχει το URI της σελίδας (εάν υπάρχει ένα), το οποίο παρέπεμψε τον πράκτορα χρήστη στη μη συμμορφούμενη σελίδα.
Για να υλοποιηθεί αυτή η τεχνική, ένας συγγραφέας προσδιορίζει το URI για τη συμμορφούμενη έκδοση του περιεχομένου, για κάθε μη συμμορφούμενη σελίδα. Όταν παραλαμβάνεται μια αίτηση για τη μη συμμορφούμενη έκδοση μιας σελίδας, ο διακομιστής συγκρίνει την τιμή της κεφαλίδας HTTP referer
με το URI της συμμορφούμενης έκδοσης για να προσδιορίσει εάν ο σύνδεσμος για τη μη συμμορφούμενη έκδοση προέρχεται από τη συμμορφούμενη έκδοση. Η μη συμμορφούμενη έκδοση εξυπηρετείται μόνον εάν το HTTP referer
συμφωνεί με το URI της μη συμμορφούμενης έκδοσης. Διαφορετικά, ο χρήστης ανακατευθύνεται στη συμμορφούμενη έκδοση του περιεχομένου. Να σημειωθεί ότι κατά τη σύγκριση του URI στην κεφαλίδα HTTP referer, μη σχετικές παραλλαγές στο URI, όπως στο query και το target, θα πρέπει να ληφθούν υπόψη.
Ένα ηλεκτρονικό μάθημα φυσικής χρησιμοποιεί μια αποκλειστική γλώσσα μοντελοποίησης για την παροχή αλληλεπιδραστικών επιδείξεων των φυσικών διεργασιών. Ο πράκτορας χρήστη για τη γλώσσα μοντελοποίησης δεν είναι συμβατός με υποστηρικτική τεχνολογία. Ο τόπος περιλαμβάνει ένα αρχείο εντολών που χρησιμοποιεί το HTTP Referer για να διασφαλίσει ότι εκτός εάν οι χρήστες επιχειρήσουν πρόσβαση σε αλληλεπιδραστική επίδειξη από μια σελίδα που περιέχει μια συμμορφούμενη περιγραφή της διαδικασίας και των μοντέλων, ο διακομιστής ανακατευθύνει την αίτηση σε μια συμμορφούμενη σελίδα που περιέχει έναν σύνδεσμο προς τη μη συμμορφούμενη έκδοση. Οι σπουδαστές μπορούν να επιλέξουν την πρόσβαση στη μη συμμορφούμενη, αλληλεπιδραστική έκδοση, άλλα όσοι δεν την επιλέξουν, είναι και πάλι σε θέση να μάθουν για τη διδασκόμενη διεργασία.
Το παρακάτω παράδειγμα δείχνει πώς αυτή η τεχνική μπορεί να χρησιμοποιηθεί σε PHP. Περιλαμβάνει δύο αρχεία, conforming.php και non-conforming.php, τα οποία συνεργάζονται για να διασφαλίσουν ότι ο μόνος τρόπος πρόσβασης μη συμμορφούμενου περιεχομένου είναι μέσα από συμμορφούμενο περιεχόμενο.
conforming.php:
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conforming Content</title>
</head>
<body>
<h1>This is a conforming page</h1>
<p>From here, you can visit the <a href="non-conforming.php">non-conforming
page</a>. </p>
</body>
</html>
non-conforming.php:
Παράδειγμα κώδικα:
<?php
// if the request comes from a file that contains the string "conforming.php" then render the page
if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Non-Conforming Content</title>
</head>
<body>
<h1>This is a non-conforming page</h1>
<p>Because you came from <?php echo $_SERVER['HTTP_REFERER']; ?>, you are
able to view the content on this page. </p>
</body>
</html>
<?php
}
// if the referring page is not conforming.php, then redirect the user to the conforming version
else {
header("Location: conforming.php");
}
?>
Όπου παρέχονται εναλλακτικές συμμορφούμενες με το WCAG για μη συμμορφούμενο περιεχόμενο:
Προσδιορίστε σελίδες που δεν συμμορφώνονται με το WCAG στο δηλωμένο επίπεδο συμμόρφωσης, όπου προσβάσιμες εναλλακτικές εξυπηρετούνται με βάση το HTTP Referer.
Επισκεφθείτε το URI του μη συμμορφούμενου περιεχομένου.
Επαληθεύεστε ότι η σελίδα που προκύπτει είναι ένα από τα ακόλουθα:
μια συμμορφούμενη εναλλακτική έκδοση (conforming alternate version) για το μη συμμορφούμενο περιεχόμενο
μια σελίδα που περιλαμβάνει έναν σύνδεσμο για τη συμμορφούμενη εναλλακτική έκδοση και το μη συμμορφούμενο περιεχόμενο
Είτε ο έλεγχος #3.1 ή ο #3.2 είναι αληθής.
Περιεχόμενο που δημιουργείται χρησιμοποιώντας αρχεία εντολών στην πλευρά του διακομιστή για την αποθήκευση προτιμήσεων.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός μηχανισμού για να επιλέγουν οι χρήστες μια προτίμηση για μια εναλλακτική συμμορφούμενη έκδοση μιας Ιστοσελίδας.
Η παροχή προτιμήσεων που επιτρέπει στους χρήστες την εμφάνιση συμμορφούμενων εναλλακτικών εκδόσεων, μπορεί να επιτευχθεί με διάφορους τρόπους. Μία κοινή μέθοδος είναι η παροχή ενός συνδέσμου που ενεργοποιεί μια διαδικασία στην πλευρά του διακομιστή, η οποία ορίζει μια συνεδρία ή σταθερό cookie που χρησιμοποιεί ο διακομιστής Ιστού για την τροποποίηση της σελίδας ή την ανακατεύθυνση του χρήστη προς την εναλλακτική έκδοση. Άλλες μέθοδοι που αποθηκεύονται, συμπεριλαμβάνουν την παροχή επιλογών συγκεκριμένων για τον χρήστη που αποθηκεύονται ως μέρος των πληροφοριών σύνδεσης του χρήστη για ένα σύστημα όπου χρήστες συνδέονται για πρόσβαση σε μια Ιστοσελίδα ή υπηρεσία.
Χρήστες που απαιτούν μια εναλλακτική έκδοση θα χρειαστούν τον παρεχόμενο στη μη συμμορφούμενη σελίδα μηχανισμό να είναι προσβάσιμος, έτσι ώστε να τον εντοπίσουν και χρησιμοποιήσουν. Ο ίδιος ο μηχανισμός θα πρέπει να συμμορφώνεται στο δηλωμένο επίπεδο προσβασιμότητας.
Ένας ιστότοπος προσφέρει έναν σύνδεσμο για μια σελίδα 'προτιμήσεων', σε σελίδες εντός του τόπου. Σε αυτήν τη σελίδα, υπάρχει μια επιλογή προβολής μιας εναλλακτικής έκδοσης του τόπου. Ενδέχεται να υπάρχουν διάφορες όψεις της σελίδας που επηρεάζονται ή ο χρήστης ενδέχεται να επιλέξει την προβολή ολόκληρης της εναλλακτικής έκδοσης του τόπου. Η προτίμηση ενδέχεται να προβάλλει μια έκδοση του τόπου όπου βίντεο που περιλαμβάνεται στον τόπο εμφανίζει επεξηγήσεις ή ενδέχεται να προσφέρεται καθώς ο κύριος τόπος περιέχει θέματα συμμόρφωσης προσβασιμότητας που αντιμετωπίζονται μόνον μέσω της εναλλακτικής.
Ένας συγγραφέας Ιστοσελίδας μπορεί να επιλέξει να διαχειριστεί αυτήν την προτίμηση μέσω ενός cookie, το οποίο ενδέχεται να διαχειριστεί μέσω μιας γλώσσας δημιουργίας αρχείων εντολών στην πλευρά του διακομιστή, όπως η PHP.
Η σελίδα προτιμήσεων ενδέχεται να προσφέρεται ως εξής:
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site Preferences</title>
</head>
<body>
<h1>Site Preferences</h1>
<form id="form1" name="site_prefs" method="post" action="pref.php">
<fieldset>
<legend>Which version of the site do you want to view?</legend>
<input type="radio" name="site_pref" id="site_pref_reg" value="reg" />
<label for="site_pref_reg">Main version of site</label>
<input type="radio" name="site_pref" id="site_pref_axx" value="axx" />
<label for="site_pref_axx">Accessibility-conforming version</label>
</fieldset>
</form>
</body>
</html>
Η φόρμα υποβάλλεται στο αρχείο pref.php για επεξεργασία. Ένα cookie ορίζεται και σε αυτό το απλό παράδειγμα, το πρόγραμμα περιήγησης του χρήστη κατευθύνεται στην αρχική σελίδα του τόπου.
pref.php:
Παράδειγμα κώδικα:
<?php
if(isset($site_pref)) {
setcookie("site_pref",$site_pref, time() + (86400 * 30)); //set for 30 days
header("location: http://www.example.com"); //redirects to home page
}
?>
Η αρχική σελίδα αρχίζει με κώδικα που υλοποιεί την προτίμηση του χρήστη.
index.php:
Παράδειγμα κώδικα:
<?
if(isset($site_pref)) {
if($site_pref="axx") {
header("location: ./accessible/index.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
Για ένα σύστημα βάσει σύνδεσης, η προτίμηση αποθηκεύεται στο αρχείο βάσης δεδομένων χρήστη και παραπέμπεται από το αρχείο εντολών στην πλευρά του διακομιστή που δημιουργεί τις σελίδες για να εμφανίσει ο χρήστης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Αλλάξτε μια προτίμηση του τρόπου εμφάνισης των σελίδων στον τόπο.
Ελέγξτε ότι η ίδια η προτίμηση ή ένας σύνδεσμος για τη σελίδα όπου μπορεί να οριστεί, μπορεί να προσεγγιστεί από κάθε μη συμμορφούμενη σελίδα.
Ελέγξτε ότι εμφανίζονται Ιστοσελίδες σύμφωνα με την επιλεγμένη προτίμηση.
Ελέγξτε ότι όταν οι προτιμήσεις ορίζονται, η Ιστοσελίδα συμμορφώνεται σύμφωνα με τη δήλωση.
Επαληθεύστε ότι η σελίδα που προκύπτει είναι μια συμμορφούμενη εναλλακτική έκδοση της αρχικής σελίδας.
Οι έλεγχοι #2 και #3 είναι αληθείς.
Εφαρμόζεται όποτε υπάρχει διαθέσιμη εφαρμογή αναπαραγωγής SMIL 1.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει να υπάρχουν περισσότερες ηχητικές περιγραφές από όσες χωρούν στα κενά του διαλόγου του οπτικοακουστικού υλικού.
Με το SMIL 1.0 δεν υπάρχει εύκολος τρόπος να επιτευχθεί αυτό, αλλά μπορεί να γίνει χωρίζοντας τα αρχεία ήχου και βίντεο σε μια σειρά από αρχεία που αναπαράγονται διαδοχικά. Πρόσθετη ηχητική περιγραφή αναπαράγεται τότε, παράλληλα με την παύση του οπτικο-ακουστικού προγράμματος. Το τελευταίο πλαίσιο του αρχείου βίντεο 'παγώνει' ώστε να παραμείνει στην οθόνη μέχρι να ολοκληρωθεί η αναπαραγωγή του αρχείου ήχου.
Το αποτέλεσμα είναι ότι το βίντεο εμφανίζεται να αναπαράγεται από την αρχή ως το τέλος, αλλά "παγώνει" σε κάποια σημεία, καθώς παρέχεται μια πιο εκτεταμένη ηχητική περιγραφή. Μετά συνεχίζει αυτόματα όταν η ηχητική περιγραφή ολοκληρωθεί.
Για να (απ)ενεργοποιηθεί η εκτεταμένη ηχητική περιγραφή, μπορεί να χρησιμοποιηθεί αρχείο εντολών για εναλλαγή μεταξύ δύο αρχείων εντολών SMIL, ένα με και ένα χωρίς τις γραμμές της εκτεταμένης ηχητικής περιγραφής. Ή μπορεί να χρησιμοποιηθεί αρχείο εντολών, για να προστεθούν ή να αφαιρεθούν οι γραμμές της εκτεταμένης ηχητικής περιγραφής από το αρχείο SMIL, έτσι ώστε τα αποσπάσματα του φιλμ να αναπαραχθούν χωρίς διακοπή.
Εάν δεν είναι διαθέσιμη η δημιουργία αρχείων εντολών, τότε είναι δυνατή η παροχή δύο εκδόσεων του βίντεο, μία με και μία χωρίς τις εκτεταμένες ηχητικές περιγραφές.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions"
xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
<layout>
<root-layout background-color="black" height="266" width="320"/>
<region id="videoregion" background-color="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<seq>
<par>
<video src="video.rm" region="videoregion" clip-begin="0s" clip-end="5.4"
dur="8.7" fill="freeze" alt="videoalt"/>
<audio src="no1.wav" begin="5.4" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="5.4" clip-end="24.1"
dur="20.3" fill="freeze" alt="videoalt"/>
<audio src="no2.wav" begin="18.7" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="24.1" clip-end="29.6"
dur="7.7" fill="freeze" alt="videoalt"/>
<audio src="no3.wav" begin="5.5" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="29.6" clip-end="34.5"
dur="5.7" fill="freeze" alt="videoalt"/>
<audio src="no4.wav" begin="4.9" alt="audio alt"/>
</par>
<par>
<video src="video.rm" region="videoregion" clip-begin="77.4" alt="video alt"/>
</par>
</seq>
</par>
</body>
</smil>
Η παραπάνω επισημείωση χωρίζεται σε πέντε τμήματα <par>
. Στο καθένα, υπάρχει μια ετικέτα <video>
και <audio>
(η τελευταία <par>
δεν φέρει εσκεμμένα ετικέτα <audio>
). Η σύμβαση με τις εκτεταμένες ηχητικές περιγραφές είναι πως τα κύρια μέσα παύουν κατά τη διάρκεια της περιγραφής. Ο τρόπος να επιτευχθεί αυτό σε SMIL 1.0, είναι να οριστεί ένα "clip-begin
" και "clip-end
" που υπαγορεύουν την αρχή και το τέλος του αποσπάσματος βίντεο και να οριστεί μια διάρκεια για το απόσπασμα που είναι μεγαλύτερο από αυτό που ορίζεται με τα clip-begin
" και "clip-end
". Το fill="freeze"
συγκρατεί το τελευταίο πλαίσιο του βίντεο κατά την εκτεταμένη περιγραφή. Η ετικέτα <audio>
έχει μια παράμετρο "begin
" με μια τιμή που είναι ίση της τιμής "clip-end
" της ετικέτας που προηγείται <video>
.
Ο τρόπος να προσδιοριστούν οι τιμές για τα "clip-begin
," "clip-end
" και "dur
", είναι να εντοπιστεί ο χρόνος που αρχίζει και τελειώνει το τμήμα του βίντεο πριν την ηχητική περιγραφή και να εντοπιστεί η συνολική διάρκεια της εκτεταμένης ηχητικής περιγραφής. Τα "clip-begin
" και "clip-end
" ορίζουν τις δικές τους τιμές, αλλά η τιμή "dur
" είναι το άθροισμα της διάρκειας της εκτεταμένης περιγραφής και του αποσπάσματος που ορίζεται από τα "clip-begin
" και "clip-end
". Στο πρώτο <par>
, το απόσπασμα βίντεο αρχίζει στα 0 δευτερόλεπτα και λήγει στα 5,4 δευτερόλεπτα και η διάρκεια περιγραφής είναι 3,3 δευτερόλεπτα, ώστε η τιμή "dur
" είναι 5,4 δευτ. 3,3 δευτ. = 8,7 δευτ..
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Πραγματοποιήστε αναπαραγωγή αρχείου με εκτεταμένες ηχητικές περιγραφές
Πραγματοποιήστε αναπαραγωγή αρχείου με ηχητική περιγραφή
Ελέγξτε εάν το βίντεο "παγώνει" σε κάποια σημεία και αναπαράγεται η εκτεταμένη ηχητική περιγραφή
Το #3 είναι αληθές
Εφαρμόζεται όποτε υπάρχει διαθέσιμη εφαρμογή αναπαραγωγής SMIL 2.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να επιτρέψει να υπάρχουν περισσότερες ηχητικές περιγραφές από όσες χωρούν στα κενά του διαλόγου του οπτικοακουστικού υλικού.
Με τη SMIL 2.0, είναι δυνατόν να προσδιοριστεί ποια συγκεκριμένα αρχεία ήχου θα αναπαραχθούν σε συγκεκριμένα χρονικά σημεία και ότι το πρόγραμμα θα "παγώσει" (παύση) κατά την αναπαραγωγή του αρχείου ήχου.
Το αποτέλεσμα είναι ότι το βίντεο εμφανίζεται να αναπαράγεται από την αρχή ως το τέλος, αλλά "παγώνει" σε κάποια σημεία, καθώς παρέχεται μια πιο εκτεταμένη ηχητική περιγραφή. Μετά συνεχίζει αυτόματα όταν η ηχητική περιγραφή ολοκληρωθεί.
Για να (απ)ενεργοποιηθεί η εκτεταμένη ηχητική περιγραφή, μπορεί να χρησιμοποιηθεί αρχείο εντολών για εναλλαγή μεταξύ δύο αρχείων εντολών SMIL, ένα με και ένα χωρίς τις γραμμές της εκτεταμένης ηχητικής περιγραφής. Ή μπορεί να χρησιμοποιηθεί αρχείο εντολών, για να προστεθούν ή να αφαιρεθούν οι γραμμές της εκτεταμένης ηχητικής περιγραφής από το αρχείο SMIL, έτσι ώστε τα αποσπάσματα του φιλμ να αναπαραχθούν χωρίς διακοπή.
Εάν δεν είναι διαθέσιμη η δημιουργία αρχείων εντολών, τότε είναι δυνατή η παροχή δύο εκδόσεων του αρχείου SMIL, μία με και μία χωρίς τις εκτεταμένες ηχητικές περιγραφές.
Παράδειγμα κώδικα:
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<excl>
<priorityClass peers="pause">
<video src="movie.rm" region="video" title="video" alt="video" />
<audio src="desc1.rm" begin="12.85s" alt="Description 1" />
<audio src="desc2.rm" begin="33.71s" alt="Description 2" />
<audio src="desc3.rm" begin="42.65s" alt="Description 3" />
<audio src="desc4.rm" begin="59.80s" alt="Description 4" />
</priorityClass>
</excl>
</body>
</smil>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Πραγματοποιήστε αναπαραγωγή αρχείου με εκτεταμένες ηχητικές περιγραφές
Ελέγξτε εάν το βίντεο "παγώνει" σε κάποια σημεία και αναπαράγεται η εκτεταμένη ηχητική περιγραφή
Το #2 είναι αληθές
Εφαρμόζεται όποτε υπάρχει διαθέσιμη εφαρμογή αναπαραγωγής SMIL 1.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με τύφλωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να δουν το βίντεο σε οπτικοακουστικό υλικό, να είναι σε θέση να έχουν πρόσβαση στο υλικό. Με αυτή την τεχνική, παρέχεται μια περιγραφή του βίντεο μέσω ηχητικών περιγραφών που ταιριάζουν στα κενά του διαλόγου στο οπτικοακουστικό υλικό.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions"
xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
<layout>
<root-layout background-color="black" height="266" width="320"/>
<region id="videoregion" background-color="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<audio dur="0:01:20.00" src="salesdemo_ad.mp3"
alt="Sales Demo Audio Description"/>
</par>
</body>
</smil>
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
<head>
<layout>
<root-layout background-color="black" height="266" width="320"/>
<region id="videoregion" background-color="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mov" region="videoregion" title="Sales Demo"
alt="Sales Demo"/>
<audio src="salesdemo_ad.mp3" title="audio description"
alt="Sales Demo Audio Description"/>
</par>
</body>
</smil>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε μεθόδους για ενεργοποίηση ηχητικών περιγραφών από περιεχόμενο/εφαρμογή αναπαραγωγής (εκτός εάν αναπαράγεται πάντα ως προεπιλογή)
Πραγματοποιήστε αναπαραγωγή αρχείου με ηχητική περιγραφή
Ελέγξτε εάν αναπαράγεται ηχητική περιγραφή
Το #3 είναι αληθές
Εφαρμόζεται όποτε υπάρχει διαθέσιμη εφαρμογή αναπαραγωγής SMIL 2.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με τύφλωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να δουν το βίντεο σε οπτικοακουστικό υλικό, να είναι σε θέση να έχουν πρόσβαση στο υλικό. Με αυτή την τεχνική, παρέχεται μια περιγραφή του βίντεο μέσω ηχητικών περιγραφών που ταιριάζουν στα κενά του διαλόγου στο οπτικοακουστικό υλικό.
Παράδειγμα κώδικα:
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="26" left="0"
height="144" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<audio src="salesdemo_ad.mp3" begin="33.71s" title="audio description"
alt="Sales Demo Audio Description"/>
</par>
</body>
</smil>
Το παράδειγμα δείχνει ένα τμήμα <par>
που περιέχει μια ετικέτα <audio>
και μια ετικέτα <video>
. Η ροή ήχου δεν ξεκινά αυτόματα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε μεθόδους για ενεργοποίηση ηχητικών περιγραφών από περιεχόμενο/εφαρμογή αναπαραγωγής (εκτός εάν αναπαράγεται πάντα ως προεπιλογή)
Πραγματοποιήστε αναπαραγωγή αρχείου με ηχητική περιγραφή
Ελέγξτε εάν αναπαράγεται ηχητική περιγραφή
Το #2 είναι αληθές
Εφαρμόζεται σε SMIL 1.0
Αυτή η τεχνική σχετίζεται με:
Δεν υπάρχει καθολική πρότυπη μορφή για αναπαράσταση επεξηγήσεων σε SMIL 1.0. Διαφορετικοί πράκτορες χρήστη υποστηρίζουν διαφορετικές μορφές επεξηγήσεων. Επιβάλλεται η παροχή ενός αρχείου υποστηριζόμενης μορφής ως το όρισμα ροής κειμένου src για τη ροή κειμένου επεξήγησης.
Το QuickTime υποστηρίζει αρχεία επεξηγήσεων QTText. Εφαρμογές αναπαραγωγής τύπου Real, όπως RealPlayer και GRiNS, υποστηρίζουν αρχεία επεξηγήσεων RealText. Το WindowsMedia υποστηρίζει αρχεία SAMI, αλλά δεν υποστηρίζει SMIL. Το Flash δεν υποστηρίζει έναν συγκεκριμένο τύπο αρχείων, αλλά μπορεί να αναλύσει αρχείο επεξήγησης βάσει XML. Ουσιαστικά, η υποστήριξη συστατικού στοιχείου FLVPlayback για SMIL προορίζεται για τον εντοπισμό παραμέτρων όπως movie/server url ή ενδείξεις πολλαπλού εύρου ζώνης που ορίζονται σε μια ετικέτα <switch>.
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με κώφωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να ακούσουν τον διάλογο σε οπτικοακουστικό υλικό, να είναι σε θέση να δουν το υλικό. Με αυτή την τεχνική, είναι διαθέσιμοι όλοι οι διάλογοι και οι σημαντικοί ήχοι στη ροή κειμένου που απεικονίζεται σε περιοχή επεξηγήσεων.
Με SMIL 1.0, είναι δυνατός ο καθορισμός ξεχωριστών περιοχών για το βίντεο και τις επεξηγήσεις. Οι επεξηγήσεις και η αναπαραγωγή βίντεο συγχρονίζονται, με το κείμενο των επεξηγήσεων να εμφανίζεται σε μία περιοχή της οθόνης, ενώ το αντίστοιχο βίντεο εμφανίζεται σε άλλη περιοχή.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions"
xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
<layout>
<root-layout width="320" height="300" background-color="black"/>
<region top="0" width="320" height="240" left="0" background-color="black"
id="videoregion"/>
<region top="240" width="320" height="60" left="0" background-color="black"
id="textregion"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<textstream dur="0:01:20.00" region="textregion" src="salesdemo_cc.txt"
alt="Sales Demo Captions"/>
</par>
</body>
</smil>
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
<head>
<layout>
<root-layout background-color="black" height="310" width="330"/>
<region id="video" background-color="black" top="5" left="5"
height="240" width="320"/>
<region id="captions" background-color="black" top="250"
height="60" left="5" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<textstream src="salesdemo_cc.rt" region="captions"
system-captions="on" title="captions"
alt="Sales Demo Captions"/>
</par>
</body>
</smil>
Το παράδειγμα δείχνει ένα τμήμα <par>
που περιέχει μια ετικέτα <video> and a <code><![CDATA[<textstream>
tag. Η παράμετρος system-captions υποδεικνύει ότι η ροή κειμένου πρέπει να απεικονιστεί όταν η ρύθμιση της εφαρμογής αναπαραγωγής του χρήστη για επεξηγήσεις υποδείξει να απεικονιστεί η προτίμηση για επεξηγήσεις. Η ενότητα <layout>
καθορίζει τις περιοχές που χρησιμοποιήθηκαν για το βίντεο και τις επεξηγήσεις.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
<head>
<layout>
<root-layout background-color="black" height="310" width="330"/>
<region id="video" background-color="black" top="5" left="5"
height="240" width="320"/>
<region id="captions" background-color="black" top="250"
height="60" left="5" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<text src="data:,This%20is%20inline%20text." region="captions" begin="0s"
dur="3" alt="Sales Demo Captions">
<param name="charset" value="iso-8859-1"/>
<param name="fontFace" value="System"/>
<param name="fontColor" value="yellow"/>
<param name="backgroundColor" value="blue"/>
</text>
</par>
</body>
</smil>
Αυτό το παράδειγμα δείχνει ένα στοιχείο <text>
που περιλαμβάνει συγχρονισμένες ροές κειμένου με το αρχείο SMIL.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ενεργοποίηση της προτίμησης επεξηγήσεων στην εφαρμογή αναπαραγωγής, εάν υπάρχει
Πραγματοποιήστε αναπαραγωγή αρχείου με επεξηγήσεις
Ελέγξτε εάν απεικονίζονται οι επεξηγήσεις
Το #3 είναι αληθές
Εφαρμόζεται σε SMIL 2.0
Αυτή η τεχνική σχετίζεται με:
Μόνον το RealPlayer υποστηρίζει SMIL 2.0.
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με κώφωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να ακούσουν τον διάλογο σε οπτικοακουστικό υλικό, να είναι σε θέση να δουν το υλικό. Με αυτή την τεχνική, είναι διαθέσιμοι όλοι οι διάλογοι και οι σημαντικοί ήχοι στη ροή κειμένου που απεικονίζεται σε περιοχή επεξηγήσεων.
Με SMIL 2.0, είναι δυνατός ο καθορισμός ξεχωριστών περιοχών για το βίντεο και τις επεξηγήσεις. Οι επεξηγήσεις και η αναπαραγωγή βίντεο συγχρονίζονται, με το κείμενο των επεξηγήσεων να εμφανίζεται σε μία περιοχή της οθόνης και το αντίστοιχο βίντεο να εμφανίζεται σε άλλη περιοχή.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="5" left="5"
height="240" width="320"/>
<region id="captions" backgroundColor="black" top="250"
height="60" left="5" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<textstream src="salesdemo_cc.rt" region="captions" systemCaptions="on"
title="captions" alt="Sales Demo Captions"/>
</par>
</body>
</smil>
Το παράδειγμα δείχνει ένα τμήμα <par>
που περιέχει μια ετικέτα <audio>
και μια ετικέτα <video>
. Η παράμετρος systemCaptions υποδεικνύει ότι η ροή κειμένου πρέπει να απεικονιστεί όταν η ρύθμιση της εφαρμογής αναπαραγωγής του χρήστη για επεξηγήσεις υποδείξει να απεικονιστεί η προτίμηση για επεξηγήσεις. Η ενότητα <layout>
καθορίζει τις περιοχές που χρησιμοποιήθηκαν για το βίντεο και τις επεξηγήσεις.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="5" left="5"
height="240" width="320"/>
<region id="captions" backgroundColor="black" top="250"
height="60" left="5" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<text src="data:,This%20is%20inline%20text." region="captions"
begin="0s" dur="3">
<param name="charset" value="iso-8859-1"/>
<param name="fontFace" value="System"/>
<param name="fontColor" value="yellow"/>
<param name="backgroundColor" value="blue"/>
</text>
<text src="data:,This%20is%20a%20second%20text."
region="captions" begin="3s" dur="3">
<param name="charset" value="iso-8859-1"/>
<param name="fontFace" value="System"/>
<param name="fontColor" value="yellow"/>
<param name="backgroundColor" value="blue"/>
</text>
</par>
</body>
</smil>
Αυτό το παράδειγμα δείχνει ένα στοιχείο <text>
που περιλαμβάνει συγχρονισμένες ροές κειμένου με το αρχείο SMIL.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ενεργοποίηση της προτίμησης επεξηγήσεων στην εφαρμογή αναπαραγωγής, εάν υπάρχει
Πραγματοποιήστε αναπαραγωγή αρχείου με επεξηγήσεις
Ελέγξτε εάν απεικονίζονται οι επεξηγήσεις
Το #3 είναι αληθές
Εφαρμόζεται όποτε υπάρχει διαθέσιμη εφαρμογή αναπαραγωγής SMIL 1.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με κώφωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να ακούσουν τον διάλογο σε οπτικοακουστικό υλικό, να είναι σε θέση να δουν το υλικό. Με αυτή την τεχνική, είναι διαθέσιμοι όλοι οι διάλογοι και οι σημαντικοί ήχοι σε βίντεο διερμηνείας στη νοηματική γλώσσα, το οποίο απεικονίζεται σε περιοχή επεξηγήσεων.
Με SMIL 1.0, είναι δυνατός ο καθορισμός ξεχωριστών περιοχών για τα δύο βίντεο. Η αναπαραγωγή των δύο βίντεο είναι συγχρονισμένη, με το περιεχόμενο βίντεο να εμφανίζεται σε μία περιοχή της οθόνης και το αντίστοιχο βίντεο διερμηνείας στη νοηματική γλώσσα να εμφανίζεται σε άλλη περιοχή.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions"
xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
<layout>
<root-layout width="320" height="300" background-color="black"/>
<region top="0" width="320" height="240" left="0" background-color="black"
id="videoregion"/>
<region top="240" width="320" height="60" left="0" background-color="black"
id="signingregion"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<video dur="0:01:20.00" region="signingregion" system-captions="on"
src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
</par>
</body>
</smil>
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/TR/REC-smil">
<head>
<layout>
<root-layout background-color="black" height="310" width="330"/>
<region top="0" width="320" height="240" left="0" background-color="black"
id="videoregion"/>
<region top="240" width="320" height="60" left="0" background-color="black"
id="signingregion"/>
</layout>
</head>
<body>
<par>
<video dur="0:01:20.00" region="videoregion" src="salesdemo.mov"
alt="Sales Demo"/>
<video dur="0:01:20.00" region="signingregion" system-captions="on"
src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
</par>
</body>
</smil>
Το παράδειγμα δείχνει ένα τμήμα <par>
που περιέχει δύο ετικέτες <video>
. Η παράμετρος system-captions υποδεικνύει ότι το βίντεο νοηματικής γλώσσας πρέπει να απεικονιστεί όταν η ρύθμιση της εφαρμογής αναπαραγωγής του χρήστη για επεξηγήσεις υποδείξει να απεικονιστεί η προτίμηση για επεξηγήσεις. Η ενότητα <layout>
καθορίζει τις περιοχές που χρησιμοποιήθηκαν για το κύριο βίντεο και το βίντεο διερμηνείας στη νοηματική γλώσσα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ενεργοποιήστε τον έλεγχο σε εφαρμογή αναπαραγωγής περιεχομένου για να ενεργοποιήσετε τη διερμηνεία στη νοηματική γλώσσα (εκτός εάν εμφανίζεται πάντα)
Πραγματοποιήστε αναπαραγωγή αρχείου με διερμηνεία νοηματικής γλώσσας
Ελέγξτε εάν απεικονίζεται η διερμηνεία στη νοηματική γλώσσα
Το #3 είναι αληθές
SMIL 2.0
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η παροχή ενός τρόπου στα άτομα με κώφωση ή διαφορετικά που αντιμετωπίζουν δυσκολία να ακούσουν τον διάλογο σε οπτικοακουστικό υλικό, να είναι σε θέση να δουν το υλικό. Με αυτή την τεχνική, είναι διαθέσιμοι όλοι οι διάλογοι και οι σημαντικοί ήχοι σε βίντεο διερμηνείας στη νοηματική γλώσσα, το οποίο απεικονίζεται σε περιοχή επεξηγήσεων.
Με SMIL 2.0, είναι δυνατός ο καθορισμός ξεχωριστών περιοχών για τα δύο βίντεο. Η αναπαραγωγή των δύο βίντεο είναι συγχρονισμένη, με το περιεχόμενο βίντεο να εμφανίζεται σε μία περιοχή της οθόνης και το αντίστοιχο βίντεο διερμηνείας στη νοηματική γλώσσα να εμφανίζεται σε άλλη περιοχή.
Παράδειγμα κώδικα:
<smil xmlns="//www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" height="266" width="320"/>
<region id="video" backgroundColor="black" top="5" left="5"
height="240" width="320"/>
<region id="signing" backgroundColor="black" top="250"
height="60" left="5" width="320"/>
</layout>
</head>
<body>
<par>
<video src="salesdemo.mpg" region="video" title="Sales Demo"
alt="Sales Demo"/>
<video src="salesdemo_signing.mpg"
region="signing" systemCaptions="on"
title="sign language interpretation"
alt="Sales Demo Sign Language Interpretation"/>
</par>
</body>
</smil>
Το παράδειγμα δείχνει ένα τμήμα <par>
που περιέχει δύο ετικέτες <video>
. Η παράμετρος systemCaptions υποδεικνύει ότι το βίντεο νοηματικής γλώσσας πρέπει να απεικονιστεί όταν η ρύθμιση της εφαρμογής αναπαραγωγής του χρήστη για επεξηγήσεις υποδείξει να απεικονιστεί η προτίμηση για επεξηγήσεις. Η ενότητα <layout>
καθορίζει τις περιοχές που χρησιμοποιήθηκαν για το κύριο βίντεο και το βίντεο διερμηνείας στη νοηματική γλώσσα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ενεργοποιήστε τον έλεγχο σε εφαρμογή αναπαραγωγής περιεχομένου για να ενεργοποιήσετε τη διερμηνεία στη νοηματική γλώσσα (εκτός εάν εμφανίζεται πάντα)
Πραγματοποιήστε αναπαραγωγή αρχείου με διερμηνεία νοηματικής γλώσσας
Ελέγξτε εάν απεικονίζεται η διερμηνεία στη νοηματική γλώσσα
Το #3 είναι αληθές
Έγγραφα απλού κειμένου. Δεν εφαρμόζεται σε τεχνολογίες που περιέχουν επισημείωση.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να αναγνωρίσει μια παράγραφο σε έγγραφο απλού κειμένου. Μια παράγραφος αποτελεί ένα συνεκτικό μπλοκ κειμένου, όπως μια ομάδα σχετικών προτάσεων που αναπτύσσουν ένα θέμα ή ένα επιμέρους κομμάτι ενός μεγαλύτερου θέματος.
Η αρχή της παραγράφου υποδεικνύεται από
την αρχή του περιεχομένου, δηλαδή, η παράγραφος είναι το πρώτο περιεχόμενο στο έγγραφο, ή
ακριβώς μία κενή γραμμή που προηγείται του κειμένου της παραγράφου
Το τέλος της παραγράφου υποδεικνύεται από
το τέλος του περιεχομένου, δηλαδή, η παράγραφος είναι το τελευταίο περιεχόμενο στο έγγραφο, ή
μία η περισσότερες κενές γραμμές ακολουθούν το κείμενο της παραγράφου
Μια κενή γραμμή που περιέχει μηδέν χαρακτήρες ή μη εκτυπώσιμους χαρακτήρες, όπως διάστημα ή στηλοθέτη, που ακολουθείται από μια νέα γραμμή.
Δύο παράγραφοι. Κάθε μία ξεκινά και τελειώνει με μια κενή γραμμή.
Παράδειγμα κώδικα:
This is the first sentence in this
paragraph. Paragraphs may be long
or short.
In this paragraph the first line is
indented. Indented and non-indented
sentences are allowed. White space within
the paragraph lines is ignored in
defining paragraphs. Only completely blank
lines are significant.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Για κάθε παράγραφο:
Ελέγξτε ότι η παράγραφος έπεται μίας κενής γραμμής ή ότι η παράγραφος είναι το πρώτο περιεχόμενο στην Ιστοσελίδα
Ελέγξτε ότι η παράγραφος ακολουθείται από τουλάχιστον μία κενή γραμμή ή ότι η παράγραφος είναι το τελευταίο περιεχόμενο στην Ιστοσελίδα
Ελέγξτε ότι καμία παράγραφος δεν περιέχει κενές γραμμές
Όλοι οι παραπάνω έλεγχοι είναι αληθείς για κάθε παράγραφο.
Έγγραφα απλού κειμένου. Δεν εφαρμόζεται σε τεχνολογίες που περιέχουν επισημείωση.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να χρησιμοποιήσει συμβάσεις μορφοποίησης κειμένου, για να δημιουργήσει απλές λίστες με σχετικά στοιχεία. Δεν είναι δυνατή η αναπαράσταση ιεραρχικών ή ένθετων λιστών με χρήση αυτής της τεχνικής και πρέπει να χρησιμοποιείται διαφορετική τεχνολογία.
Μια λίστα είναι μια ακολουθία των στοιχείων λίστας. Ένα στοιχείο λίστας είναι μια παράγραφος που ξεκινά με μια ετικέτα. Για μη ταξινομημένες λίστες, μπορούν να χρησιμοποιηθούν αστερίσκοι, παύλες και χαρακτήρες κουκίδας ως ετικέτα, όμως πρέπει να χρησιμοποιηθούν οι ίδιοι χαρακτήρες ετικέτας για όλα τα στοιχεία σε μια λίστα. Για ταξινομημένες λίστες, η ετικέτα μπορεί να είναι αλφαβητική ή αριθμητική και μπορεί στο τέλος της να έχει μια περίοδο ή μια δεξιά παρένθεση. Οι ετικέτες πρέπει να βρίσκονται σε αύξουσα σειρά, δηλαδή,
οι αριθμοί πρέπει να βρίσκονται σε αριθμητική σειρά,
οι αλφαβητικές ετικέτες πρέπει να βρίσκονται σε αλφαβητική σειρά ή σε αριθμητική όταν εκφράζονται με λατινικά αριθμητικά.
Παράδειγμα κώδικα:
- unordered list item
- unordered list item
- unordered list item
Παράδειγμα κώδικα:
1. Ordered list item
2. Ordered list item
3. Ordered list item
Παράδειγμα κώδικα:
i. Ordered list item
ii. Ordered list item
iii. Ordered list item
iv. Ordered list item
Παράδειγμα κώδικα:
A) Ordered list item
B) Ordered list item
C) Ordered list item
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Για κάθε λίστα στο περιεχόμενο κειμένου
Ελέγξτε ότι κάθε στοιχείο λίστας είναι μια παράγραφος που ξεκινά με ετικέτα
Ελέγξτε ότι η λίστα δεν περιέχει γραμμές που δεν αποτελούν στοιχεία λίστας
Ελέγξτε ότι όλα τα στοιχεία λίστας χρησιμοποιούν την ίδια ετικέτα στυλ
Ελέγξτε ότι οι ετικέτες σε ταξινομημένες λίστες βρίσκονται σε διαδοχική σειρά
Ελέγξτε ότι οι ετικέτες σε κάθε μη ταξινομημένη λίστα είναι οι ίδιες
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
Έγγραφα απλού κειμένου. Δεν εφαρμόζεται σε τεχνολογίες που περιέχουν επισημείωση.
Αυτή η τεχνική σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να χρησιμοποιηθούν συμβάσεις μορφοποίησης κειμένου για τη μεταφορά της δομής του περιεχομένου. Οι επικεφαλίδες χρησιμοποιούνται για να εντοπίσουν και να δώσουν ετικέτα σε ενότητες του εγγράφου κειμένου, δείχνοντας την οργάνωση του εγγράφου.
Η αρχή μιας επικεφαλίδας υποδεικνύεται από
δύο κενές γραμμές πριν την επικεφαλίδα
Το τέλος μιας επικεφαλίδας υποδεικνύεται από
μια κενή γραμμή μετά την επικεφαλίδα
Μια κενή γραμμή περιέχει οποιονδήποτε αριθμό μη εκτυπώσιμων χαρακτήρων, όπως διάστημα ή στηλοθέτη, που ακολουθείται από μια νέα γραμμή.
Μια παράγραφος ακολουθείται από δύο κενές γραμμές, ύστερα μια επικεφαλίδα, μετά μια κενή γραμμή, ύστερα μια άλλη παράγραφο:
Παράδειγμα κώδικα:
...this is the end of paragraph 1.
The Text of the Heading
This is the beginning of paragraph 2.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Για κάθε επικεφαλίδα στο περιεχόμενο:
Ελέγξτε ότι κάθε επικεφαλίδα έπεται δύο κενών γραμμών
Ελέγξτε ότι κάθε επικεφαλίδα ακολουθείται από μία κενή γραμμή
Ελέγξτε ότι καμία παράγραφος δεν περιέχει κενές γραμμές
Όλοι οι παραπάνω έλεγχοι είναι αληθείς.
HTML και XHTML με αρχεία εντολών και Προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου.
Σημείωση συντάκτη: Αυτή η τεχνική θα εφαρμόζεται όταν οι προδιαγραφές Προσβάσιμης εμπλουτισμένης εφαρμογής διαδικτύου προσεγγίσει την κατάσταση σύστασης W3C.
Αυτή η τεχνική σχετίζεται με:
Από τον Οκτώβριο του 2006, οι τεχνικές Προσβάσιμης εμπλουτισμένης εφαρμογής διαδικτύου υποστηρίζονται σε Firefox 1.5 ή νεότερες εκδόσεις σε Windows και στο Window-Eyes 5.5 ή νεότερη έκδοση. Η υποστήριξη σε άλλους πράκτορες χρήστη και υποστηρικτικές τεχνολογίες είναι σε εξέλιξη. Αυτή η συγκεκριμένη τεχνική βασίζεται σε ενημερώσεις που πραγματοποιούνται στο Firefox 2.0 για να επιτρέψουν τη χρήση της παραμέτρου describedby
από μόνη της, χωρίς επίσης να οριστεί ένας ρόλος για το στοιχείο.
Σκοπός αυτής της τεχνικής είναι να επιδείξει πώς θα χρησιμοποιηθεί η ιδιότητα descibedby
της Προσβάσιμης εμπλουτισμένης εφαρμογής διαδικτύου (ARIA) για την παροχή περιγραφικών πληροφοριών σχετικά με ένα στοιχείο ελέγχου διεπαφής χρήστη, το οποίο μπορεί να καθοριστεί μέσω προγραμματισμού από πράκτορες χρήστη. Οι τεχνικές ARIA παρέχουν τη δυνατότητα προσθήκης πληροφοριών ορισμένων μέσω προγραμματισμού σε ένα στοιχείο, το οποίο μπορεί να παρέχει πρόσθετες πληροφορίες σχετικά με το στοιχείο. Ο πράκτορας χρήστη μπορεί να παρέχει αυτές τις πρόσθετες πληροφορίες σε υποστηρικτική τεχνολογία για παρουσίαση στον χρήστη. Για παράδειγμα, η ιδιότητα descibedby
μπορεί να χρησιμοποιηθεί για παροχή πληροφοριών που είναι διαθέσιμες στο περιβάλλοντα περιεχόμενο του στοιχείου ελέγχου διεπαφής χρήστη, αλλά που φυσιολογικά δεν θα είναι διαθέσιμες όταν ο χρήστης μετακινείται από στοιχείο ελέγχου σε στοιχείο ελέγχου, χρησιμοποιώντας μια υποστηρικτική τεχνολογία.
Αυτό το παράδειγμα χρησιμοποιεί αρχεία εντολών για την προσθήκη της ιδιότητας descibedby
σε στοιχεία ελέγχου διεπαφής χρήστη στη σελίδα. Η χρήση αρχείων εντολών είναι απαραίτητη καθώς η παράμετρος "describedby" δεν βρίσκεται στην προδιαγραφή HTML και η προσθήκη αυτής απευθείας στην επισημείωση θα εμποδίσει την επικύρωση της επισημείωσης. Σε πράκτορες χρήστη που υποστηρίζουν χώρους ονομάτων, η κατάσταση required αντιστοιχίζεται μέσω χρήσης της διεπαφής προγραμμάτων εφαρμογής (API) setAttributeNS()
. Για άλλους πράκτορες χρήστη, η κατάσταση required αντιστοιχίζεται στο API setAttribute()
και ο χώρος ονόματος προσομοιώνεται προσθέτοντας ένα string στατικού κειμένου στην πρόσοψη της παραμέτρου describedby
.
Στο παρακάτω παράδειγμα, δημιουργούνται οι δύο μεταβλητές πίνακα buttonIds
και linkIds
. Κάθε πίνακας συγκρατεί τα αναγνωριστικά των στοιχείων που περιέχουν το κείμενο περιγραφής. Κάθε πίνακας ευρετηριάζεται μέσω του αναγνωριστικού των στοιχείων που χρειάζονται μια ιδιότητα describedby
. Η λειτουργία setDescribedBy()
καλείται από το συμβάν onload του αντικειμένου παραθύρου.
Η λειτουργία setDescribedBy()
εντοπίζει όλα τα στοιχεία button της σελίδας. Επαναλαμβάνεται μέσα από όλα τα στοιχεία button που εντοπίστηκαν και, χρησιμοποιώντας το αναγνωριστικό του button ως το ευρετήριο, αναζητεί στον πίνακα buttonIds
μία συσχετισμένη τιμή αναγνωριστικού. Αυτό το αναγνωριστικό είναι η παράμετρος id
του στοιχείου που περιέχει το κείμενο περιγραφής που αντιστοιχίζεται στο κουμπί. Εάν ένα συσχετισμένο αναγνωριστικό εντοπιστεί, το αρχείο εντολών αντιστοιχεί την ιδιότητα describedby
στο κουμπί μέσω της λειτουργίας setAttrNS()
.
Η λειτουργία setDescribedBy()
εντοπίζει επίσης όλα τα στοιχεία anchor στη σελίδα και εκτελεί μια παρόμοια διαδικασία. Αναζητεί για συσχετισμένα αναγνωριστικά στον πίνακα linksId
και αντιστοιχεί την ιδιότητα describedby
σε κάθε σύνδεσμο χρησιμοποιώντας τη λειτουργία setAttrNS()
.
Η λειτουργία setAttrNS()
θα καλεί το API setAttributeNS()
όταν είναι διαθέσιμο για να ορίσει την παράμετρο required. Χρησιμοποιεί τον κατάλληλο χώρο ονόματος URI, "http://www.w3.org/2005/07/aaa", για την Υπομονάδα καταστάσεων και ιδιοτήτων για προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου (Καταστάσεις και ιδιότητες ARIA) (States and Properties Module for Accessible Rich Internet Applications (ARIA States and Properties)). Εάν το API setAttributeNS()
δεν είναι διαθέσιμο στον πράκτορα χρήστη, ένας στατικός, προσομοιωμένος χώρος ονόματος "aaa:" προστίθεται στο όνομα της παραμέτρου required και ορίζεται χρησιμοποιώντας το API setAttribute()
.
Χρησιμοποιώντας έναν πράκτορα χρήστη ή/και υποστηρικτική τεχνολογία που υποστηρίζει ARIA, η πρόσθετη περιγραφή θα παρέχεται όταν επισημαίνονται τα στοιχεία ελέγχου διεπαφής χρήστη.
Παράδειγμα κώδικα:
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>Demonstration of describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[
// array entries for each button on the page that associates the button id
// with the id of the element containing the text which describes the button
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";
// array entries for each link on the page that associates the link id with
// the id of the element containing the text which describes the link
var linkIds = new Array();
linkIds["iceberg"] = "icebergInfo";
// function that is run after the page has loaded to set the describedBy
// property on each of the elements referenced by the array of id values
function setDescribedBy(){
if (buttonIds){
var buttons = document.getElementsByTagName("button");
if (buttons){
var buttonId;
for(var i=0; i<buttons.length; i++){
buttonId = buttons[i].id;
if (buttonId && buttonIds[buttonId]){
setAttrNS(buttons[i], "describedby", buttonIds[buttonId]);
}
}
}
}
if (linkIds){
var links = document.getElementsByTagName("a");
if (links){
var linkId;
for(var k=0; k<links.length; k++){
linkId = links[k].id;
if (linkId && linkIds[linkId]){
setAttrNS(links[k], "describedby", linkIds[linkId]);
}
}
}
}
}
// method to set the attribute values based on the capability of the browser.
// Use setAttributeNS if it is available, otherwise append a namespace
// indicator string to the attribute and set its value.
function setAttrNS(elemObj, theAttr, theValue){
elemObj.setAttribute("aria-" + theAttr, theValue);
}
// simulated action function - currently just displays an alert
function doAction(theAction){
alert("Perform the " + theAction + " action");
}
window.onload=setDescribedBy;
//]]>
</script>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications
describedby property to provide more detailed information
about the button action
</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
</p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
</p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
</p>
</div>
<p>The link in this paragraph has been updated with the Accessible Rich
Internet Applications describedby property to provide more information
about the link</p>
<p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span>
A bad storm in Alaska last October generated an ocean swell that broke apart
a giant iceberg near Antarctica six days later, U.S. researchers reported on Monday.
<a href="http://www.sciencemag.com/iceberg.html" id="iceberg">More Info...</a>.
</p>
</body>
Αυτό είναι το ίδιο παράδειγμα κωδικοποιημένο σε XHTML, με έναν τύπο MIME εφαρμογής :xhtml+xml. Αυτός ο τύπος MIME δεν υποστηρίζεται σε όλους τους πράκτορες χρήστη. Δηλώνει έναν xml χώρο ονόματος για πρόσβαση στην ιδιότητα describedby
. Οι πληροφορίες describedby
προστίθενται απευθείας στην επισημείωση XHTML και δεν απαιτείται καμία πρόσθετη δημιουργία αρχείων εντολών.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:waistate="http://www.w3.org/2005/07/aaa" >
<head>
<meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
<title>Demonstration of describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
float:left;
width:400px;
}
.right {
width:100px;
text-align:right;
}
</style>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications describedby property
to provide more detailed information about the button action</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" waistate:describedby="fontDesc">
Fonts </button></span></p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" waistate:describedby="colorDesc">
Colors </button></span></p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');"
waistate:describedby="customDesc"> Customize </button></span></p>
</div>
<p>The link in the next paragraph has been updated with the Accessible Rich Internet Applications
describedby property to provide more information about the link</p>
<p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span>
A bad storm in Alaska last October generated an ocean swell that broke apart a giant
iceberg near Antarctica six days later, U.S. researchers reported on Monday.
<a href="http://www.sciencemag.com/iceberg.html" id="iceberg" waistate:describedby="icebergInfo">More Info...</a>.
</p>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Φορτώστε τη σελίδα χρησιμοποιώντας έναν πράκτορα χρήστη ή/και υποστηρικτική τεχνολογία που υποστηρίζει Προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου.
Χρησιμοποιώντας έναν πράκτορα χρήστη που υποστηρίζει ARIA, πλοηγηθείτε σε κάθε στοιχείο ελέγχου διεπαφής χρήστη που τροποποιείται με μια ιδιότητα describedby
και επαληθεύστε ότι η περιγραφή είναι διαθέσιμη στον χρήστη.
Ελέγξτε ότι το #2 είναι αληθές.
Τεχνολογίες που υποστηρίζουν Καταστάσεις και ιδιότητες για προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου (States and Properties for Accessible Rich Internet Applications).
Αυτή η τεχνική σχετίζεται με:
Το WAI-ARIA υποστηρίζεται μερικώς στο Firefox 2.0, το οποίο αντιστοιχεί ρόλους και ιδιότητες σε API προσβασιμότητας πλατφόρμας. Τα JAWS και Window-Eyes έχουν ελεγχθεί επιτυχώς, παρουσιάζοντας αυτές τις ιδιότητες στον χρήστη. Το FireVox, μια επέκταση αυτό-εκφώνησης του Firefox, υποστηρίζει επίσης WAI-ARIA μέσω απευθείας πρόσβασης DOM.
Αυτή τη στιγμή δεν υπάρχει πρόσθετη υποστήριξη πράκτορα χρήστη.
Σκοπός αυτής της τεχνικής είναι να υποδείξει ότι η συμπλήρωση ενός πεδίου εισαγωγής δεδομένων χρήστη είναι υποχρεωτική, με έναν τρόπο που ορίζεται μέσω προγραμματισμού. Η κατάσταση WAI-ARIA απαραίτητο (required), υποδεικνύει ότι η εισαγωγή δεδομένων χρήστη απαιτείται πριν την υποβολή. Η κατάσταση "απαραίτητο" μπορεί να έχει τιμές "αληθής" ή "ψευδής". Για παράδειγμα, εάν ένας χρήστης πρέπει να συμπληρώσει ένα πεδίο διεύθυνσης, τότε η κατάσταση "απαραίτητο" ορίζεται ως αληθής.
Σημείωση: Το γεγονός ότι το στοιχείο είναι απαραίτητο παρουσιάζεται συχνά οπτικά (όπως ένα σημάδι ή σύμβολο ύστερα από το στοιχείο ελέγχου). Χρησιμοποιώντας την ιδιότητα "απαραίτητο", καθίσταται πιο εύκολο για πράκτορες χρήστη να διαβιβάσουν αυτές τις σημαντικές πληροφορίες στον χρήστη, με τρόπο συγκεκριμένο του πράκτορα χρήστη.
Οι Καταστάσεις και ιδιότητες WAI-ARIA είναι μια υπομονάδα που υποστηρίζεται στην XHTML 1.1 και νεότερες εκδόσεις και η προδιαγραφή τεκμηριώνει τον τρόπο παροχής των ιδιοτήτων στην XHTML και άλλες γλώσσες που βασίζονται στην XML. Ανατρέξτε στην ενότητα "Ενσωμάτωση μεταδεδομένων ρόλου προσβασιμότητας και κατάστασης σε έγγραφα HTML" (Embedding Accessibility Role and State Metadata in HTML Documents) για πληροφορίες σχετικά με τον τρόπο παροχής καταστάσεων και ιδιοτήτων WAI-ARIA με HTML και XHTML 1.0. Οι Καταστάσεις και ιδιότητες WAI-ARIA είναι συμβατές με άλλες γλώσσες επίσης. Ανατρέξτε στην τεκμηρίωση αυτών των γλωσσών.
Σημείωση: αυτή τη στιγμή το WAI-ARIA είναι ένα προσχέδιο εργασίας. Αυτή η τεχνική παρέχεται ως συμβουλευτική τεχνική για οργανώσεις που επιθυμούν να πειραματιστούν με την επίτευξη συμμόρφωσης WCAG χρησιμοποιώντας WAI-ARIA. Όταν το WAI-ARIA γίνει μια επίσημη προδιαγραφή και υποστηρίζεται σε πράκτορες χρήστη, αυτή η τεχνική αναμένεται να γίνει μια επαρκής τεχνική.
Ο ακόλουθος πηγαίος κώδικας δείχνει ένα XHTML έγγραφο χρησιμοποιώντας την ιδιότητα "απαραίτητο" για να υποδείξει ότι ένα πεδίο φόρμας πρέπει να υποβληθεί. Η υποχρεωτική φύση του πεδίου υποδεικνύεται επίσης στην ετικέτα ως εφεδρεία για πράκτορες χρήστη που δεν υποστηρίζουν ARIA.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:aaa="http://www.w3.org/2005/07/aaa"
xml:lang="en">
<head>
<title>Required Input</title>
</head>
<body>
<h1>Required Input</h1>
<p>The following form input field must be completed by the user
before the form can be submitted.</p>
<form action="http://example.com/submit">
<p>
<label for="test">Test (required)</label>
<input name="test" id="test" aaa:required="true" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Μεταβείτε σε μια σελίδα με υποχρεωτικά πεδία φόρμας σε έναν πράκτορα χρήστη που υποστηρίζει την προδιαγραφή προσβάσιμων εμπλουτισμένων εφαρμογών διαδικτύου.
Αφήνοντας κενά υποχρεωτικά πεδία φόρμας, επιχειρήστε να υποβάλλετε τη φόρμα.
Ελέγξτε ότι ο πράκτορας χρήστη ενημερώνει σχετικά με τις πληροφορίες που απουσιάζουν.
Παρέχετε τιμές για τα υποχρεωτικά πεδία.
Ελέγξτε ότι ο πράκτορας χρήστη επιτρέπει την υποβολή φόρμας για να συνεχίσει.
Τα #3 και #5 είναι αληθή
Τεχνολογίες που υποστηρίζουν Καταστάσεις και ιδιότητες για προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου (States and Properties for Accessible Rich Internet Applications).
Αυτή η τεχνική σχετίζεται με:
Το WAI-ARIA υποστηρίζεται μερικώς στο Firefox 2.0, το οποίο αντιστοιχεί ρόλους και ιδιότητες σε API προσβασιμότητας πλατφόρμας. Τα JAWS και Window-Eyes έχουν ελεγχθεί επιτυχώς, παρουσιάζοντας αυτές τις ιδιότητες στον χρήστη. Το FireVox, μια επέκταση αυτό-εκφώνησης του Firefox, υποστηρίζει επίσης WAI-ARIA μέσω απευθείας πρόσβασης DOM.
Αυτή τη στιγμή δεν υπάρχει πρόσθετη υποστήριξη πράκτορα χρήστη.
Σκοπός αυτής της τεχνικής είναι η παροχή πληροφοριών σχετικά με το αποδεκτό εύρος ενός πεδίου καταχώρησης με έναν τρόπο που ορίζεται μέσω προγραμματισμού. Οι καταστάσεις WAI-ARIA valuemin και valuemax παρέχουν τις ελάχιστες και μέγιστες (αντίστοιχα) τιμές που μπορεί να παρέχονται από τον χρήστη. Οι πράκτορες χρήστη δεν θα επιτρέπουν σε χρήστες να εισάγουν τιμές εκτός αυτού του πεδίου ή θα παράγουν ένα σφάλμα επικύρωσης εάν το πράξουν οι χρήστες.
Οι Καταστάσεις και ιδιότητες WAI-ARIA είναι μια υπομονάδα που υποστηρίζεται στην XHTML 1.1 και νεότερες εκδόσεις και η προδιαγραφή τεκμηριώνει τον τρόπο παροχής των ιδιοτήτων στην XHTML και άλλες γλώσσες που βασίζονται στην XML. Ανατρέξτε στην ενότητα "Ενσωμάτωση μεταδεδομένων ρόλου προσβασιμότητας και κατάστασης σε έγγραφα HTML" (Embedding Accessibility Role and State Metadata in HTML Documents) για πληροφορίες σχετικά με τον τρόπο παροχής καταστάσεων και ιδιοτήτων WAI-ARIA με HTML και XHTML 1.0. Οι Καταστάσεις και ιδιότητες WAI-ARIA είναι συμβατές με άλλες γλώσσες επίσης. Ανατρέξτε στην τεκμηρίωση αυτών των γλωσσών.
Σημείωση: αυτή τη στιγμή το WAI-ARIA είναι ένα προσχέδιο εργασίας. Αυτή η τεχνική παρέχεται ως συμβουλευτική τεχνική για οργανώσεις που επιθυμούν να πειραματιστούν με την επίτευξη συμμόρφωσης WCAG χρησιμοποιώντας WAI-ARIA. Όταν το WAI-ARIA γίνει μια επίσημη προδιαγραφή και υποστηρίζεται σε πράκτορες χρήστη, αυτή η τεχνική αναμένεται να γίνει μια επαρκής τεχνική.
Το ακόλουθο πεδίο εισαγωγής κειμένου απαιτεί ο χρήστης να εισάγει μια τιμή ημερομηνίας με μια τιμή κατά τη διάρκεια του έτους 2007:
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:aaa="http://www.w3.org/2005/07/aaa"
xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
xml:lang="en">
<head>
<title>Date Entry</title>
</head>
<body>
<h1>Date Entry</h1>
<p>Text entry accepts a date in the year 2007.</p>
<form action="http://example.com/submit">
<p><label for="test">Enter a date in 2007:</label>
<input name="test" id="test"
aaa:valuemin="2007-01-01" aaa:valuemax="2007-12-31"
aaa:datatype="xsd:date" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Το ακόλουθο κουμπί αυξομείωσης επιτρέπει στους χρήστες να εισάγουν έναν αριθμό μεταξύ 1 και 100.
Παράδειγμα κώδικα:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN" "http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aaa="http://www.w3.org/2005/07/aaa"
xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
xml:lang="en">
<head>
<title>Spin Button</title>
</head>
<body>
<h1>Spin Button</h1>
<p>Spin button allows users to enter a number between 1 and 100. It is
implemented as a text input, to which user agents that do not support
ARIA roles fall back.</p>
<form action="http://example.com/submit">
<p><label for="test">Enter a number between 1 and 100</label>
<input name="test" id="test" role="wairole:spinbutton"
aaa:valuemin="1" aaa:valuemax="100" aaa:datatype="xsd:integer" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"XML Schema μέρος 2: Τύποι δεδομένων" (XML Schema Part 2: Datatypes)
Μεταβείτε σε μια σελίδα με πεδία φόρμας που απαιτούν δεδομένων σε ένα ορισμένο εύρος, χρησιμοποιώντας έναν πράκτορα χρήστη που υποστηρίζει την προδιαγραφή προσβάσιμων εμπλουτισμένων εφαρμογών διαδικτύου.
Παρέχετε πληροφορίες που είναι εκτός του αποδεκτού εύρους και επιχειρήστε να υποβάλλετε τη φόρμα.
Ελέγξτε ότι ο πράκτορας χρήστη ενημερώνει σχετικά με τα άκυρα δεδομένα.
Παρέχετε πληροφορίες που είναι εντός του αποδεκτού εύρους και επιχειρήστε να υποβάλλετε τη φόρμα.
Ελέγξτε ότι ο πράκτορας χρήστη αποδέχεται τα δεδομένα και επιτρέψτε τη συνέχεια της υποβολής.
Τα #3 και #5 είναι αληθή
HTML και XHTML με αρχεία εντολών και Προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου.
Σημείωση συντάκτη: Αυτή η τεχνική θα εφαρμόζεται όταν οι προδιαγραφές Προσβάσιμης εμπλουτισμένης εφαρμογής διαδικτύου προσεγγίσουν την κατάσταση σύστασης W3C.
Αυτή η τεχνική σχετίζεται με:
Από τον Ιανουάριο του 2007, η τρέχουσα έκδοση της προδιαγραφής Προσβάσιμων εμπλουτισμένων εφαρμογών διαδικτύου (ARIA) υποστηρίζεται σε Firefox 1.5 ή νεότερες εκδόσεις σε Windows, χρησιμοποιώντας Window-Eyes 5.5 ή νεότερη έκδοση και υποστηρίζοντας μερικώς JAWS 8.0 ή νεότερη έκδοση. Η υποστήριξη σε άλλους πράκτορες χρήστη και υποστηρικτικές τεχνολογίες είναι σε εξέλιξη. Καθώς οι ARIA δεν υποστηρίζονται ακόμα σε όλες τις τεχνολογίες, είναι σημαντικό να χρησιμοποιείτε επίσης άλλες τεχνικές που είναι επαρκείς για τη σήμανση ενός πεδίου όπως απαιτείται. Αυτή η συγκεκριμένη τεχνική βασίζεται σε ενημερώσεις στο Firefox 2.0 για να επιτρέψουν τη χρήση της παραμέτρου required από μόνη της, χωρίς επίσης να οριστεί ένας ρόλος για το στοιχείο.
Σκοπός αυτής της τεχνικής είναι η επίδειξη του τρόπου χρήστης Προσβάσιμων πλούσιων εφαρμογών ίντερνετ για προσδιορισμό μέσω προγραμματισμού συστατικών στοιχείων φόρμας, για τα οποία απαιτείται εισαγωγή δεδομένων χρήστη ή επιλογή χρήστη. Τεχνικές προσβάσιμων εμπλουτισμένων εφαρμογών διαδικτύου παρέχουν τη δυνατότητα προσθήκης πρόσθετων πληροφοριών σχετικά με στοιχεία τα οποία μπορούν να προσδιοριστούν μέσω προγραμματισμού. Ο πράκτορας χρήστη μπορεί να παρέχει αυτές τις πρόσθετες πληροφορίες σε υποστηρικτική τεχνολογία για παρουσίαση στον χρήστη.
Αυτό το παράδειγμα χρησιμοποιεί αρχεία εντολών για την προσθήκη της κατάστασης required σε ένα στοιχείο φόρμας. Σε πράκτορες χρήστη που υποστηρίζουν χώρους ονομάτων, η κατάσταση required αντιστοιχίζεται μέσω χρήσης της διεπαφής προγραμμάτων εφαρμογής (API) setAttributeNS()
. Για άλλους πράκτορες χρήστη, η κατάσταση required αντιστοιχίζεται στο API setAttribute()
και ο χώρος ονόματος προσομοιώνεται προσθέτοντας ένα string στατικού κειμένου στην πρόσοψη της παραμέτρου required.
Στο παρακάτω παράδειγμα μια μεταβλητή πίνακα, requiredlds, δημιουργείτα με τα αναγνωστικά στοιχείων που χρειάζεται να επισημανθούν όπως απαιτείται. Η λειτουργία setRequired()
καλείται από το συμβάν onload
του αντικειμένου παραθύρου.
Η λειτουργία setRequired()
επαναλαμβάνεται μέσω όλων των παρεχόμενων αναγνωριστικών, ανακτά το στοιχείο και αντιστοιχεί την κατάσταση required 'αληθής' χρησιμοποιώντας τη λειτουργία setAttrNS()
.
Η λειτουργία setAttrNS()
θα καλεί το API setAttributeNS()
όταν είναι διαθέσιμο για να ορίσει την παράμετρο required. Χρησιμοποιεί τον κατάλληλο χώρο ονόματος URI, "http://www.w3.org/2005/07/aaa", για την Υπομονάδα καταστάσεων και ιδιοτήτων για προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου. Εάν το API setAttributeNS()
δεν είναι διαθέσιμο στον πράκτορα χρήστη, ένας στατικός, προσομοιωμένος χώρος ονόματος "aaa:" προστίθεται στο όνομα της παραμέτρου required και ορίζεται χρησιμοποιώντας το API setAttribute().
Κατά την πρόσβαση σε αυτήν τη σελίδα μέσω Firefox 2.0 ή νεότερης έκδοσης ή Window-Eyes 5.5 ή νεότερης έκδοσης, το Window-Eyes θα εκφωνήσει τη λέξη "required" (απαραίτητο) κατά την ανάγνωση της ετικέτας για τα πεδία εισαγωγής δεδομένων.
Παράδειγμα κώδικα:
<head>
<script type="text/javascript">
//<![CDATA[
// array or ids on the required fields on this page
var requiredIds = new Array( "firstName", "lastName");
// function that is run after the page has loaded to set the required role on each of the
//elements in requiredIds array of id values
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
setAttrNS(field, "required", "true");
}
}
}
// method to set the attribute values based on the capability of the browser.
// Use setAttributeNS if it is available,
// otherwise append a namespace indicator string to the attribute and set its value.
function setAttrNS(elemObj, theAttr, theValue){
if (typeof document.documentElement.setAttributeNS != 'undefined') {
elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
}else{
elemObj.setAttribute("aaa:" + theAttr, theValue);
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.</p>
<form action="submit.php">
<p>
<label for="firstName">First Name *: </label><input type="text" name="firstName"
id="firstName" value="" />
<label for="lastName">Last Name *: </label><input type="text" name="lastName"
id="lastName" value="" />
</p>
</form>
</body>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
Φορτώστε τη σελίδα χρησιμοποιώντας έναν πράκτορα χρήστη ή/και υποστηρικτική τεχνολογία που υποστηρίζει Προσβάσιμες εμπλουτισμένες εφαρμογές διαδικτύου.
Πλοηγηθείτε σε κάθε απαραίτητο στοιχείο φόρμας και επαληθεύστε ότι εκφωνείται η παράμετρος "required".
Ελέγξτε ότι το #2 είναι αληθές.
Όλες οι τεχνολογίες που υποστηρίζουν CSS.
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει τη συνθήκη αποτυχίας που προκύπτει ως αποτέλεσμα όταν χρησιμοποιείται CSS, αντί δομικής επισημείωσης, για την τροποποίηση της οπτικής διάταξης του περιεχομένου, και η τροποποιημένη διάταξη αλλάζει το νόημα του περιεχομένου. Χρησιμοποιώντας τις ιδιότητες τοποθέτησης του CSS2, είναι δυνατή η εμφάνιση του περιεχομένου σε οποιαδήποτε θέση στο παράθυρο προβολής του χρήστη. Η σειρά με την οποία εμφανίζονται τα στοιχεία σε οθόνη ίσως διαφέρει από τη σειρά που βρίσκονται στο έγγραφο προέλευσης. Οι υποστηρικτικές τεχνολογίες βασίζονται στον πηγαίο κώδικα σε άλλη σειρά καθορισμένη μέσω προγραμματισμού για την απόδοση του περιεχομένου με τη σωστή ακολουθία. Συνεπώς, είναι σημαντικό να μην βασίζεστε στο CSS για την οπτική τοποθέτηση περιεχομένου σε μια συγκεκριμένη ακολουθία, εάν αυτή οδηγεί σε ένα νόημα που είναι διαφορετικό από τη σειρά ανάγνωσης που ορίζεται μέσω προγραμματισμού.
Το παρακάτω παράδειγμα εμφανίζει πώς το CSS χρησιμοποιήθηκε ακατάλληλα για τη δημιουργία ενός συνόλου στηλών. Επιπρόσθετα, το κείμενο εμφανίζεται οπτικά στην εφαρμογή περιήγησης με διαφορετικό τρόπο από την επισημείωση.
Σε αυτό το παράδειγμα, καθορίζεται κλάση για κάθε αντικείμενο που τοποθετείται. Όταν εφαρμόζονται φύλλα στυλ, το κείμενο εμφανίζεται σε δύο στήλες. Στοιχεία της κλάσης "menu1" (Products) και "menu2" (Locations) εμφανίζονται ως επικεφαλίδες στηλών. "Telephones, Computers, and Portable MP3 Players" κατατάσσονται υπό την κατηγορία "Products" και τα "Idaho" και "Wisconsin" κατατάσσονται υπό την κατηγορία "Locations" (σημειώστε τη διαφορετική σειρά των Idaho και Wisconsin στη σειρά του πηγαίου κώδικα).
Εφόσον δεν έχουν χρησιμοποιηθεί δομικά στοιχεία, όταν δεν εφαρμόζονται φύλλα στυλ, όλο το κείμενο εμφανίζεται σε μία γραμμή στη σειρά του πηγαίου κώδικα , "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho."
Ακολουθεί το περιεχόμενο HTML:
Παράδειγμα κώδικα:
<div class="box">
<span class="menu1">Products</span>
<span class="menu2">Locations</span>
<span class="item1">Telephones</span>
<span class="item2">Computers</span>
<span class="item3">Portable MP3 Players</span>
<span class="item5">Wisconsin</span>
<span class="item4">Idaho</span>
</div>
Ακολουθούν τα στυλ για το παραπάνω περιεχόμενο:
Παράδειγμα κώδικα:
.menu1 {
position: absolute;
top: 3em;
left: 0em;
margin: 0px;
font-family: sans-serif;
font-size: 120%;
color: red;
background-color: white
}
.menu2 {
position: absolute;
top: 3em;
left: 10em;
margin: 0px;
font-family: sans-serif;
font-size: 120%;
color: red;
background-color: white
}
.item1 {
position: absolute;
top: 7em;
left: 0em;
margin: 0px
}
.item2 {
position: absolute;
top: 8em;
left: 0em;
margin: 0px
}
.item3 {
position: absolute;
top: 9em;
left: 0em;
margin: 0px
}
.item4 {
position: absolute;
top: 7em;
left: 14em;
margin: 0px
}
.item5 {
position: absolute;
top: 8em; left: 14em;
margin: 0px
}
#box {
position: absolute;
top: 5em;
left: 5em
}
Μια καλύτερη λύση για το περιεχόμενο αυτό θα ήταν η χρήση στοιχείων με μεγαλύτερο νόημα, όπως ένας πίνακας ή μια λίστα ορισμών.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για περιεχόμενο που χρησιμοποιεί CSS για τοποθέτηση:
Καταργήστε τις πληροφορίες στυλ από το έγγραφο ή απενεργοποιήστε τη χρήση των φύλλων στυλ στον πράκτορα χρήστη.
Ελέγξτε ότι η σειρά ανάγνωσης του περιεχομένου είναι σωστή και διατηρείται το νόημα του περιεχομένου.
Εάν το βήμα #2 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Όλες οι τεχνολογίες που υποστηρίζουν εικόνες ή επισημείωση παρουσίασης.
Αυτή η αποτυχία σχετίζεται με:
Αυτό το έγγραφο περιγράφει μια αποτυχία που προκύπτει όταν μια αλλαγή στην εμφάνιση του κειμένου μεταφέρει νόημα χωρίς τη χρήση κατάλληλης σημασιολογικής επισημείωσης. Αυτή η αποτυχία ισχύει επίσης για εικόνες κειμένου που δεν περικλείονται στην κατάλληλη σημασιολογική επισημείωση.
Ο συγγραφέας στόχευε στο να δημιουργήσει μια επικεφαλίδα, αλλά δεν επιθυμούσε την όψη μιας προεπιλεγμένης επικεφαλίδας HTML. Έτσι, χρησιμοποίησε το CSS για να δημιουργήσει στυλ στο στοιχείο P ώστε να δείχνει σαν μία επικεφαλίδα και το ονόμασε επικεφαλίδα. Αλλά απέτυχε να χρησιμοποιήσει το κατάλληλο στοιχείο HTML heading. Επομένως, η υποστηρικτική τεχνολογία δεν μπορούσε να το διακρίνει ως μια επικεφαλίδα.
Παράδειγμα κώδικα:
<style type="text/css">
.heading1{
font-family: Times, serif;
font-size:200%;
font-weight:bold;
}
</style>
<p class="heading1">Introduction</p>
<p>This introduction provides detailed information about how to use this
........
</p>
Σημείωση: Σε αυτήν την περίπτωση, η κατάλληλη προσέγγιση θα ήταν η χρήση CSS για στυλ του στοιχείου H1
στην HTML.
Το chapter1.gif είναι μια εικόνα των λέξεων "Chapter One" σε γραμματοσειρά Garamond, μεγέθους 20 pixel. Αυτό είναι μια αποτυχία καθώς κατ' ελάχιστον, το στοιχείο img θα πρέπει να περικλείεται εντός ενός στοιχείου header. Μια καλύτερη λύση θα είναι να καταργηθεί η εικόνα και να περικλείσετε το κείμενο εντός ενός στοιχείου header, το οποίο έχει στυλ μέσω CSS.
Παράδειγμα κώδικα:
<img src="Chapter1.gif" alt="Chapter One">
<p>Once upon a time in the land of the Web.....
</p>
Το ακόλουθο παράδειγμα αποτυγχάνει διότι οι πληροφορίες που μεταφέρονται με χρήση της ιδιότητας CSS font-weight
για την αλλαγή σε έντονη γραφή, δεν μεταφέρονται μέσω σημασιολογικής επισημείωσης ή αναφέρονται ρητά στο κείμενο.
Ακολουθεί μια κλάση CSS για τον προσδιορισμό της έντονης γραφής:
Παράδειγμα κώδικα:
.yell {
font-weight:bold;
text-transform: uppercase;
}
Ακολουθεί η αντίστοιχη HTML:
Παράδειγμα κώδικα:
<p>
"I said, <span class="yell">no</span>, not before dinner!",
was the exasperated response when Timmy asked his mother for the
fourth time for an ice cream cone.
</p>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για εικόνες κειμένου:
Ελέγξτε εάν οποιεσδήποτε εικόνες κειμένου χρησιμοποιούνται για τη μεταφορά δομικών πληροφοριών του εγγράφου.
Ελέγξτε ότι η κατάλληλη σημασιολογική δομή (π.χ. επικεφαλίδες HTML) χρησιμοποιούνται με το κείμενο για μεταφορά των πληροφοριών.
Για κείμενο με στυλ που μεταφέρει πληροφορίες:
Ελέγξτε εάν υπάρχει οποιοδήποτε κείμενο με στυλ που μεταφέρει δομικές πληροφορίες.
Ελέγξτε ότι επιπλέον της απόδοσης στυλ, χρησιμοποιείται η κατάλληλη σημασιολογική δομή με το κείμενο για μεταφορά των πληροφοριών.
Εάν ο έλεγχος #1.1 είναι αληθής, τότε ο #1.2 είναι αληθής.
Εάν ο έλεγχος #2.1 είναι αληθής, τότε ο #2.2 είναι αληθής.
Όλες οι τεχνολογίες που υποστηρίζουν CSS.
Αυτή η αποτυχία σχετίζεται με:
Η ιδιότητα εικόνας παρασκηνίου CSS παρέχει έναν τρόπο συμπερίληψης εικόνων στο έγγραφο με CSS χωρίς καμία παρεμβολή στον κώδικα HTML. Η ιδιότητα εικόνας παρασκηνίου CSS σχεδιάστηκε για διακοσμητικούς λόγους και δεν είναι δυνατόν να συσχετιστούν εναλλακτικά κειμένου με εικόνες που περιλαμβάνονται μέσω CSS. Τα εναλλακτικά κειμένου είναι απαραίτητα για άτομα που δεν βλέπουν εικόνες που μεταφέρουν σημαντικές πληροφορίες. Άρα, συνιστά αποτυχία η χρήση αυτής της ιδιότητας για να προστεθούν εικόνες για τη μεταφορά σημαντικών πληροφοριών.
Σημείωση: Η ενσωμάτωση πληροφοριών σε μια εικόνα παρασκηνίου μπορεί να προκαλέσει επίσης προβλήματα για άτομα που χρησιμοποιούν εναλλακτικά υπόβαθρα, προκειμένου να αυξήσουν την εμφάνιση και για χρήστες κατάστασης λειτουργίας υψηλής αντίθεσης, σε ορισμένα λειτουργικά συστήματα. Αυτοί οι χρήστες θα χάνουν τις πληροφορίες στην εικόνα παρασκηνίου λόγω έλλειψης οποιουδήποτε εναλλακτικού κειμένου.
Στο ακόλουθο παράδειγμα, μέρος του περιεχομένου περιέχεται σε μια εικόνα που παρουσιάζεται μόνο από CSS. Σε αυτό το παράδειγμα, η εικόνα TopRate.png είναι μια εικόνα 180 επί 200 pixel που περιέχει το κείμενο, "19.3% APR Typical Variable."
Παράδειγμα κώδικα:
The CSS contains:
p#bestinterest {
padding-left: 200px;
background: transparent url(/images/TopRate.png) no-repeat top left;
}
Χρησιμοποιείται σε αυτό το απόσπασμα:
Παράδειγμα κώδικα:
<p id="bestinterest">
Where else would you find a better interest rate?
</p>
Ένας διανομέας βιβλίων χρησιμοποιεί εικόνες παρασκηνίου για την παροχή εικονιδίων έναντι μιας λίστας τίτλων βιβλίου για να υποδειχθεί εάν πρόκειται για καινούργιους, περιορισμένους, διαθέσιμους ή εξαντλημένους τίτλους.
Το CSS περιέχει:
Παράδειγμα κώδικα:
ul#booklist li {
padding-left: 20px;
}
ul#booklist li.new {
background: transparent url(new.png) no-repeat top left;
}
ul#booklist li.limited {
background: transparent url(limited.png) no-repeat top left;
}
ul#booklist li.instock {
background: transparent url(instock.png) no-repeat top left;
}
ul#booklist li.outstock {
background: transparent url(outstock.png) no-repeat top left;
}
Χρησιμοποιείται σε αυτό το απόσπασμα:
Παράδειγμα κώδικα:
<ul id="booklist">
<li class="new">Some book</li>
<li class="instock">Some other book</li>
<li class="limited">A book we desperately want to get rid of</li>
...
<li class="outstock">A book you actually want </li>
</ul>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Εξετάστε όλες τις εικόνες που προστέθηκαν στο περιεχόμενο μέσω CSS.
Ελέγξτε ότι οι εικόνες δεν μεταφέρουν σημαντικές πληροφορίες.
Εάν μια εικόνα δεν μεταφέρει σημαντικές πληροφορίες, οι πληροφορίες παρέχονται σε υποστηρικτικές τεχνολογίες και είναι επίσης διαθέσιμες όταν η εικόνα CSS δεν εμφανίζεται.
Εάν το βήμα #2 και το βήμα #3 είναι ψευδή, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Φύλλα στυλ πολλαπλών επιπέδων.
Αυτή η αποτυχία σχετίζεται με:
Η τιμή blink
της ιδιότητας text-decoration
δεν υποστηρίζεται από το Internet Explorer. Υποστηρίζεται σε εφαρμογές περιήγησης της οικογένειας Netscape/Mozilla. Δεν έχει δοκιμαστεί σε άλλους (π.χ., Safari, Opera).
Το CSS καθορίζει την τιμή blink
για την ιδιότητα text-decoration
. Όταν χρησιμοποιείται, κάνει κάθε κείμενο με στοιχεία αυτής της ιδιότητας να αναβοσβήνει με προκαθορισμένο ρυθμό. Δεν διακόπτεται από τον χρήστη, ούτε είναι δυνατή η απενεργοποίησή του ως προτίμηση πράκτορα χρήστη. Το αναβοσβήσιμο συνεχίζεται όσο εμφανίζεται η σελίδα. Άρα, το περιεχόμενο που χρησιμοποιεί το στυλ text-decoration:blink
δεν ικανοποιεί το κριτήριο επιτυχίας διότι το αναβοσβήσιμο συνεχίζεται για περισσότερα από τρία δευτερόλεπτα.
Η σελίδα μιας λίστας προϊόντων χρησιμοποιεί το στυλ text-decoration:blink
επί στοιχείου για να προσελκύσει την προσοχή στις τιμές πώλησης. Έτσι, υπάρχει αποτυχία στην ικανοποίηση του κριτηρίου επιτυχίας διότι οι χρήστες δεν μπορούν να ελέγξουν το αναβοσβήσιμο.
Παράδειγμα κώδικα:
<p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε εμβόλιμα στυλ, εσωτερικά και εξωτερικά φύλλα στυλ για την ιδιότητα text-decoration
με τιμή "blink".
Εάν χρησιμοποιείται η ιδιότητα, καθορίστε εάν το προσδιορισμένο από λειτουργίες επιλογής αναγνωριστικό, κλάση ή στοιχείο στα οποία έχει καθοριστεί αυτή η ιδιότητα, χρησιμοποιούνται στο έγγραφο.
Εάν το βήμα #1 και βήμα #2 είναι αληθή, το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Τεχνολογίες που υποστηρίζουν περιεχόμενο που αναβοσβήνει εντός αντικειμένου, applet ή πρόσθετης λειτουργίας (plug-in).
Αυτή η αποτυχία σχετίζεται με:
Όταν αναβοσβήνει περιεχόμενο που αποδίδεται από πρόσθετη λειτουργία ή περιέχεται σε applet, ίσως δεν υπάρχει τρόπος παύσης του αναβοσβησίματος από τον πράκτορα χρήστη. Εάν ούτε η πρόσθετη λειτουργία, ούτε το applet, ούτε το ίδιο το περιεχόμενο παρέχει έναν μηχανισμό για παύση του περιεχομένου, ο χρήστης ίσως δεν διαθέτει επαρκή χρόνο για ανάγνωση του περιεχομένου μεταξύ των αναβοσβησιμάτων ή μπορεί να αποσπάται η προσοχή του σε βαθμό που ο χρήστης να μην είναι σε θέση να διαβάσει το υπόλοιπο περιεχόμενο στην σελίδα.
Ένα applet εμφανίζει μια διαφήμιση σε ειδησεογραφικό τόπο. Το applet αναβοσβήνει λέξεις κλειδιά στη διαφήμιση προκειμένου να προσελκυστεί η προσοχή του χρήστη σε αυτή. Δεν είναι δυνατή η παύση του αναβοσβησίματος μέσω οποιαδήποτε ρύθμισης πράκτορα χρήστη και το applet δεν παρέχει μηχανισμό για τον τερματισμό του.
Για κάθε σελίδα με περιεχόμενο που αναβοσβήνει σε πρόσθετη λειτουργία ή applet:
Καθορίστε εάν το περιεχόμενο συνεχίζει να αναβοσβήνει για περισσότερο από 5 δευτερόλεπτα.
Καθορίστε εάν υπάρχει μέσο για παύση του περιεχομένου που αναβοσβήνει.
Εάν το βήμα #1 είναι αληθές και το βήμα #2 είναι αληθές, το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει μια συνθήκη αποτυχίας για όλες τις τεχνικές που περιλαμβάνουν επεξηγήσεις. Εάν η "επεξήγηση" δεν περιλαμβάνει όλο τον διάλογο (είτε αυτολεξεί, είτε επί της ουσίας), καθώς και όλους τους σημαντικούς ήχους, τότε οι "Επεξηγήσεις" δεν είναι πραγματικές επεξηγήσεις.
ΣΗΜΕΙΩΣΗ: Οι επεξηγήσεις απλοποιούν μερικές φορές το προφορικό κείμενο για να διευκολύνουν την ανάγνωσή του και να αποφευχθεί τυχόν εξαναγκασμός του θεατή να διαβάσει με πολύ γρήγορο ρυθμό. Αυτή είναι η τυπική διαδικασία και δεν ακυρώνει την επεξήγηση.
Τα παραδείγματα ροών κειμένου που δεν είναι επεξηγήσεις περιλαμβάνουν:
κείμενο που περιέχει διάλογο (πιθανόν απλοποιημένος διάλογος) αλλά δεν περιγράφει σημαντικούς ήχους
κείμενο που παραλείπει διαλόγους κατά τη διάρκεια μερών του υλικού
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Προβάλλετε το υλικό με ενεργοποιημένες τις επεξηγήσεις.
Ελέγξτε ότι το σύνολο των διαλόγων συνοδεύεται από επεξήγηση.
Ελέγξτε ότι όλοι οι σημαντικοί ήχου επεξηγούνται.
Τα βήματα #2 και #3 είναι αληθή.
Γενικά.
Αυτή η αποτυχία σχετίζεται με:
Αυτό το έγγραφο περιγράφει αποτυχία που εμφανίζεται όταν η αφαίρεση της έμφασης από στοιχείο φόρμας, όπως με την μετακίνηση στο επόμενο στοιχείο, προκαλεί αλλαγή περιβάλλοντος.
Ο χρήστης συμπληρώνει με τη σειρά τα πεδία στη φόρμα. Όταν κινείται από το τρίτο πεδίο στο τέταρτο, υποβάλλεται η φόρμα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε όλα τα στοιχεία φόρμας.
Επεξεργαστείτε τα με τη σειρά.
Ελέγξτε εάν η φόρμα υποβάλλεται όταν μετακινείστε από το ένα πεδίο στο επόμενο.
Ελέγξτε εάν η μετακίνηση από το ένα πεδίο στο επόμενο ανοίγει νέα παράθυρα.
Ελέγξτε εάν η μετακίνηση από το ένα πεδίο στο επόμενο εκτελεί μετάβαση σε άλλη οθόνη.
Εάν το βήμα #3, #4 ή #5 είναι αληθές, τότε ισχύει αυτό το κριτήριο αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται όταν το περιεχόμενο δημιουργεί μια κατάσταση στην οποία ο χρήστης μπορεί να εισάγει το περιεχόμενο με χρήση του πληκτρολογίου, αλλά δεν μπορεί να πραγματοποιήσει έξοδο με χρήση του πληκτρολογίου.
Αυτή η αποτυχία σχετίζεται με:
Όταν το περιεχόμενο περιλαμβάνει πολλαπλές μορφές, συχνά χρειάζονται ένας ή περισσότεροι πράκτορες χρήστη ή πρόσθετες λειτουργίες για την επιτυχή παρουσίαση του περιεχομένου σε χρήστες. Για παράδειγμα, μια σελίδα που περιλαμβάνει XHTML, SVG, SMIL και XForms μπορεί να απαιτεί τη φόρτωση από εφαρμογή περιήγησης έως και τριών διαφορετικών πρόσθετων λειτουργιών, προκειμένου ο χρήστης να αλληλεπιδράσει επιτυχώς με το περιεχόμενο. Μερικές πρόσθετες λειτουργίες δημιουργούν μια συνηθισμένη κατάσταση κατά την οποία η επισήμανση του πληκτρολογίου μπορεί να "κολλήσει" σε μία πρόσθετη λειτουργία, αφήνοντας ένα άτομο που χρησιμοποιεί μόνο πληκτρολόγιο χωρίς δρόμο επιστροφής στο υπόλοιπο περιεχόμενο.
Μια πρόσθετη λειτουργία παγιδεύει τον χρήστηΈνας χρήστης μετακινείται με στηλοθέτες και δεν μπορεί να επιστρέψει σε περιεχόμενο εκτός του περιεχομένου της πρόσθετης λειτουργίας με το πληκτρολόγιο. Ο χρήστης πρέπει να επανεκκινήσει την εφαρμογή περιήγησης για να αναλάβει εκ νέου τον έλεγχο και να μεταβεί σε νέα σελίδα και δεν είναι σε θέση να αποκτήσει πρόσβαση σε οποιοδήποτε περιεχόμενο πέραν αυτού της πρόσθετης λειτουργίας.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Με χρήση πληκτρολογίου, πραγματοποιήστε πλοήγηση στο περιεχόμενο.
Ελέγξτε εάν η επισήμανση πληκτρολογίου είναι "παγιδευμένη" και είναι δυνατή η μετακίνησή της εκτός του περιεχομένου της πρόσθετης λειτουργίας χωρίς κλείσιμο του πράκτορα χρήστη ή επανεκκίνηση του συστήματος.
Εάν η επισήμανση του πληκτρολογίου "παγιδευτεί", τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση αυτού του κριτηρίου επιτυχίας και της απαίτησης συμμόρφωσης 5.
Ιστότοποι που απαιτούν σύνδεση χρήστη για την υποβολή δεδομένων εισόδου και τερματίζουν την περίοδο λειτουργίας μετά από περίοδο αδράνειας.
Αυτή η αποτυχία σχετίζεται με:
Οι διακομιστές Ιστού που απαιτούν πιστοποίηση χρήστη διαθέτουν έναν μηχανισμό περιόδου λειτουργίας, στον οποίο ο χρόνος σύνδεσης μιας περιόδου λειτουργίας λήγει μετά από περίοδο αδράνειας εκ μέρους του χρήστη. Αυτό συμβαίνει συχνά για λόγους ασφαλείας, προκειμένου να προστατευθούν οι χρήστες που θεωρείται ότι έχουν αφήσει τον υπολογιστή τους εκτεθειμένο σε κατάσταση που κάποιος θα μπορούσε να τους βλάψει, όπως π.χ. εκτελώντας τραπεζικές μεταφορές χρημάτων ή αγορές χωρίς άδεια. Ένας χρήστης με αναπηρία μπορεί ακόμα να εργάζεται για τη συμπλήρωση μιας φόρμας, καθώς είναι πιθανόν να χρειάζεται περισσότερο χρόνο για τη συμπλήρωση της φόρμας από ότι φυσιολογικά θα αναμενόταν. Με την επαναπιστοποίηση, εάν η κατάσταση της περιόδου λειτουργίας του χρήστη δεν αποκατασταθεί και μαζί και όλα τα δεδομένα που καταχωρίστηκαν στη φόρμα προηγουμένως, ο/η χρήστης θα πρέπει να ξεκινήσει από την αρχή. Και στην περίπτωση αυτών των χρηστών, ο χρόνος σύνδεσης της περιόδου λειτουργίας θα λήξει ξανά πριν ολοκληρώσουν τη συμπλήρωση της φόρμας. Προκύπτει άρα η περίπτωση ενός χρήστη που χρειάζεται περισσότερο χρόνο για να ολοκληρώσει τη φόρμα και δεν τα καταφέρνει ποτέ.
Ένας χρήστης υποβάλλει μια φόρμα σε εξουσιοδοτημένο ιστότοπο αφού έχει εκπνεύσει η σύνδεσή του. Με την υποβολή της φόρμας, εμφανίζεται μήνυμα για να συνδεθεί ξανά και τότε μεταφέρεται σε μια γενική σελίδα καλωσορίσματος. Δεν πραγματοποιείται επεξεργασία των δεδομένων και πρέπει να προσπαθήσετε ξανά.
Ένας χρήστης υποβάλλει μια φόρμα σε εξουσιοδοτημένο ιστότοπο αφού έχει εκπνεύσει η σύνδεσή του. Με την υποβολή της φόρμας, εμφανίζεται μήνυμα για να συνδεθεί ξανά και τότε επιστρέφει στη σελίδα όπου βρισκόταν πριν τη σύνδεση, η οποία σε αυτή την περίπτωση περιέχει τη φόρμα που προσπάθησε να υποβάλει. Ωστόσο, η φόρμα δεν είναι συμπληρωμένη με τα δεδομένα που μόλις εισήγαγε και πρέπει να τα καταχωρίσει ξανά.
Σε έναν ιστότοπο όπου απαιτείται πιστοποίηση, συλλέγονται τα δεδομένα εισόδου του χρήστη, και όπου τερματίζεται η περίοδος λειτουργίας του χρήστη μετά από συγκεκριμένη περίοδο αδράνειας:
Εισάγετε δεδομένα εισόδου χρήστη όπως απαιτείται, αλλά επιτρέψτε τη λήξη της περιόδου λειτουργίας. Έπειτα, υποβάλετε τη φόρμα.
Όταν σας ζητηθεί, εκτελέστε επαναπιστοποίηση με τον διακομιστή.
Καθορίστε εάν η λειτουργία εκτελείται με χρήση των δεδομένων που υποβληθήκαν προηγουμένως.
Εάν το βήμα #3 είναι ψευδές, ο ιστότοπος αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει την αποτυχία που προκύπτει όταν μια εικόνα χρησιμοποιεί χρώματα για τη μεταφορά πληροφοριών, όμως το εναλλακτικό κειμένου για την εικόνα δεν μεταφέρει αυτές τις πληροφορίες. Αυτό μπορεί να προκαλέσει προβλήματα για άτομα με τύφλωση ή αχρωματοψία διότι δεν θα είναι σε θέση να αντιληφθούν τις πληροφορίες που μεταφέρονται με τις διαφορές χρώματος.
Ένα γράφημα ράβδων των δεδομένων πωλήσεων παρέχεται ως εικόνα. Το γράφημα περιλαμβάνει ετήσια στοιχεία για τέσσερις υπαλλήλους στο τμήμα πωλήσεων. Το εναλλακτικό κειμένου για την εικόνα λέει, "Το ακόλουθο γράφημα ράβδων εμφανίζει τα ετήσια στοιχεία πωλήσεων για το τμήμα πωλήσεων. Η Μαρία πούλησε 3,1 εκατομμύρια, ο Φρεντ 2,6 εκ., ο Μπομπ 2,2 εκ. και ο Ανδρέας 3,4 εκ. Οι κόκκινες ράβδοι υποδεικνύουν πωλήσεις κάτω από την ετήσια ποσόστωση". Αυτή το εναλλακτικό κειμένου αποτυγχάνει στην παροχή των πληροφοριών που μεταφέρει το χρώμα στην εικόνα. Το εναλλακτικό θα έπρεπε να υποδεικνύει ποιοι δεν καλύπτουν την ποσόστωση πωλήσεων αντί να βασίζεται στο χρώμα.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για όλες τις εικόνες στο περιεχόμενο που μεταφέρουν πληροφορίες μέσω διαφορών χρώματος:
Ελέγξτε ότι οι πληροφορίες που μεταφέρονται με διαφορές χρώματος δεν περιλαμβάνονται στο εναλλακτικό κειμένου για την εικόνα.
Εάν το βήμα #1 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει πώς ο προσδιορισμός περιεχομένου μόνο από το σχήμα ή τη θέση του καθιστά δύσκολη την κατανόηση και λειτουργία του περιεχομένου. Όταν χρησιμοποιείται μόνο η οπτική ταυτοποίηση ή η θέση, οι χρήστες με προβλήματα όρασης αντιμετωπίζουν δυσκολία στον εντοπισμό του περιεχομένου καθώς δεν μπορούν να δουν την οθόνη ή αντιλαμβάνονται μόνο μικρό μέρος της οθόνης κάθε φορά. Επίσης, η θέση του περιεχομένου μπορεί να ποικίλει εάν διαφοροποιείται η διάταξη της σελίδας λόγω μεταβολών στο μέγεθος της γραμματοσειράς, του παραθύρου ή της οθόνης.
Οι οδηγίες πλοήγησης για έναν ιστότοπο λένε, "Για να μεταβείτε στην επόμενη σελίδα, πατήστε το κουμπί στα δεξιά. Για να επιστρέψετε στην προηγούμενη σελίδα, πατήστε το κουμπί στα αριστερά."
Ένας χρήστης διαβάζει ένα άρθρο ειδήσεων σε μια ηλεκτρονική εφημερίδα. Το άρθρο περιέχει μια εικόνα και πρόσθετους συνδέσμους για περισσότερες πληροφορίες. Εντός του κειμένου του άρθρου υπάρχει η πρόταση, "Δείτε την πλευρική γραμμή στα αριστερά της εικόνας για συνδέσμους σε πρόσθετες πληροφορίες." Ο χρήστης μιας υποστηρικτικής τεχνολογίας θα δυσκολευτεί να βρει την εικόνα και την πλευρική γραμμή. Ορισμένες εναλλακτικές θα ήταν να περιληφθεί η λίστα των συνδέσμων εντός του κειμένου, να παρασχεθεί ένας σύνδεσμο εντός της σελίδας μέσα στο κείμενο που θα συνδέει με την πλευρική γραμμή, να παρασχεθεί μια επικεφαλίδα για την πλευρική μπάρα που θα χρησιμοποιηθεί για πλοήγηση και να υπάρξει παραπομπή για την επικεφαλίδα στις οδηγίες.
Ένας χρήστης συμπληρώνει μια ηλεκτρονική έρευνα. Υπάρχουν τρία κουμπιά στο κάτω μέρος της φόρμας της έρευνας. Οι εντολές λένε, "Πατήστε το τετράγωνο κουμπί για έξοδο από την έρευνα χωρίς αποθήκευση. Πατήστε το τριγωνικό κουμπί για να αποθηκεύσετε τα τρέχοντα αποτελέσματα της έρευνας. Μπορείτε να επιστρέψετε αργότερα για να ολοκληρώσετε την έρευνα. Πατήστε το στρογγυλό κουμπί για να υποβάλετε τα αποτελέσματα της έρευνας." Ένας χρήστης εφαρμογής ανάγνωσης οθόνης δεν μπορεί να καθορίσει ποιο κουμπί είναι τετράγωνο, τριγωνικό ή στρογγυλό. Τα κουμπιά πρέπει να έχουν πρόσθετες πληροφορίες για υπόδειξη των λειτουργιών τους.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Εξετάστε την Ιστοσελίδα για κειμενικές παραπομπές προς περιεχόμενο εντός της Ιστοσελίδας.
Ελέγξτε ότι οι παραπομπές δεν βασίζονται μόνο στο σχήμα ή τη θέση του περιεχομένου.
Εάν το βήμα #2 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες που υποστηρίζουν API προσβασιμότητας.
Αυτή η αποτυχία σχετίζεται με:
Όταν χρησιμοποιούνται βασικά στοιχεία ελέγχου από προσβάσιμες τεχνολογίες, συνήθως είναι προγραμματισμένα με τρόπο που χρησιμοποιεί και υποστηρίζει το API προσβασιμότητας. Εάν όμως δημιουργούνται προσαρμοσμένα στοιχεία ελέγχου, τότε εξαρτάται από τον προγραμματιστή η επαλήθευση ότι το νέο στοιχείο ελέγχου που δημιουργήθηκε υποστηρίζει το API προσβασιμότητας. Εάν αυτό δεν γίνει, τότε οι υποστηρικτικές τεχνολογίες δεν θα μπορούν να καταλάβουν τι είναι αυτό το στοιχείο ελέγχου ή πώς θα το λειτουργήσουν ή ακόμα και εάν υπάρχει.
Μια συσκευή αναπαραγωγής μουσικής είναι σχεδιασμένη με προσαρμοσμένα στοιχεία ελέγχου που μοιάζουν με μουσικές νότες για την ένταση του ήχου, τον τόνο κ.λπ. Ο προγραμματιστής δεν προσδίδει υποστήριξη API προσβασιμότητας στο νέο στοιχείο ελέγχου. Ως αποτέλεσμα - Δεν είναι δυνατός ο προσδιορισμός ή ο έλεγχος των στοιχείων ελέγχου από AT.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
Χρησιμοποιώντας τη λειτουργία ελέγχου προσβασιμότητας για την τεχνολογία (ή εάν δεν είναι διαθέσιμη, ελέγξτε τον κώδικα ή εκτελέστε δοκιμή με υποστηρικτική τεχνολογία), ελέγξτε τα στοιχεία ελέγχου για να δείτε εάν υποστηρίζουν το API προσβασιμότητας.
Εάν το βήμα #1 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας
Όλες οι τεχνολογίες που υποστηρίζουν οπτική κίνηση ή κύλιση.
Αυτή η αποτυχία σχετίζεται με:
Σε αυτή την τεχνική αποτυχίας, υπάρχει περιεχόμενο σε κίνηση ή κύλιση του οποίου δεν είναι δυνατή η παύση ή η επανέναρξη από χρήστες. Σε αυτή την περίπτωση, μερικοί χρήστες με περιορισμένη όραση ή νοητικές αναπηρίες δεν θα είναι σε θέση να αντιληφθούν το περιεχόμενο.
Μια σελίδα έχει έναν κυλιόμενο πίνακα ειδήσεων χωρίς μηχανισμό παύσης του. Μερικοί χρήστες δεν είναι σε θέση να διαβάσουν το κυλιόμενο περιεχόμενο.
Σε μια σελίδα με περιεχόμενο σε κίνηση ή κύλιση,
Ελέγξτε ότι παρέχεται μηχανισμός στην Ιστοσελίδα ή τον παράγοντα χρήστη για την παύση του περιεχομένου σε κίνηση ή κύλιση.
Χρησιμοποιήστε τον μηχανισμό παύσης για να σταματήσετε το περιεχόμενο σε κίνηση ή κύλιση.
Ελέγξτε ότι η κίνηση ή η κύλιση σταμάτησε και δεν ξαναξεκινά από μόνη της.
Ελέγξτε ότι παρέχεται μηχανισμός στην Ιστοσελίδα ή τον πράκτορα χρήστη για την επανέναρξη του περιεχομένου σε παύση.
Χρησιμοποιήστε τον μηχανισμό επανέναρξης που παρέχεται για να ξαναξεκινήσει το κινούμενο περιεχόμενο.
Ελέγξτε ότι η κίνηση ή η κύλιση ξαναξεκίνησε από το σημείο όπου είχε σταματήσει.
Εάν τα βήματα #1, #3, #4 ή #6 είναι ψευδή, τότε το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται στο Μοντέλο Αντικειμένου Εγγράφου (DOM) για HTML και XHTML.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι είναι δυνατή η ερμηνεία των ιστοσελίδων με τρόπο συνεκτικό από πράκτορες χρήστη, συμπεριλαμβανομένης της υποστηρικτικής τεχνολογίας. Εάν υπάρχει αμφισημία, οι διαφορετικοί πράκτορες χρήστη, συμπεριλαμβανομένων υποστηρικτικών τεχνολογιών, μπορούν να παρουσιάσουν πληροφορίες στους χρήστες τους. Για παράδειγμα, παρουσιάζονται διαφορετικές πληροφορίες σε χρήστες υποστηρικτικών τεχνολογιών σε σχέση με άλλους δημοφιλείς πράκτορες χρήστη. Μερικά στοιχεία και παράμετροι σε γλώσσες επισημείωσης πρέπει να έχουν μοναδικές τιμές και εάν αυτή η απαίτηση δεν πληρείται, το αποτέλεσμα μπορεί να είναι λανθασμένο ή περιεχόμενο μη μοναδικά διαχωριζόμενο. Για παράδειγμα, όταν οι τιμές παραμέτρου id δεν είναι μοναδικές, είναι ιδιαίτερα προβληματικές κατά την παραπομπή από ετικέτες, κεφαλίδες σε πίνακες δεδομένων ή κατά τη χρήση ως αναγνωριστικά τμήματος, καθώς οι πράκτορες χρήστη δεν διαθέτουν αρκετές πληροφορίες για την παροχή καθορισμένων ουσιωδών σχέσεων (π.χ. για να καθοριστεί ποια ετικέτα πάει με ποιο στοιχείο).
Ένα στοιχείο ετικέτας με τιμή παραμέτρου idref που αναφέρεται σε μη υπαρκτό αναγνωριστικό
Τιμή παραμέτρου id που δεν είναι μοναδική.
Τιμή παραμέτρου accesskey που δεν είναι μοναδική.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε για τιμές id και accesskey που δεν είναι μοναδικές στο έγγραφο.
Ελέγξτε ότι οι τιμές παραμέτρων με τιμή idref έχουν αντίστοιχη τιμή id.
Για πίνακες που χρησιμοποιούν την παράμετρο axis, ελέγξτε ότι όλες οι τιμές που αναγράφονται την παράμετρο axis έχουν αντίστοιχη τιμή id σε κελί κεφαλίδας πίνακα στον ίδιο πίνακα.
Για αντιστοιχίσεις εικόνων στην πλευρά του πελάτη, ελέγξτε ότι η τιμή της παραμέτρου usemap έχει αντίστοιχη τιμή id εάν η παράμετρος usemap δεν είναι URI.
Εάν το βήμα #1, #3 ή #4 είναι αληθές ή το βήμα #2 είναι ψευδές, τότε ισχύει αυτό το κριτήριο αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Ιστότοποι που παρέχουν εναλλακτικές, συμμορφούμενες με το WCAG εκδόσεις μη συμμορφούμενου πρωταρχικού περιεχομένου.
Αυτή η αποτυχία σχετίζεται με:
Αυτή η τεχνική αποτυχίας περιγράφει την κατάσταση στην οποία παρέχεται μια εναλλακτική, συμμορφούμενη έκδοση του περιεχομένου, αλλά δεν υπάρχει άμεσος τρόπος ώστε ο χρήστης να διαπιστώσει ότι είναι διαθέσιμη και να μάθει που μπορεί να τη βρει. Τέτοιο περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας διότι ο χρήστης δεν μπορεί να βρει τη συμμορφούμενη έκδοση.
'Ένας σύνδεσμος ή μια αναζήτηση μεταφέρει τον χρήστη απευθείας σε μία από τις μη συμμορφούμενες σελίδες στον ιστότοπο. Δεν υπάρχει ένδειξη ότι είναι διαθέσιμη μια εναλλασσόμενη σελίδα, ούτε διαδρομή προς την εναλλασσόμενη σελίδα από τη μη συμμορφούμενη σελίδα.
Οι μη συμμορφούμενες σελίδες στον ιστότοπο ενημερώνουν τον χρήστη ότι μια συμμορφούμενη έκδοση είναι διαθέσιμη και παρέχουν σύνδεσμο προς την αρχική σελίδα. Ωστόσο, ο χρήστης πρέπει να εκτελέσει αναζήτηση στον ιστότοπο για τη συμμορφούμενη έκδοση της σελίδας, άρα η λειτουργία δεν ικανοποιεί τις απαιτήσεις του κριτηρίου επιτυχίας.
Ένας χρήστης είναι σε θέση να χρησιμοποιήσει τον μη συμμορφούμενο ιστότοπο για τις περισσότερες σελίδες. Όμως, όταν ο χρήστης δεν μπορεί να έχει πρόσβαση σε συγκεκριμένη σελίδα, δεν υπάρχει τρόπος να βρει τη συμμορφούμενη έκδοση της σελίδας.
Προσδιορίστε μια μη συμμορφούμενη σελίδα που διαθέτει εναλλακτική συμμορφούμενη έκδοση.
Καθορίστε εάν η μη συμμορφούμενη σελίδα παρέχει σύνδεσμο προς τη συμμορφούμενη έκδοση.
Εάν το βήμα #2 είναι ψευδές, το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της συνθήκης αποτυχίας είναι να αντιμετωπίσει καταστάσεις, στις οποίες ενημερώνεται το μη κειμενικό περιεχόμενο, όμως το εναλλακτικό κειμένου δεν ενημερώνεται ταυτόχρονα. Εάν συνεχίζει να μην είναι δυνατή η χρήση του κειμένου στο εναλλακτικό κειμένου αντί του μη κειμενικού περιεχομένου χωρίς απώλεια πληροφοριών ή λειτουργιών, τότε έχουμε αποτυχία διότι σταματά να αποτελεί εναλλακτικό κειμένου για το μη κειμενικό περιεχόμενο.
Παράδειγμα αποτυχίας 1: Ένα γράφημα πωλήσεων ενημερώνεται με τα αποτελέσματα Οκτωβρίου, αλλά το εναλλακτικό κειμένου περιγράφει ακόμα τα αποτελέσματα Σεπτεμβρίου.
Παράδειγμα αποτυχίας 2: Οι εικόνες σε μια αρχική σελίδα αλλάζουν καθημερινά, όμως τα εναλλακτικά κειμένου δεν ενημερώνονται ταυτόχρονα.
Παράδειγμα αποτυχίας 3: Η παράμετρος προέλευσης των εικόνων σε μια σελίδα ενημερώνεται περιοδικά με χρήση αρχείου εντολών, όμως τα εναλλακτικά κειμένου δεν ενημερώνονται ταυτόχρονα.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε κάθε εναλλακτικό κειμένου για να δείτε εάν περιγράφει περιεχόμενο διαφορετικό από το μη κειμενικό περιεχόμενο που εμφανίζεται εκείνη τη στιγμή.
Εάν το βήμα #1 είναι αληθές, τότε το εναλλακτικό κειμένου δεν είναι ενημερωμένο με το τρέχον στοιχείο, η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Γενικά
Αυτή η αποτυχία σχετίζεται με:
Αποτυχία λόγω εμφάνισης νέων παραθύρων τη στιγμή που ο χρήστης δεν τα περιμένει. Τα νέα παράθυρα αφαιρούν την επισήμανση από αυτό που διαβάζει ή κάνει ο χρήστης. Αυτό είναι καλό όταν ο χρήστης έχει αλληλεπιδράσει με κάποιο κομμάτι της διεπαφής χρήστη και αναμένει την εμφάνιση ενός νέου παραθύρου, όπως ένα πλαίσιο διαλόγου επιλογών. Η αποτυχία προκύπτει όταν τα αναδυόμενα παράθυρα εμφανίζονται απροσδόκητα.
Όταν ένας χρήστης μεταβαίνει σε μια σελίδα, εμφανίζεται ένα νέο παράθυρο πάνω από το υπάρχον παράθυρο του πράκτορα χρήστη και η επισήμανση μετακινείται στο νέο παράθυρο.
Ένας χρήστης κάνει κλικ σε σύνδεσμο και εμφανίζεται ένα νέο παράθυρο. Ο αρχικός σύνδεσμος δεν διαθέτει συσχετισμένο κείμενο που να λέει ότι θα ανοίξει ένα νέο παράθυρο.
Ένας χρήστης κάνει κλικ στο σώμα μιας σελίδας και εμφανίζεται ένα νέο παράθυρο. Δεν υπάρχει ένδειξη ότι η περιοχή όπου έγινε κλικ έχει κάποια λειτουργία.
Ένας χρήστης κάνει κλικ σε κείμενο χωρίς διακόσμηση και εμφανίζεται ένα νέο παράθυρο. Η σελίδα δεν φέρει ορατή ένδειξη ότι η περιοχή είναι λειτουργική.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Φορτώστε την Ιστοσελίδα.
Ελέγξτε εάν εμφανίζονται νέα (πρόσθετα) παράθυρα.
Βρείτε κάθε ενεργοποιήσιμο στοιχείο, όπως σύνδεσμοι και κουμπιά, στην Ιστοσελίδα.
Ενεργοποιήστε κάθε στοιχείο.
Ελέγξτε εάν η ενεργοποίηση του στοιχείου ανοίγει νέο παράθυρο.
Ελέγξτε εάν τα στοιχεία που ανοίγουν νέα παράθυρα διαθέτουν συσχετισμένο κείμενο όπου αναφέρεται τι θα συμβεί. Είναι δυνατή η εμφάνιση του κειμένου στον σύνδεσμο ή είναι διαθέσιμο μέσω κρυφής συσχέτισης, όπως μια παράμετρος τίτλου HTML.
Εάν το βήμα #2 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εάν το βήμα #5 είναι αληθές και το βήμα #6 ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες εκτός από την αλληλεπίδραση φωνής.
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει μια συνθήκη αποτυχίας για κριτήριο επιτυχίας που περιλαμβάνει ήχο. Εάν ο ήχος δεν απενεργοποιείται αυτόματα εντός 3 δευτερολέπτων και δεν υπάρχει τρόπος απενεργοποίησης του ήχου, τότε δεν ικανοποιείται το κριτήριο επιτυχίας 1.4.2. Ήχοι που αναπαράγονται για πάνω από 3 δευτερόλεπτα όταν το περιεχόμενο δεν περιλαμβάνει μηχανισμό απενεργοποίησης του ήχου, εμπίπτουν σε αυτή τη συνθήκη αποτυχίας.
Ένας ιστότοπος με συνεχή αναπαραγωγή μουσικής παρασκηνίου
Ένας ιστότοπος με διήγηση που διαρκεί περισσότερο από 3 δευτερόλεπτα πριν σταματήσει και όπου δεν υπάρχει μηχανισμός διακοπής αυτής.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε ότι υπάρχει τρόπος στην Ιστοσελίδα για απενεργοποίηση κάθε ήχου που αναπαράγεται αυτόματα για περισσότερο από τρία δευτερόλεπτα.
Εάν το βήμα #1 δεν είναι αληθές, τότε το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας 1.4.2
Όλες οι τεχνολογίες που επιτρέπουν σε πράκτορες χρήστη να ελέγχουν τα χρώματα προσκηνίου και παρασκηνίου μέσω προσωπικών φύλλων στυλ ή άλλων μέσων.
Αυτή η αποτυχία σχετίζεται με:
Χρήστες με απώλεια όρασης ή νοητικούς, γλωσσικούς και μαθησιακούς περιορισμούς, συχνά προτιμούν συγκεκριμένους συνδυασμούς χρωμάτων προσκηνίου και παρασκηνίου. Σε ορισμένες περιπτώσεις,άτομα με χαμηλή όραση θα βρουν πιο εύκολο να δουν μια Ιστοσελίδα με λευκό κείμενο σε μαύρο παρασκήνιο και ενδέχεται να έχουν ρυθμίσει τον πράκτορα χρήστη τους για παρουσίαση αυτής της αντίθεσης. Πολλοί πράκτορες χρήστη καθιστούν εφικτό για συγγραφείς να επιλέξουν μια προτίμηση σχετικά με τα χρώματα προσκηνίου ή παρασκηνίου που θα επιθυμούσαν να δουν, χωρίς παράκαμψη όλων των στυλ που ορίζει ο συγγραφέας. Αυτό καθιστά δυνατό για χρήστες να εμφανίζουν σελίδες όπου χρώματα δεν έχουν καθοριστεί από τον συγγραφέα στον προτιμώμενό του χρωματικό συνδυασμό.
Εκτός εάν ένας συγγραφέας καθορίσει αμφότερα τα χρώματα προσκηνίου και παρασκηνίου, τότε αυτός (ο συγγραφέας) δεν μπορεί πλέον να εγγυηθεί ότι ο χρήστης θα λάβει μια αντίθεση που ικανοποιεί τις απαιτήσεις αντίθεσης. Εάν, για παράδειγμα, ο συγγραφέας καθορίσει ότι το κείμενο πρέπει να είναι γκρίζο, τότε μπορεί να παρακάμψει τις ρυθμίσεις του πράκτορα χρήστη και να αποδώσει μια σελίδα με γκρίζο κείμενο (που καθορίζεται από τον συγγραφέα) σε φωτεινό γκρίζο παρασκήνιο (που έχει οριστεί στον πράκτορα χρήστη από τον χρήστη). Η αρχή αυτή ισχύει και αντίστροφα. Εάν ο συγγραφέας επιβάλλει το παρασκήνιο να είναι λευκό, τότε το λευκό παρασκήνιο που καθορίζεται από τον συγγραφέα μπορεί να είναι όμοιο σε χρώμα με την χρωματική προτίμηση κειμένου που εκφράζει ο χρήστης στις ρυθμίσεις του πράκτορα χρήστη του, αποδίδοντας έτσι τη σελίδα σε μια κατάσταση που την καθιστά αδύνατη για χρήση από τον χρήστη. Καθώς ένας συγγραφέας δεν μπορεί να προβλέψει τον τρόπο με τον οποίο ένας χρήστης ενδέχεται να διαμορφώσει τις προτιμήσεις του, εάν ο συγγραφέας καθορίσει ένα χρώμα κειμένου προσκηνίου, τότε θα πρέπει να καθορίσει επίσης χρώμα παρασκηνίου που θα φέρει επαρκή αντίθεση με το προσκήνιο και αντίστροφα.
Δεν είναι απαραίτητο τα χρώματα προσκηνίου και παρασκηνίου να ορίζονται αμφότερα στον ίδιο κανόνα CSS. Καθώς οι ιδιότητες χρώματος CSS κληρονομούνται από προγονικά στοιχεία, είναι επαρκές εάν αμφότερα τα χρώματα προσκηνίου και παρασκηνίου ορίζονται είτε άμεσα ή μέσω κληρονομιάς, μέχρι τη στιγμή που το χρώμα εφαρμόζεται σε ένα δεδομένο στοιχείο.
Σημείωση: Η βέλτιστη πρακτική είναι να συμπεριληφθούν όλες οι καταστάσεις κειμένου. Για παράδειγμα, κείμενο, κείμενο συνδέσμου, κείμενο συνδέσμου που έχουν επισκεφθεί, κείμενο συνδέσμου με σήμανση ποντικιού και πληκτρολογίου, κ.λπ.
Στο παρακάτω παράδειγμα, το χρώμα παρασκηνίου καθορίζεται στο στοιχείο του σώματος, ωστόσο δεν καθορίζεται το χρώμα προσκηνίου. Συνεπώς, το παράδειγμα αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>A study of population dynamics</title>
</head>
<body bgcolor="white">
<p> ... document body...</p>
</body>
</html>
Στο παρακάτω παράδειγμα, το χρώμα προσκηνίου καθορίζεται στο στοιχείο του σώματος, ωστόσο δεν καθορίζεται το χρώμα παρασκηνίου. Συνεπώς, το παράδειγμα αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>A study of population dynamics</title>
</head>
<body color="white">
<p>... document body...</p>
</body>
</html>
Στο παρακάτω παράδειγμα, το χρώμα παρασκηνίου καθορίζεται στο φύλλο στυλ CSS, ωστόσο δεν καθορίζεται το χρώμα προσκηνίου. Συνεπώς, το παράδειγμα αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Setting the canvas background</title>
<style type="text/css">
body {background-color:white}
</style>
</head>
<body>
<p>My background is white.</p>
</body>
</html>
Στο παρακάτω παράδειγμα, το χρώμα προσκηνίου καθορίζεται στο φύλλο στυλ CSS, ωστόσο δεν καθορίζεται το χρώμα παρασκηνίου. Συνεπώς, το παράδειγμα αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας
Παράδειγμα κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Setting the canvas background</title>
<style type="text/css">
body {color:white}
</style>
</head>
<body>
<p>My foreground is white.</p>
</body>
</html>
Στο παρακάτω παράδειγμα, το χρώμα κειμένου συνδέσμου (προσκήνιο) ορίζεται στο στοιχείο του σώματος. Ωστόσο, το χρώμα παρασκηνίου δεν ορίζεται. Συνεπώς, το παράδειγμα αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας
Παράδειγμα κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>A study of population dynamics</TITLE>
<style type="text/css">
a:link { color: red }
a:visited { color: maroon }
a:active { color: fuchsia }
</style>
</head>
<body>
<p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε τον κώδικα της Ιστοσελίδας.
Ελέγξτε να δείτε εάν είναι παρόν το χρώμα προσκηνίου που ορίζει ο συγγραφέας
Ελέγξτε να δείτε εάν είναι παρόν το χρώμα παρασκηνίου που ορίζει ο συγγραφέας
Σημείωση 1: Το χρώμα και χρώμα παρασκηνίου μπορεί να καθοριστεί σε κάθε επίπεδο της επικάλυψης λειτουργιών επιλογής που προηγούνται, μέσω εξωτερικών φύλλων στυλ ή κανόνων κληρονομιάς.
Σημείωση 2: Το χρώμα παρασκηνίου ενδέχεται επίσης να ορίζεται μέσω μιας εικόνας παρασκηνίου με την ιδιότητα CSS "background-image" ή με την ιδιότητα CSS "background" (με το URI της εικόνας, π.χ. 'background: url("images/bg.gif")'). Με εικόνες παρασκηνίου, παραμένει απαραίτητος ο καθορισμός ενός χρώματος παρασκηνίου καθώς οι χρήστες ενδέχεται να έχουν απενεργοποιημένες τις εικόνες στο δικό τους πρόγραμμα περιήγησης. Η εικόνα παρασκηνίου όμως και το χρώμα παρασκηνίου χρειάζεται να ελεγχθούν.
Εάν το βήμα #2 είναι αληθές αλλά το βήμα #3 είναι ψευδές, Η εάν το βήμα #3 είναι αληθές αλλά το βήμα #2 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει μια συνθήκη αποτυχίας όταν η Ιστοσελίδα έχει έναν τίτλο, αλλά ο τίτλος δεν προσδιορίζει τα περιεχόμενα ή τον σκοπό της Ιστοσελίδας.
Τα παραδείγματα κειμένου που δεν είναι τίτλοι περιλαμβάνουν:
Προεπιλεγμένοι τίτλοι για εργαλεία συγγραφής, όπως
"Εισάγετε εδώ τον τίτλο του εγγράφου HTML,"
"Έγγραφο χωρίς τίτλο"
"Χωρίς τίτλο"
"Σελίδα χωρίς τίτλο"
"Νέα σελίδα 1"
Ονόματα αρχείων που τα ίδια δεν είναι περιγραφικά, όπως "report.html" ή "spk12.html"
Κενό κείμενο
κείμενο πλήρωσης ή χαρακτήρα κράτησης θέσης
Ένας ιστότοπος που δημιουργήθηκε με χρήση προτύπων περιλαμβάνει τον ίδιο τίτλο για κάθε σελίδα στον ιστότοπο. Άρα, δεν είναι δυνατή η χρήση του τίτλου για το διαχωρισμό των σελίδων.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε εάν ο τίτλος κάθε Ιστοσελίδας προσδιορίζει τα περιεχόμενα ή τον σκοπό της Ιστοσελίδας.
Εάν το βήμα #1 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να δείξει πώς η χρήση ενός γραφικού συμβόλου για μεταφορά πληροφοριών μπορεί να καταστήσει δύσκολη την κατανόηση. Ένα γραφικό σύμβολο ενδέχεται να είναι μια εικόνα, μια εικόνα κειμένου ή ένας γραφικός ή διακοσμητικός χαρακτήρας συμβόλου (γλύφος) που μεταδίδει πληροφορίες με μη λεκτικό τρόπο. Παραδείγματα γραφικών συμβόλων περιλαμβάνουν μια εικόνα ενός κόκκινου κύκλου με μια γραμμή μέσα σε αυτόν, ένα πρόσωπο "smiley" ή λογότυπο που αναπαριστά ένα σημάδι ελέγχου ή άλλο σύμβολο, το οποίο όμως δεν είναι ο χαρακτήρας με αυτό το νόημα. Χρήστες υποστηρικτικής τεχνολογίας ενδέχεται να δυσκολευτούν με τον προσδιορισμό του νοήματος του γραφικού συμβόλου. Εάν χρησιμοποιείται ένα γραφικό σύμβολο για τη μεταφορά πληροφοριών, προβείτε στην παροχή εναλλακτικής χρησιμοποιώντας τα χαρακτηριστικά της τεχνολογίας ή χρησιμοποιήστε διαφορετικά μηχανισμό που μπορεί να σημανθεί με μια εναλλακτική για την αναπαράσταση του γραφικού συμβόλου. Για παράδειγμα, είναι δυνατή η χρήση μιας εικόνας με εναλλακτικό κειμένου αντί του γλύφου.
Ένα καλάθι αγοράς χρησιμοποιεί δύο μεμονωμένους γλύφους για να υποδείξει εάν ένα αντικείμενο είναι διαθέσιμο για άμεση αποστολή. Ένα σημάδι ελέγχου υποδεικνύει ότι το αντικείμενο είναι διαθέσιμο και έτοιμο για αποστολή. Ένα σημάδι "x" υποδεικνύει ότι το αντικείμενο είναι σε ανεκτέλεστη παραγγελία αυτή τη στιγμή και μη διαθέσιμο για άμεση αποστολή. Ένας χρήστης υποστηρικτικής τεχνολογίας δεν μπορεί να προσδιορίσει την κατάσταση του τρέχοντος αντικειμένου.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Εξετάστε τη σελίδα για μη κειμενικά σημάδια που μεταφέρουν πληροφορίες.
Ελέγξτε εάν υπάρχουν άλλα μέσα για τον καθορισμό των πληροφοριών που μεταφέρονται από τα μη κειμενικά σημάδια.
Εάν το βήμα #2 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει μια συνθήκη αποτυχίας για όλες τις τεχνικές που περιλαμβάνουν εναλλακτικά κειμένου. Εάν δεν είναι δυνατή η χρήση του κειμένου στο "εναλλακτικό κειμένου" αντί του μη κειμενικού περιεχομένου χωρίς απώλεια πληροφοριών ή λειτουργιών, τότε έχουμε αποτυχία διότι ουσιαστικά δεν αποτελεί εναλλακτική για το μη κειμενικό περιεχόμενο,
Τα παραδείγματα κειμένου που δεν είναι εναλλακτικά κειμένου περιλαμβάνουν:
κείμενο κράτησης θέσης όπως " " ή "spacer" ή "image" ή "picture" κ.λπ., που τοποθετούνται μέσα στη θέση του "εναλλακτικού κειμένου" σε εικόνες.
παραπομπές προγραμματισμού που δεν μεταφέρουν πληροφορίες ή λειτουργίες του μη κειμενικού περιεχομένου όπως "picture 1", "picture 2" ή "0001", "0002" ή "Intro#1", "Intro#2".
ονόματα αρχείων που δεν είναι τα ίδια έγκυρα εναλλακτικά κειμένου, όπως "Oct.jpg" ή "Chart.jpg" ή "sales\\oct\\top3.jpg"
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε κάθε εναλλακτικό κειμένου μήπως δεν αποτελεί πράγματι εναλλακτικό κειμένου για το μη κειμενικό περιεχόμενο.
Εάν το βήμα #1 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Συστατικά στοιχεία με την ίδια λειτουργία εντός διαφορετικών Ιστοσελίδων αναγνωρίζονται πιο εύκολα εάν έχει γίνει συνεκτική χρήση ετικετών σε αυτά. Εάν η ονοματοδοσία δεν είναι συνεκτική, μπορεί να προκληθεί σύγχυση σε χρήστες.
Σημείωση: Οι εναλλακτικές κειμένου που είναι "συνεκτικές" δεν είναι πάντα "πανομοιότυπες". Για παράδειγμα, μπορεί να έχετε ένα γραφικό βέλος στο κάτω μέρος μιας Ιστοσελίδας που συνδέει με την επόμενη Ιστοσελίδα. Το εναλλακτικό κειμένου είναι "Μετάβαση στη σελίδα 4." Φυσικά, θα ήταν άστοχο να επαναληφθεί το συγκεκριμένο εναλλακτικό κειμένου στην επόμενη Ιστοσελίδα. Θα ήταν πιο κατάλληλο να ειπωθεί "Μετάβαση στη σελίδα 5". Αν και αυτά τα εναλλακτικά κειμένου δεν είναι πανομοιότυπες, θεωρούνται συνεκτικές και άρα δεν συνιστούν αποτυχίες για αυτό το κριτήριο επιτυχίας.
Ένα από τα πιο συνηθισμένα παραδείγματα χρήσης μη συνεκτικών ετικετών για συστατικά στοιχεία με την ίδια λειτουργία είναι η χρήση ενός κουμπιού με ένδειξη "search" (αναζήτηση) στη μία σελίδα και ενός κουμπιού με την ένδειξη "find" (εύρεση) σε άλλη, ενώ εκτελούν πανομοιότυπη λειτουργία.
Ένα ηλεκτρονικό εργαλείο συγγραφής που χρησιμοποιεί το κουμπί "Αποθήκευση σελίδας" στη μία σελίδα και το κουμπί "Αποθήκευση" στην άλλη, για την εκτέλεση της ίδιας λειτουργίας και στις δύο περιπτώσεις.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Σε ένα σύνολο Ιστοσελίδων, βρείτε τα συστατικά στοιχεία με την ίδια λειτουργία που επαναλαμβάνονται σε πολλαπλές Ιστοσελίδες.
Για κάθε συστατικό στοιχείο με την ίδια λειτουργία του βήματος #1, ελέγξτε ότι η ονοματοδοσία είναι συνεκτική.
Εάν το βήμα #2 είναι ψευδές, τότε αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει πώς η χρήση κενών χαρακτήρων, όπως διαστήματος, tab, αλλαγής γραμμής ή επιστροφής γραμμής, για τη μορφοποίηση μεμονωμένων λέξεων οπτικά, μπορεί να αποτελέσει αποτυχία για την κανονική παρουσίαση ακολουθιών με νόημα. Όταν εισάγονται κενοί χαρακτήρες για τον έλεγχο της απόστασης των γραμμάτων εντός λέξης, μπορεί να αλλάζουν την ερμηνεία της λέξης ή να καθιστούν αδύνατη την αναγνώρισή της μέσω προγραμματισμού, ως μίας λέξης.
Η εισαγωγή χαρακτήρων λευκού διαστήματος σε ένα αρκτικόλεξο δεν συνιστά παράδειγμα αποτυχίας, εφόσον το λευκό διάστημα δεν αλλάζει την ερμηνεία του αρκτικόλεξου και το βοηθά να γίνει πιο εύκολα κατανοητό.
Η χρήση λευκού διαστήματος μεταξύ λέξεων για οπτική μορφοποίηση δεν συνιστά αποτυχία, εφόσον δεν αλλάζει την ερμηνεία των λέξεων.
Αυτό το παράδειγμα έχει λευκά διαστήματα εντός μιας λέξης για να μεγαλώσει την απόσταση μεταξύ των γραμμάτων σε μια επικεφαλίδα. Οι εφαρμογές ανάγνωσης οθόνης ίσως διαβάζουν πιο εύκολα κάθε γράμμα ξεχωριστά αντί της λέξης "Welcome".
Παράδειγμα κώδικα:
<h1>W e l c o m e</h1>
μπορεί επίσης να χρησιμοποιηθεί για την προσθήκη λευκού διαστήματος, παράγοντας παρόμοιες αποτυχίες:
Παράδειγμα κώδικα:
<h1>H E L L O</h1>
Στην ιαπωνική, οι χαρακτήρες Han (Kanji) έχουν πολλαπλές αναγνώσεις που σημαίνουν διαφορετικά πράγματα. Σε αυτό το παράδειγμα, η λέξη διαβάζεται λανθασμένα διότι οι εφαρμογές ανάγνωσης οθόνης δεν αναγνωρίζουν τους χαρακτήρες ως λέξη, λόγω του λευκού διαστήματος μεταξύ των χαρακτήρων. Οι χαρακτήρες σημαίνουν "Τόκιο," αλλά οι εφαρμογές ανάγνωσης οθόνης λένε "Higashi Kyo".
Παράδειγμα κώδικα:
<h1>æ±ã€€äº¬</h1>
Στο κελί κεφαλίδας γραμμής ενός πίνακα δεδομένων με ιαπωνικό κείμενο, οι συγγραφείς συχνά δημιουργούν κάθετο κείμενο χρησιμοποιώντας χαρακτήρες αλλαγής γραμμής. Ωστόσο, οι εφαρμογές ανάγνωσης οθόνης δεν μπορούν να διαβάσουν σωστά τη λέξη του κάθετου κειμένου διότι η αλλαγή γραμμής εμφανίζεται εντός της λέξης. Στο ακόλουθο παράδειγμα, "æ±äº¬éƒ½"(Τόκιο-προς) θα διαβαστεί "Higashi Kyo Miyako".
Παράδειγμα κώδικα:
<table>
<caption>表1. 都é“府県別一覧表</caption>
<tr>
<td></td>
<th scope="col">(見出ã—セル 1.)</th>
<th scope="col">(見出ã—セル 2.)</th>
</tr>
<tr>
<th scope="row">æ±<br />京<br />都</th>
<td>(データセル 1.)</td>
<td>(データセル 2.)</td>
</tr>
・・・・・・
</table>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για κάθε λέξη που εμφανίζεται να έχει μη τυποποιημένο διάστημα μεταξύ χαρακτήρων:
Ελέγξτε εάν υπάρχουν λέξεις στο κείμενο του περιεχομένου που περιέχουν χαρακτήρες λευκού διαστήματος.
Εάν το βήμα #1 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει πώς η χρήση χαρακτήρων λευκού διαστήματος, όπως διάστημα, tab, αλλαγή γραμμής ή επιστροφή γραμμής, για τη μορφοποίηση στηλών δεδομένων σε κειμενικό περιεχόμενο συνιστά αποτυχία σωστής χρήσης της δομής. Οι υποστηρικτικές τεχνολογίες θα ερμηνεύσουν το περιεχόμενο με τη σειρά ανάγνωσης της τρέχουσας γλώσσας. Η χρήση χαρακτήρων λευκού διαστήματος για τη δημιουργία πολλαπλών στηλών δεν παρέχει τις πληροφορίες με φυσική σειρά ανάγνωσης. Έτσι, οι πληροφορίες δεν θα παρουσιαστούν στον χρήστη υποστηρικτικής τεχνολογίας με κατανοητό τρόπο.
Το απλό κείμενο δεν εξυπηρετεί για την απεικόνιση πολλαπλών στηλών κειμένου. Τροποποιήστε το περιεχόμενο για την παρουσίαση των δεδομένων με διαφορετική διάταξη. Εναλλακτικά, χρησιμοποιήστε μια τεχνολογία που παρέχει δομικά στοιχεία για την αναπαράσταση δεδομένων σε στήλες.
Το ακόλουθο παράδειγμα χρησιμοποιεί λανθασμένα χαρακτήρες λευκού διαστήματος για τη μορφοποίηση της παραγράφου σε δύο στήλες.
Παράδειγμα κώδικα:
Web Content Accessibility Guidelines including blindness and low vision,
2.0 (WCAG 2.0) covers a wide range of deafness and hearing loss, learning
issues and recommendations for making difficulties, cognitive limitations, limited
Web content more accessible. This movement, speech difficulties, and
document contains principles, others. Following these guidelines will
guidelines, Success Criteria, benefits, also make your Web content more
and examples that define and explain accessible to the vast majority of users,
the requirements for making Web-based including older users. It will also enable
information and applications accessible. people to access Web content using
"Accessible" means usable to a wide many different devices - including a
range of people with disabilities, wide variety of assistive technologies.
Εάν αυτός ο πίνακας έπρεπε να ερμηνευτεί και να αναγνωσθεί από εφαρμογή ανάγνωσης οθόνης, θα είχε τις εξής γραμμές:
Οι Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού συμπεριλαμβανομένης τύφλωσης και χαμηλής όρασης,
2.0 (WCAG 2.0), καλύπτουν ένα ευρύ φάσμα θεμάτων κώφωσης και απώλειας ακοής, μαθησιακά
προβλήματα και συστάσεις για να καταστήσει προβλήματα, νοητικούς περιορισμούς και περιορισμένο περιεχόμενο Ιστού
πιο προσβάσιμα. Αυτή η κίνηση, τα προβλήματα ομιλίας και
(οι επιπλέον γραμμές αφαιρέθηκαν για λόγους συντομίας)
Εάν η ροή του κειμένου διαμορφωνόταν εκ νέου ή η γραμματοσειρά άλλαζε από σταθερή σε μεταβλητή ή αυξανόταν σε μέγεθος τότε που πλέον οι γραμμές να μην χωρούσαν στη σελίδα, θα προέκυπταν παρόμοια ζητήματα ερμηνείας και στην οπτική παρουσίαση.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Εξετάστε το έγγραφο για δεδομένα ή πληροφορίες που παρουσιάζονται με τη μορφή στηλών.
Ελέγξτε εάν οι στήλες δημιουργούνται με χρήση χαρακτήρων λευκού διαστήματος για τη διάταξη των πληροφοριών.
Εάν το βήμα 2 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση των κριτηρίων επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει πώς η χρήση χαρακτήρων λευκού διαστήματος, όπως διάστημα, tab, αλλαγή γραμμής ή επιστροφή γραμμής, για τη μορφοποίηση πινάκων σε κειμενικό περιεχόμενο συνιστά αποτυχία σωστής χρήσης της δομής. Όταν οι πίνακες δημιουργούνται με αυτόν τον τρόπο, δεν υπάρχει τρόπος να υποδείξετε ότι ένα κελί προορίζεται για κελί κεφαλίδας, να συσχετίσετε τα κελιά κεφαλίδας πίνακα με τα κελιά δεδομένων πίνακα ή να μετακινηθείτε απευθείας σε συγκεκριμένο κελί του πίνακα.
Επιπρόσθετα, οι υποστηρικτικές τεχνολογίες θα ερμηνεύσουν το περιεχόμενο με τη σειρά ανάγνωσης της τρέχουσας γλώσσας. Η χρήση λευκού διαστήματος για την οργάνωση των δεδομένων σε οπτικό πίνακα δεν παρέχει τις πληροφορίες με φυσική σειρά ανάγνωσης στην προέλευση του εγγράφου. Έτσι, οι πληροφορίες δεν θα παρουσιαστούν στον χρήστη υποστηρικτικής τεχνολογίας με λογική σειρά ανάγνωσης.
Το απλό κείμενο δεν εξυπηρετεί για την απεικόνιση πολύπλοκων πληροφοριών, όπως πινάκων, διότι δεν γίνεται αντιληπτή δομή του πίνακα. Αντί για χρήση οπτικής μορφοποίησης για να αναπαραστήσετε σχέσεις με στηλοθέτες, οι πληροφορίες με στηλοθέτες θα πρέπει να παρουσιάζονται χρησιμοποιώντας μια διαφορετική τεχνολογία ή να παρουσιάζονται γραμμικά. (Ανατρέξτε στην ενότητα "Παρουσίαση πληροφοριών με στηλοθέτες σε απλό κείμενο")
Το ακόλουθο παράδειγμα χρησιμοποιεί εσφαλμένα λευκά διαστήματα για τη μορφοποίηση ενός μενού ως οπτικού πίνακα.
Παράδειγμα κώδικα:
Menu
Breakfast Lunch Dinner
Monday 2 fried eggs tomato soup garden salad
bacon hamburger Fried Chicken
toast onion rings green beans
Oatmeal cookie mashed potatoes
Tuesday Pancakes vegetable soup Caesar salad
sausage hot dogs Spaghetti with meatballs
orange juice potato salad Italian bread
brownie ice cream
Εάν αυτός ο πίνακας έπρεπε να ερμηνευτεί και να αναγνωσθεί από εφαρμογή ανάγνωσης οθόνης, θα είχε τις εξής γραμμές:
Menu
Breakfast Lunch Dinner
Monday 2 fried eggs tomato soup garden salad
bacon hamburger Fried Chicken
toast onion rings green beans
Oatmeal cookie mashed potatoes
Η σειρά ανάγνωσης δεν έχει νόημα εφόσον δεν υπάρχει δομή στον πίνακα, προκειμένου η υποστηρικτική τεχνολογία να την αναγνωρίσει ως πίνακα. Εάν η ροή του κειμένου διαμορφωνόταν εκ νέου ή η γραμματοσειρά άλλαζε από σταθερή σε μεταβλητή ή αυξανόταν σε μέγεθος τόσο που πλέον οι γραμμές να μην χωρούσαν στη σελίδα, θα προέκυπταν παρόμοια ζητήματα και στην οπτική παρουσίαση.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Εξετάστε το έγγραφο για οπτικά μορφοποιημένους πίνακες.
Ελέγξτε εάν οι πίνακες δημιουργούνται με χρήση χαρακτήρων λευκού διαστήματος για τη διάταξη των δεδομένων με στηλοθέτες.
Εάν το βήμα 2 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση των κριτηρίων επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Οι φόρμες συχνά σχεδιάζονται ώστε να υποβάλλονται αυτόματα όταν ο χρήστης συμπληρώσει όλα τα πεδία ή όταν η επισήμανση φεύγει από το τελευταίο πεδίο. Αυτή η προσέγγιση παρουσιάζει δύο προβλήματα. Το πρώτο είναι ότι ένας χρήστης με αναπηρία που χρειάζεται περισσότερες πληροφορίες περιβάλλοντος, μπορεί να απομακρύνει την επισήμανση από το πεδίο στις οδηγίες για τη συμπλήρωση της φόρμας ή σε άλλο κείμενο, υποβάλλοντας έτσι τη φόρμα κατά λάθος. Το άλλο είναι ότι σε κάποια στοιχεία της φόρμας η τιμή του πεδίου αλλάζει καθώς εκτελείται πλοήγηση σε κάθε στοιχείο με το πληκτρολόγιο, υποβάλλοντας και πάλι τη φόρμα κατά λάθος. Είναι καλύτερο να βασιζόμαστε στην τυποποιημένη συμπεριφορά του κουμπιού υποβολής και των πλήκτρων εισαγωγής στοιχείων της φόρμας.
Αυτό το παράδειγμα αποτυχίας υποβάλλει μια φόρμα όταν ο χρήστης φεύγει από το τελευταίο πεδίο μιας φόρμας τηλεφωνικών αριθμών τριών πεδίων. Η φόρμα θα υποβληθεί εάν ο χρήστης φύγει το πεδίο μετά την επεξεργασία του, ακόμα και αν μετακινηθεί προς τα πίσω στη σειρά στηλοθέτησης. Οι προγραμματιστές δεν πρέπει να χρησιμοποιούν αυτή τη μέθοδο για την υποβολή φόρμας, αλλά ένα κουμπί υποβολής, ή να βασίζονται στην προεπιλεγμένη συμπεριφορά της φόρμας για την υποβολή όταν ο χρήστης πατά το πλήκτρο επιστροφής (enter) σε ένα πεδίο κειμένου.
Παράδειγμα κώδικα:
<form method="get" id="form1">
<input type="text" name="text1" size="3" maxlength="3"> -
<input type="text" name="text2" size="3" maxlength="3"> -
<input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">
</form>
Αυτό είναι ένα παράδειγμα υπο υποβάλλει μια φόρμα όταν ο χρήστης πραγματοποιεί μια επιλογή από το μενού, όταν δεν υπάρχει καμία προειδοποίηση για αυτήν τη συμπεριφορά εκ των προτέρων. Η φόρμα θα υποβληθεί μόλις επιλεγεί ένα στοιχείο από το μενού. Ένας χρήστης πληκτρολογίου δεν θα είναι σε θέση να μεταβεί πέραν του πρώτου στοιχείου στο μενού. Οι χρήστες με τύφλωση και οι χρήστες με τρεμούλιασμα στα χέρια μπορούν εύκολα να κάνουν ένα λάθος σχετικά με το στοιχείο στο αναπτυσσόμενο μενού που θα επιλέξουν και να οδηγηθούν έτσι στον λάθος προορισμό πριν να είναι σε θέση να το διορθώσουν.
Παράδειγμα κώδικα:
<form method="get" id="form2">
<input type="text" name="text1">
<select name="select1" onchange="form2.submit();">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</form>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Καταχωρίστε δεδομένα σε όλα τα πεδία της σελίδας ξεκινώντας από την κορυφή.
Καταχωρίστε δεδομένα στο τελευταίο πεδίο και βγείτε από αυτό (έξοδος από το πεδίο με το πλήκτρο tab).
Ελέγξτε εάν το περιβάλλον άλλαξε καθώς εγκαταλείψατε το τελευταίο πεδίο.
Εάν το βήμα #3 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Το Internet Explorer 6 εκκινεί επίσης το συμβάν onclick όταν η επισήμανση μετακινείται σε ραδιόπληκτρο με onclick. Η προσθήκη άλλων ρουτίνων χειρισμού συμβάντων (παράμετροι onxxx) για αποτροπή αυτού του φαινομένου δεν λειτουργεί.
Αυτό το έγγραφο περιγράφει μια αποτυχία που προκύπτει όταν η αλλαγής της κατάστασης ενός ραδιοπλήκτρου, τετραγώνου επιλογής ή στοιχείου σε λίστα επιλογής προκαλεί το άνοιγμα ενός νέου παραθύρου. Είναι δυνατή η χρήση αρχείων εντολών για τη δημιουργία στοιχείου input
που προκαλεί αλλαγή του περιβάλλοντος (υποβολή της φόρμας, άνοιγμα νέας σελίδας, νέου παραθύρου) όταν το στοιχείο είναι επιλεγμένο. Διαφορετικά, οι προγραμματιστές μπορούν να χρησιμοποιήσουν ένα κουμπί υποβολής (δείτε την τεχνική Παροχής κουμπιού υποβολής για έναρξη μιας αλλαγής περιβάλλοντος (G80: Providing a submit button to initiate a change of context) ή να υποδείξουν με σαφήνεια την αναμενόμενη ενέργεια.
Το παρακάτω παράδειγμα αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας διότι εκτελεί επεξεργασία της φόρμας όταν επιλεγεί ένα ραδιόπληκτρο αντί της χρήσης κουμπιού υποβολής.
Παράδειγμα κώδικα:
<script type="text/JavaScript">
function goToMirror(theInput) {
var mirrorSite = "http://download." + theInput.value + "/";
window.open(mirrorSite);
}
</script>
…
<form name="mirror_form" id="mirror_form" action="" method="get">
<p>Please select a mirror download site:</p>
<p>
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_belnet" value="belnet.be" />
<label for="mirror_belnet">belnet (<abbr>BE</abbr>)</label><br />
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_surfnet" value="surfnet.nl" />
<label for="mirror_surfnet">surfnet (<abbr>NL</abbr>)</label><br />
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_puzzle" value="puzzle.ch" />
<label for="mirror_puzzle">puzzle (<abbr>CH</abbr>)</label><br />
<input type="radio" onclick="goToMirror(this);" name="mirror"
id="mirror_voxel" value="voxel.com" />
<label for="mirror_voxel">voxel (<abbr>US</abbr>)</label><br />
</p>
</form>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Βρείτε κάθε φόρμα σε μια σελίδα.
Για κάθε στοιχείο ελέγχου φόρμας που είναι ραδιόπληκτρο, τετράγωνο ελέγχου ή στοιχείο σε λίστα επιλογής, ελέγξτε εάν η αλλαγή στην κατάσταση του στοιχείου ελέγχου ανοίγει ένα νέο παράθυρο.
Για κάθε νέο παράθυρο ως αποτέλεσμα του βήματος 2, ελέγξτε εάν ο χρήστης έχει προειδοποιηθεί εκ των προτέρων.
Εάν το βήμα #3 είναι ψευδές, τότε αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει μια συνθήκη αποτυχίας για εναλλακτικά κειμένου για εικόνες που η AT πρέπει να παραβλέψει. Εάν δεν υπάρχει καμία παράμετρος alt, όλες οι υποστηρικτικές τεχνολογίες δεν μπορούν να παραβλέψουν το μη κειμενικό περιεχόμενο. Η παράμετρος alt πρέπει να αποδειχθεί και έχει τιμή null (δηλ. alt=""
ή alt=" "
) για να αποφευχθεί αποτυχία του κριτηρίου επιτυχίας.
Σημείωση: Αν και το alt=" "
είναι έγκυρο, συνίσταται το alt=""
.
Παράδειγμα αποτυχίας 1: Διακοσμητικές εικόνες που δεν έχουν παράμετρο alt
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Προσδιορίστε κάθε στοιχείο img
και applet
που χρησιμοποιείται για καθαρά διακοσμητικό περιεχόμενο.
Ελέγξτε ότι υπάρχει η παράμετρος alt
για αυτά τα στοιχεία.
Ελέγξτε ότι η παράμετρος alt
για αυτά τα στοιχεία είναι null.
Εάν το βήμα #2 ή το βήμα #3 είναι ψευδές, αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Ισχύει για HTML και XHTML.
Αυτή η αποτυχία σχετίζεται με:
Περιγράφει μια συνθήκη αποτυχίας για εναλλακτικά κειμένου για εικόνες που η AT πρέπει να παραβλέψει. Εάν δεν υπάρχει καμία παράμετρος alt, όλες οι υποστηρικτικές τεχνολογίες δεν μπορούν να παραβλέψουν το μη κειμενικό περιεχόμενο. Η παράμετρος alt πρέπει να αποδειχθεί και έχει τιμή null (δηλ. alt=""
ή alt=" "
) για να αποφευχθεί αποτυχία του κριτηρίου επιτυχίας.
Σημείωση: Αν και το alt=" "
είναι έγκυρο, συνιστάται το alt=""
.
Παράδειγμα αποτυχίας 1: Διακοσμητικές εικόνες που δεν έχουν παράμετρο alt
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Προσδιορίστε κάθε στοιχείο img
και applet
που χρησιμοποιείται για καθαρά διακοσμητικό περιεχόμενο.
Ελέγξτε ότι υπάρχει η παράμετρος alt
για αυτά τα στοιχεία.
Ελέγξτε ότι η παράμετρος alt
για αυτά τα στοιχεία είναι null.
Εάν το βήμα #2 ή το βήμα #3 είναι ψευδές, αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι σελίδες
Αυτή η αποτυχία σχετίζεται με:
meta
Το http-equiv
of {time-out}; url=... χρησιμοποιείται συχνά για να ανακατευθύνει αυτόματα χρήστες. Όταν αυτό συμβαίνει μετά από χρονική καθυστέρηση, ο χρήστης μπορεί να διακοπεί από απροσδόκητη αλλαγή του περιβάλλοντος.
Είναι αποδεκτή η χρήση του στοιχείου meta
για τη δημιουργία ανακατεύθυνσης όταν η λήξη χρόνου σύνδεσης έχει ρυθμιστεί σε μηδέν, εφόσον η ανακατεύθυνση είναι άμεση και δεν γίνεται αντιληπτή ως αλλαγή του περιβάλλοντος. Ωστόσο, προτιμάται η χρήση μεθόδων στην πλευρά του διακομιστή για τον σκοπό αυτό. Δείτε την Υλοποίηση αυτόματων ανακατευθύνσεων στην πλευρά του διακομιστή αντί στην πλευρά του πελάτη (SVR1: Implementing automatic redirects on the server side instead of on the client side) (ΔΙΑΚΟΜΙΣΤΗΣ) .
Η παρακάτω σελίδα συνιστά αποτυχία διότι θα προκαλέσει ανακατεύθυνση στο URI http://www.example.com/newpage μετά από λήξη χρόνου σύνδεσης στα 5 δευτερόλεπτα.
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Do not use this!</title>
<meta http-equiv="refresh"
content="5; url=http://www.example.com/newpage" />
</head>
<body>
<p>
If your browser supports Refresh, you'll be
transported to our
<a href="http://www.example.com/newpage">new site</a>
in 5 seconds, otherwise, select the link manually.
</p>
</body>
</html>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Προβάλετε μια σελίδα
Ελέγξτε ότι η σελίδα δεν εκτελεί ανακατεύθυνση μετά από τη λήξη του χρόνου σύνδεσης.
Το #2 είναι αληθές.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
meta
Το http-equiv
ανανέωσης χρησιμοποιείται συχνά για την περιοδική ανανέωση σελίδων ή για την ανακατεύθυνση χρηστών σε άλλες σελίδες. Εάν το χρονικό διάστημα είναι πολύ μικρό, τα άτομα με τύφλωση δεν θα έχουν αρκετό χρόνο, ώστε οι εφαρμογές ανάγνωσης οθόνης που χρησιμοποιούν να διαβάσουν τη σελίδα πριν αυτή ανανεωθεί απροσδόκητα και οδηγήσει την εφαρμογή ανάγνωσης οθόνης να αρχίσει την ανάγνωση από την κορυφή. Οι χρήστες με όραση μπορεί επίσης να αποπροσανατολιστούν από την απροσδόκητη ανανέωση.
Αυτό είναι ένα αποδοκιμαζόμενο παράδειγμα που αλλάζει τη σελίδα του χρήστη σε τακτά διαστήματα. Οι προγραμματιστές περιεχομένου δεν πρέπει να χρησιμοποιούν αυτή την τεχνική για την προσομοίωση της τεχνολογίας "push". Οι προγραμματιστές δεν μπορούν να προβλέψουν πόσο χρόνο θα χρειαστεί ένας χρήστης για να διαβάσει μια σελίδα. Τυχόν πρόωρη ανανέωση μπορεί να αποπροσανατολίσει τους χρήστες. Οι προγραμματιστές περιεχομένου πρέπει να αποφεύγουν την περιοδική ανανέωση και να επιτρέπουν στους χρήστες να επιλέγουν πότε θέλουν τις πιο πρόσφατες πληροφορίες. (Ο αριθμός της παραμέτρου content
είναι το διάστημα ανανέωσης σε δευτερόλεπτα.)
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Techniques for WCAG 2.0</title>
<meta http-equiv="refresh" content="60" />
</head>
<body>
...
</body>
</html>
Αυτό είναι ένα αποδοκιμαζόμενο παράδειγμα που ανακατευθύνει τον χρήστη σε άλλη σελίδα μετά από κάποια δευτερόλεπτα. Συνιστάται στους προγραμματιστές περιεχομένου να χρησιμοποιούν αντίθετα ανακατευθύνσεις στην πλευρά του διακομιστή. (Ο αριθμός της παραμέτρου content
είναι το διάστημα ανανέωσης σε δευτερόλεπτα.)
Παράδειγμα κώδικα:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="10;URL='http://example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://example.com/">
example.com</a>. Please note that we now have our own
domain name and will redirect you in a few seconds. Please update
your links and bookmarks.</p>
</body>
</html>
Βρείτε στοιχεία meta
στο έγγραφο.
Για κάθε στοιχείο meta
, ελέγξτε εάν περιέχει την παράμετρο http-equiv
με τιμή "refresh" (χωρίς διάκριση πεζών-κεφαλαίων) και την παράμετρο content
με αριθμό (σε δευτερόλεπτα) μεγαλύτερο του 0.
Εάν το βήμα 2 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση των κριτηρίων επιτυχίας.
HTML και XHTML με δημιουργία αρχείων εντολών.
Αυτή η αποτυχία σχετίζεται με:
Η αποτυχία προκύπτει όταν οι ρουτίνες χειρισμού συμβάντων JavaScript επισυνάπτονται σε στοιχεία για την "προσομοίωση συνδέσμων"'. Ένα στοιχείο ελέγχου ή σύνδεσμος που δημιουργείται με αυτόν τον τρόπο, δεν επιτρέπει μεταφορά σε αυτό με χρήση του πλήκτρου tab από το πληκτρολόγιο και δεν λαμβάνει σήμανση πληκτρολογίου όπως άλλα στοιχεία ελέγχου ή/και σύνδεσμοι. Εάν τα συμβάντα scripting χρησιμοποιούνται για την προσομοίωση συνδέσμων, οι πράκτορες χρήστη, συμπεριλαμβανομένης της υποστηρικτικής τεχνολογίας, μπορεί να μην μπορούν να προσδιορίσουν τους συνδέσμους στο περιεχόμενο ως τέτοιους. Ίσως δεν αναγνωρισθούν ως αλληλεπιδραστικά στοιχεία ελέγχου από την υποστηρικτική τεχνολογία ή μπορεί να αναγνωρισθούν ως αλληλεπιδραστικά στοιχεία ελέγχου αλλά όχι ως σύνδεσμοι και πάλι. Τέτοια στοιχεία δεν εμφανίζονται σε λίστα συνδέσμων που δημιουργείται από πράκτορες χρήστη ή υποστηρικτική τεχνολογία.
Τα στοιχεία <a href>
και <area>
προορίζονται για τη σήμανση συνδέσμων.
Η επισύναψη ρουτίνων χειρισμού συμβάντων σε στοιχεία που δεν είναι κανονικά αλληλεπιδραστικά, όπως τα span
και div
, μπορεί να είναι ιδιαίτερα αποπροσανατολιστικά για τους χρήστες. Ακόμα και αν ληφθεί μέριμνα για την παροχή πρόσβασης μέσω πληκτρολογίου σε τέτοια στοιχεία, οι χρήστες ίσως δυσκολευτούν να ανακαλύψουν ότι υπάρχουν αλληλεπιδραστικά στοιχεία ελέγχου στο περιεχόμενο ή να καταλάβουν ποιον τύπο συμπεριφοράς να αναμένουν από αυτά. Για παράδειγμα, οι χρήστες ίσως να μη γνωρίζουν ποιες πληκτρολογήσεις υποστηρίζονται από το αρχείο εντολών για την ενεργοποίηση του στοιχείου. Επιπρόσθετα, τα στοιχεία αυτά δεν δημιουργούν τα ίδια συμβάντα λειτουργικού συστήματος όπως τα αλληλεπιδραστικά στοιχεία, άρα ίσως να μην υπάρξει ειδοποίηση προς την υποστηρικτική τεχνολογία όταν ο χρήστης τα ενεργοποιήσει.
Προστίθεται χειρισμός συμβάντων με script σε στοιχείο span
, ώστε να λειτουργεί ως σύνδεσμος όταν ο χρήστης κάνει κλικ με το ποντίκι. Η υποστηρικτική τεχνολογία δεν αναγνωρίζει αυτό το στοιχείο ως σύνδεσμο.
Παράδειγμα κώδικα:
<span onclick="this.location.href='newpage.html'">
Fake link
</span>
Προστίθεται χειρισμός συμβάντων με script σε στοιχείο img
, ώστε να λειτουργεί ως σύνδεσμος όταν ο χρήστης κάνει κλικ με το ποντίκι. Η υποστηρικτική τεχνολογία δεν αναγνωρίζει αυτό το στοιχείο ως σύνδεσμο.
Παράδειγμα κώδικα:
src="go.gif"
alt="go to the new page"
onclick="this.location.href='newpage.html'"
Προστίθεται χειρισμός συμβάντων με script σε στοιχείο img
, ώστε να λειτουργεί ως σύνδεσμος. Σε αυτό το παράδειγμα, η λειτουργία του συνδέσμου μπορεί να κληθεί με το ποντίκι ή μέσω του πλήκτρου Enter εάν ο πράκτορας χρήστη περιλαμβάνει το στοιχείο στην αλυσίδα tab. Εντούτοις, το στοιχείο δεν θα αναγνωρισθεί ως σύνδεσμος.
Παράδειγμα κώδικα:
function doNav(url)
{
window.location.href = url;
}
function doKeyPress(url)
{
//if the enter key was pressed
if (window.event.type == "keypress" &&
window.event.keyCode == 13)
{
doNav(url);
}
}
Η επισημείωση για την εικόνα είναι:
Παράδειγμα κώδικα:
<p>
<img src="bargain.jpg"
tabindex="0"
alt="View Bargains"
onclick="doNav('viewbargains.html');"
onkeypress="doKeyPress('viewbargains.html');"
>
</p>
Αυτό το παράδειγμα χρησιμοποιεί αρχείο εντολών για να κάνει ένα στοιχείο div
να συμπεριφέρεται σαν σύνδεσμος. Αν και ο συγγραφέας έχει παράσχει πλήρη πρόσβαση μέσω πληκτρολογίου και έχει ξεχωρίσει τις ρουτίνες χειρισμού συμβάντων από την επισημείωση για να επιτρέψει την αλλαγή του σκοπού του περιεχομένου, το στοιχείο div
δεν θα αναγνωριστεί ως σύνδεσμος από την υποστηρικτική τεχνολογία.
Παράδειγμα κώδικα:
window.onload = init;
function init()
{
var objAnchor = document.getElementById('linklike');
objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}
function changeLocation(objEvent, strLocation)
{
var iKeyCode;
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;
if (iKeyCode != 13 && iKeyCode != 32)
return true;
}
window.location.href = strLocation;
}
Η επισημείωση για το στοιχείο div
είναι:
Παράδειγμα κώδικα:
<div id="linklike">
View the results of the survey.
</div>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε εάν υπάρχουν ρουτίνες χειρισμού συμβάντων JavaScript σε στοιχείο που προσομοιώνει σύνδεσμο.
Ελέγξτε εάν ο καθορισμένος μέσω προγραμματισμού ρόλος του στοιχείου είναι link.
Εάν ο έλεγχος #1 είναι αληθής και ο έλεγχος #2 ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει μια αποτυχία που προκύπτει όταν χρησιμοποιείται η δομική επισημείωση για την επίτευξη εφέ παρουσίασης, αλλά υποδεικνύει σχέσεις που δεν υπάρχουν στο περιεχόμενο. Αυτό είναι αποπροσανατολιστικό για χρήστες που εξαρτώνται από αυτές τις σχέσεις για να εκτελέσουν πλοήγηση εντός του περιεχομένου ή να καταλάβουν τη σχέση του ενός κομματιού του περιεχομένου με το άλλο. Σημειώστε ότι η χρήση πινάκων HTML για διάταξη δεν αποτελεί παράδειγμα αυτής της αποτυχίας, αρκεί ο πίνακας διάταξης να μην περιλαμβάνει ακατάλληλη δομική επισημείωση όπως στοιχεία <th>
ή <caption>
.
Σε αυτό το παράδειγμα, ένα στοιχείο επικεφαλίδας χρησιμοποιείται για την απεικόνιση μιας διεύθυνσης με μεγάλη γραμματοσειρά και έντονη γραφή. Η διεύθυνση δεν προσδιορίζει, όμως, μια νέα ενότητα του εγγράφου, άρα δεν πρέπει να λάβει σήμανση ως επικεφαλίδα.
Παράδειγμα κώδικα:
<p>Interested in learning more? Write to us at</p>
<h4>3333 Third Avenue, Suite 300 · New York City</h4>
<p>And we'll send you the complete informational packet absolutely Free!</p>
Σε αυτό το παράδειγμα, η επισημείωση της επικεφαλίδας χρησιμοποιείται με δύο διαφορετικούς τρόπους: για να μεταφέρει τη δομή του εγγράφου και για να δημιουργήσει οπτικά αποτελέσματα. Τα στοιχεία h1
και h2
χρησιμοποιούνται κατάλληλα για να σημειωθεί η αρχή του εγγράφου ως συνόλου και η αρχή της περίληψης. Ωστόσο, τα στοιχεία h3
και h4
μεταξύ του τίτλου και της περίληψης χρησιμοποιούνται μόνο για οπτικό εφέ, για τον έλεγχο των γραμματοσειρών που χρησιμοποιούνται για την απεικόνιση των ονομάτων των συγγραφέων και της ημερομηνίας.
Παράδειγμα κώδικα:
<h1>Study on the Use of Heading Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 ...
</p>
Το ακόλουθο παράδειγμα χρησιμοποιεί blockquote
για κείμενο που δεν είναι παράθεμα, για να το αναδείξει τοποθετώντας του εσοχή όταν εμφανίζεται σε εφαρμογές περιήγησης με γραφικά.
Παράδειγμα κώδικα:
<p>After extensive study of the company Web site, the task force
identified the following common problem.</p>
<blockquote>
<p>The use of markup for presentational effects made Web
pages confusing to screen reader users.</p>
</blockquote>
<p>The committee lists particular examples of the problems
introduced by this practice below.</p>
Παράδειγμα κώδικα:
<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε ότι το σημασιολογικό νόημα κάθε στοιχείου είναι κατάλληλο για το περιεχόμενο του στοιχείου.
Εάν ο έλεγχος #1 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Το έγγραφο περιγράφει μια αποτυχία που προκύπτει όταν η σειρά στηλοθέτησης δεν ακολουθεί τις λογικές σχέσεις και ακολουθίες στο περιεχόμενο.
Στοιχεία με δυνατότητα επισήμανσης όπως σύνδεσμοι και στοιχεία φόρμας, έχουν μια παράμετρο tabindex
. Τα στοιχεία επισημαίνονται με αύξουσα σειρά τιμής της παραμέτρου tabindex
. Όταν οι τιμές της παραμέτρου tabindex
εκχωρούνται με διαφορετική σειρά από τις σχέσεις και τις ακολουθίες στο περιεχόμενο, η σειρά στηλοθέτησης δεν ακολουθεί πλέον τις σχέσεις και τις ακολουθίες στον περιεχόμενο.
Μία από τις πιο συνηθισμένες αιτίες αυτής της αποτυχίας είναι η επεξεργασία μιας σελίδας όπου έχει χρησιμοποιηθεί η παράμετρος tabindex
. Είναι εύκολο να χαθεί η αντιστοιχία μεταξύ της σειράς στηλοθέτησης και της σειράς του περιεχομένου, όταν το περιεχόμενο υφίσταται επεξεργασία αλλά οι παράμετροι tabindex
δεν ενημερώνονται για να απεικονίσουν τις αλλαγές στο περιεχόμενο.
Το ακόλουθο παράδειγμα χρησιμοποιεί λανθασμένα την παράμετρο tabindex για τον καθορισμό εναλλακτικής σειράς στηλοθέτησης:
Παράδειγμα κώδικα:
<ul>
<li><a href="main.html" tabindex="1">Homepage</a></li>
<li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
<li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
<li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
</ul>
Εάν η πλοήγηση στη λίστα πραγματοποιείται με το πλήκτρο tab, η σειρά πλοήγησης στη λίστα είναι "Αρχική σελίδα, κεφάλαιο 3, κεφάλαιο 2, κεφάλαιο 1", η οποία δεν ακολουθεί την ακολουθία στο περιεχόμενο.
Η σειρά στηλοθέτησης έχει καθοριστεί ρητά σε ιστοσελίδα με την παροχή των παραμέτρων tabindex
για όλα τα πεδία. Αργότερα, η σελίδα τροποποιείται για την προσθήκη νέου πεδίου στη μέση της σελίδας, όμως ο συγγραφέας ξεχνά να προσθέσει παράμετρο tabindex
στο νέο πεδίο. Ως αποτέλεσμα, το νέο πεδίο βρίσκεται στο τέλος της σειράς στηλοθέτησης.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
HTML 4.01 "Πλοήγηση με πλήκτρο tab" (Tabbing navigation)
Εάν χρησιμοποιείται η παράμετρος tabindex
, ελέγξτε ότι η σειρά στηλοθέτησης που καθορίστηκε από τις παραμέτρους tabindex
ακολουθεί σχέσεις στο περιεχόμενο.
Εάν ο έλεγχος #1 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
th
, στοιχείων caption
ή μη κενών παραμέτρων summary
σε πίνακες διάταξηςHTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να περιγράψει μια αποτυχία που προκύπτει όταν ένας πίνακας που χρησιμοποιείται μόνο για διάταξη περιλαμβάνει είτε στοιχεία th
, παράμετρο summary
ή στοιχείο caption
. Πρόκειται για αποτυχία διότι χρησιμοποιεί δομική (ή σημασιολογική) επισημείωση μόνο για παρουσίαση. Στόχος των στοιχείων πίνακα HTML και XHTML είναι να παρουσιάσει δεδομένα.
Αν και δεν χρησιμοποιείται συχνά σε έναν πίνακα διάταξης, η ακόλουθη δομική επισημείωση θα είναι επίσης αποτυχία του κριτηρίου επιτυχίας 1.3.1 εάν χρησιμοποιείται σε έναν πίνακα διάταξης:
παράμετροι headers
παράμετροι scope
Οι υποστηρικτικές τεχνολογίες χρησιμοποιούν τη δομή ενός πίνακα HTML ή XHTML για να παρουσιάσουν δεδομένα στον χρήστη με λογικό τρόπο. Το στοιχείο th
χρησιμοποιείται για να σημειώσει τις κεφαλίδες στηλών και γραμμών του πίνακα. Μια εφαρμογή ανάγνωσης οθόνης χρησιμοποιεί τις πληροφορίες σε στοιχεία th
για να εκφωνήσει τις πληροφορίες κεφαλίδας που αλλάζουν καθώς ο χρήστης εκτελεί πλοήγηση στον πίνακα. Η παράμετρος summary στο στοιχείο table
παρέχει κειμενική περιγραφή του πίνακα που περιγράφει τον σκοπό και τη λειτουργία του. Οι υποστηρικτικές τεχνολογίες καθιστούν διαθέσιμες τις πληροφορίες της παραμέτρου summary
στους χρήστες. Το στοιχείο caption
αποτελεί μέρος του πίνακα και τον προσδιορίζει.
Αν και το WCAG 2 δεν απαγορεύει τη χρήση πινάκων διάταξης, συνιστώνται διατάξεις που βασίζονται σε CSS προκειμένου να διατηρείται η καθορισμένη σημασιολογική έννοια των στοιχείων πίνακα HTML και να διατηρείται η πρακτική κωδικοποίησης διαχωρισμού της παρουσίασης από το περιεχόμενο. Όταν ο πίνακας χρησιμοποιείται για σκοπούς διάταξης, δεν πρέπει να χρησιμοποιείται το στοιχείο th
. Εφόσον ο πίνακας δεν παρουσιάζει δεδομένα, δεν υπάρχει ανάγκη σημείωσης κελιών ως κεφαλίδες στηλών ή γραμμών. Ομοίως, δεν υπάρχει ανάγκη πρόσθετης περιγραφής πίνακα που χρησιμοποιείται για τη διάταξη περιεχομένου. Μην συμπεριλαμβάνετε παράμετρο summary
και μην χρησιμοποιείτε την παράμετρο summary
για να περιγράψετε τον πίνακα, για παράδειγμα, "πίνακας διάταξης". Όταν εκφωνούνται, οι πληροφορίες δεν παρέχουν τιμή και προσφέρουν μόνο διάσπαση της προσοχής των χρηστών που εκτελούν πλοήγηση στο περιεχόμενο μέσω εφαρμογής ανάγνωσης οθόνης. Κενές παραμέτρους summary
είναι αποδεκτές σε πίνακες διάταξης, αλλά δεν συνιστώνται.
Ακολουθεί ένα παράδειγμα που χρησιμοποιεί πίνακα για τη διάταξη περιεχομένου σε τρεις στήλες. Η γραμμή πλοήγησης βρίσκεται στην αριστερή στήλη, το κύριο περιεχόμενο στη μεσαία και μια πρόσθετη πλευρική γραμμή στα δεξιά. Στην κορυφή βρίσκεται ο τίτλος σελίδας. Το παράδειγμα σημειώνει τον τίτλο σελίδας ως <th>
και παρέχει μια παράμετρο summary που υποδεικνύει ότι ο πίνακας είναι πίνακας διάταξης.
Παράδειγμα κώδικα:
<table summary="layout table">
<tr>
<th colspan=3>Page Title</th>
</tr>
<tr>
<td><div>navigation content</div></td>
<td><div>main content</div></td>
<td><div>right sidebar content</div></td>
</tr>
<tr>
<td colspan=3>footer</td>
</tr>
</table>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Εξετάστε τον πηγαίο κώδικα του εγγράφου HTML ή XHTML για το στοιχείο table
Εάν ο πίνακας χρησιμοποιείται μόνο για την οπτική διάταξη στοιχείων εντός του περιεχομένου
Ελέγξτε ότι ο πίνακας δεν περιέχει στοιχεία th
.
Ελέγξτε ότι το στοιχείο table
δεν περιέχει μη κενή παράμετρο summary.
Ελέγξτε ότι το στοιχείο table
δεν περιέχει στοιχείο caption
.
Εάν οποιοσδήποτε έλεγχος παραπάνω είναι ψευδής, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Το στοιχείο blink
δεν υποστηρίζεται από το Internet Explorer στα Windows. Υποστηρίζεται στην οικογένεια πρακτόρων χρήστη Netscape/Mozilla και Opera στα Windows.
Το στοιχείο blink
, αν και δεν αποτελεί επίσημο μέρος της προδιαγραφής HTML ή XHTML, υποστηρίζεται από πολλούς πράκτορες χρήστη. Προκαλεί το αναβοσβήσιμο με προκαθορισμένο ρυθμό κάθε κειμένου που βρίσκεται εντός του στοιχείου. Δεν διακόπτεται από τον χρήστη, ούτε είναι δυνατή η απενεργοποίησή του ως προτίμηση. Το αναβοσβήσιμο συνεχίζεται όσο εμφανίζεται η σελίδα. Άρα, το περιεχόμενο που χρησιμοποιεί την παράμετρο blink
αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας διότι το αναβοσβήσιμο συνεχίζεται για περισσότερα από τρία δευτερόλεπτα.
Η σελίδα μιας λίστας προϊόντων χρησιμοποιεί το στοιχείο blink
για να προσελκύσει την προσοχή σε τιμές εκπτώσεων. Έτσι, υπάρχει αποτυχία στην ικανοποίηση του κριτηρίου επιτυχίας διότι οι χρήστες δεν μπορούν να ελέγξουν το αναβοσβήσιμο.
Παράδειγμα κώδικα:
<p>My Great Product <blink>Sale! $44,995!</blink></p>
Εξετάστε τον κώδικα για παρουσία του στοιχείου blink
.
Εάν το #1 είναι αληθές, το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
pre
για την επισημείωση πληροφοριών με στηλοθέτεςHTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Αυτό το έγγραφο περιγράφει αποτυχία λόγω χρήσης του στοιχείου HTML pre
για την επισημείωση πληροφοριών με στηλοθέτες. Το στοιχείο pre
διατηρεί μόνο την οπτική μορφοποίηση. Εάν το στοιχείο pre
χρησιμοποιείται για την επισημείωση πληροφοριών με στηλοθέτες, οι οπτικά υποδηλούμενες λογικές σχέσεις μεταξύ κελιών πίνακα και κεφαλίδων χάνονται εάν ο χρήστης δεν μπορεί να δει την οθόνη ή εάν η οπτική παρουσίαση αλλάξει σημαντικά
Αντίθετα, το στοιχείο HTML table
προορίζεται για την παρουσίαση δεδομένων με στηλοθέτες. Οι υποστηρικτικές τεχνολογίες χρησιμοποιούν τη δομή ενός πίνακα HTML για να παρουσιάσουν δεδομένα στον χρήστη με λογικό τρόπο. Αυτή η δομή δεν είναι διαθέσιμη όταν χρησιμοποιείται το στοιχείο pre
.
Παράδειγμα κώδικα:
<pre>
Monday Tuesday Wednesday Thursday Friday
8:00-
9:00 Meet with Sam
9:00-
10:00 Dr. Williams Sam again Leave for San Antonio
</pre>
Παράδειγμα κώδικα:
<pre>
CIRCUIT COURT JUDGE BRANCH 3
W
Α
M R E I
Α. L T
M L R B E
I A Y E -
K N R I
E G T N
----- ----- -----
0001 TOWN OF ALBION WDS 1-2 22 99 0
0002 TOWN OF BERRY WDS 1-2 52 178 0
0003 TOWN OF BLACK EARTH 16 49 0
0004 TOWN OF BLOOMING GROVE WDS 1-3 44 125 0
0005 TOWN OF BLUE MOUNDS 33 117 0
0006 TOWN OF BRISTOL WDS 1-3 139 639 1
0007 TOWN OF BURKE WDS 1-4 80 300 0
0008 TOWN OF CHRISTIANA WDS 1-2 22 50 0
</pre>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ελέγξτε εάν χρησιμοποιείται το στοιχείο pre
Για κάθε εμφάνιση του στοιχείου pre
, ελέγξτε εάν οι εσώκλειστες πληροφορίες έχουν στηλοθέτες.
Εάν ο έλεγχος #2 είναι αληθής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Οι πρώτες εφαρμογές ανάγνωσης οθόνης διάβαζαν κυριολεκτικά το περιεχόμενο Ιστού από την οθόνη, το οποίο προκαλούσε προβλήματα όταν χρησιμοποιούνταν πίνακες για διάταξη, στις περιπτώσεις που ένα κελί πίνακα έπρεπε να διαβαστεί ολόκληρο πριν το επόμενο κελί πίνακα. Οι σύγχρονες εφαρμογές ανάγνωσης οθόνης δουλεύουν με την υποκείμενη επισημείωση, που σημαίνει ότι διαβάζουν ένα κελί πίνακα ολόκληρο πριν μετακινηθούν στο επόμενο κελί, όμως οι πίνακες διάταξης μπορούν απροειδοποίητα να προκαλέσουν προβλήματα στη φυσική σειρά ανάγνωσης του περιεχομένου.
Αν και το WCAG 2 δεν απαγορεύει τη χρήση πινάκων διάταξης, συνιστώνται διατάξεις που βασίζονται σε CSS προκειμένου να διατηρείται η καθορισμένη σημασιολογική έννοια των στοιχείων HTML table
και να διατηρείται η πρακτική κωδικοποίησης διαχωρισμού της παρουσίασης από το περιεχόμενο. Εάν χρησιμοποιείται ένας πίνακας διάταξης, είναι σημαντικό το περιεχόμενο να έχει νόημα όταν γραμμικοποιείται.
Αυτή η αποτυχία προκύπτει όταν μια ακολουθία περιεχομένου με νόημα, η οποία μεταφέρεται μέσω παρουσίασης, χάνεται διότι οι πίνακες HTML που χρησιμοποιούνται για τον έλεγχο της οπτικής τοποθέτησης του περιεχομένου, δεν "γραμμικοποιούνται" σωστά. Οι πίνακες παρουσιάζουν περιεχόμενο σε δύο οπτικές διαστάσεις, οριζόντια και κάθετη. Όμως, οι εφαρμογές ανάγνωσης οθόνης παρουσιάζουν αυτό το περιεχόμενο δύο διαστάσεων με τη γραμμική σειρά του περιεχομένου στην προέλευση, ξεκινώντας με το πρώτο κελί στην πρώτη γραμμή και τελειώνοντας με το τελευταίο κελί στην τελευταία γραμμή. Η εφαρμογή ανάγνωσης οθόνης διαβάζει τον πίνακα από πάνω προς τα κάτω, διαβάζοντας όλα τα περιεχόμενα κάθε γραμμής πριν την μετακίνηση στην επόμενη γραμμή. Το πλήρες περιεχόμενο κάθε κελιού σε κάθε γραμμή εκφωνείται, συμπεριλαμβανομένου του πλήρους περιεχομένου κάθε πίνακα που είναι ένθετος σε κελί. Αυτό ονομάζεται γραμμικοποίηση.
Ας υποθέσουμε ότι μια ιστοσελίδα έχει διάταξη πίνακα με 9 στήλες και 22 γραμμές. Η εφαρμογή ανάγνωσης οθόνης εκφωνεί το περιεχόμενο του κελιού στη στήλη 1, γραμμή 1 ακολουθούμενο από τα κελιά στις στήλες 2, 3, 4 κ.ο.κ. έως τη στήλη 9. Ωστόσο, εάν κάποιο κελί περιέχει ένθετο πίνακα, η εφαρμογή ανάγνωσης οθόνης θα διαβάσει ολόκληρο τον ένθετο πίνακα πριν διαβάσει το επόμενο κελί στον αρχικό (εξωτερικό) πίνακα. Για παράδειγμα, εάν το κελί στη στήλη 3, γραμμή 6 περιέχει πίνακα με 6 στήλες και 5 γραμμές, όλα αυτά τα κελιά θα διαβαστούν πριν τη στήλη 4, γραμμή 6 του αρχικού (εξωτερικού) πίνακα. Ως αποτέλεσμα, η ακολουθία με νόημα που μεταφέρεται μέσω οπτικής παρουσίασης, ίσως δεν γίνεται αντιληπτή όταν το περιεχόμενο εκφωνείται από εφαρμογή ανάγνωσης οθόνης.
Μια διαφήμιση κάνει έξυπνη χρήση της οπτικής τοποθέτησης, αλλά αλλάζει το νόημα όταν γραμμικοποιείται.
Παράδειγμα κώδικα:
<table>
<tr>
<td ><img src="logo.gif" alt="XYZ mountaineering"></td>
<td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
<td>XYZ gets you to the</td>
</tr>
</table>
Η σειρά ανάγνωσης από αυτό το παράδειγμα θα ήταν:
XYZ mountaineering top!
XYZ gets you to the
Μια ιστοσελίδα από έκθεση μουσείου τοποθετεί μια γραμμή πλοήγησης που περιέχει μια μακρά λίστα συνδέσμων στην αριστερή πλευρά της σελίδας. Στα δεξιά της γραμμής πλοήγησης υπάρχει εικόνα με φωτογραφία από την έκθεση. Στα δεξιά της εικόνας υπάρχει το είδος κειμένου "αφίσας" που θα βλέπατε στον τοίχο δίπλα από το αντικείμενο εάν βρισκόσασταν στο μουσείο. Κάτω από το κείμενο υπάρχει μια επικεφαλίδα με την ένδειξη "Περιγραφή" και κάτω από αυτή υπάρχει μια περιγραφή της εικόνας. Η εικόνα, το κείμενο αφίσας, η επικεφαλίδα "Περιγραφή" και το κείμενο της περιγραφής διαμορφώνουν μια ακολουθία με νόημα.
Ένας πίνακας διάταξης χρησιμοποιείται για την τοποθέτηση των στοιχείων της σελίδας. Οι σύνδεσμοι στη γραμμή πλοήγησης χωρίζονται σε διαφορετικά κελιά στην στήλη που βρίσκεται στην άκρη αριστερά.
Παράδειγμα κώδικα:
<table>
<tr>
<td><a href="#">Link 1</a></td>
<td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
<td rowspan="6"><img src="placard.png" alt="Placard text"></td>
</tr>
<tr>
<td><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
<tr>
<td><a href="#">Link 4</a></td>
</tr>
<tr>
<td><a href="#">Link 5</a></td>
</tr>
<tr>
<td><a href="#">Link 6</a></td>
</tr>
<tr>
<td><a href="#">Link 7</a></td>
<td rowspan="2"><h2>Image Heading</h2></td>
</tr>
<tr>
<td><a href="#">Link 8</a></td>
</tr>
<tr>
<td><a href="#">Link 9</a></td>
<td rowspan="12">Description of the image</td>
</tr>
<tr>
<td><a href="#">Link 10</a></td>
</tr>
...
<tr>
<td><a href="#">Link 20</a></td>
</tr>
</table>
Η σειρά ανάγνωσης από αυτό το παράδειγμα θα ήταν:
Σύνδεσμος 1
Εικόνα
Κείμενο αφίσας
Σύνδεσμος 2
Σύνδεσμος 3
Σύνδεσμος 4
Σύνδεσμος 5
Σύνδεσμος 6
Σύνδεσμος 7
Επικεφαλίδα εικόνας
Σύνδεσμος 8
Σύνδεσμος 9
Σύνδεσμος 10
...
Σύνδεσμος 20
Επειδή οι σύνδεσμοι της γραμμής πλοήγησης αλληλεπικαλύπτονται με το περιεχόμενο που περιγράφει την εικόνα, οι εφαρμογές ανάγνωσης οθόνης δεν μπορούν να παρουσιάσουν το περιεχόμενο με μια ακολουθία με νόημα που να αντιστοιχεί στην ακολουθία που παρουσιάζεται οπτικά.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Γραμμικοποιήστε το περιεχόμενο με έναν από τους ακόλουθους τρόπους:
Παρουσιάστε το περιεχόμενο με τη σειρά του πηγαίου κώδικα
Αφαιρέστε την επισημείωση πίνακα γύρω από το περιεχόμενο
Ελέγξτε ότι η γραμμική σειρά ανάγνωσης ταιριάζει με την ακολουθία με νόημα που μεταφέρεται μέσω της παρουσίασης.
Εάν ο έλεγχος #2 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Τεχνολογίες που υποστηρίζουν αναβοσβήσιμο του περιεχόμενου ελεγχόμενο από αρχείο εντολών.
Αυτή η αποτυχία σχετίζεται με:
Είναι δυνατή η χρήση των αρχείων εντολών για να αναβοσβήνουν περιεχόμενο εναλλάσσοντας (οn/off) την ορατότητα του περιεχομένου σε τακτά διαστήματα. Συνιστά αποτυχία για το αρχείο εντολών ή μη συμπερίληψη μηχανισμού για διακοπή του αναβοσβησίματος στα 5 δευτερόλεπτα ή νωρίτερα. Δείτε την ενότητα "Χρήση αρχείων εντολών για έλεγχο και διακοπή του αναβοσβησίματος εντός πέντε δευτερολέπτων ή λιγότερο" (SCR22: Using scripts to control blinking and stop it in five seconds or less) (Δημιουργία αρχείου εντολών) για πληροφορίες σχετικά με τον τρόπο τροποποίησης της τεχνικής ώστε να διακόπτει το αναβοσβήσιμο.
Το ακόλουθο παράδειγμα χρησιμοποιεί αρχείο εντολών για αναβοσβήσιμο του περιεχομένου, όμως το αναβοσβήσιμο συνεχίζεται επ' αόριστον αντί να σταματήσει μετά από πέντε δευτερόλεπτα.
Παράδειγμα κώδικα:
...
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "visible";
settime-out("hide()", 450);
}
// blink "off" state
function hide()
{
if (document.getElementById)
document.getElementById("blink1").style.visibility = "hidden";
settime-out("show()", 450);
}
// kick it off
show();
//-->
</script>
...
<span id="blink1">This content will blink</span>
Για κάθε εμφάνιση περιεχομένου που αναβοσβήνει:
Καθορίστε εάν το αναβοσβήσιμο σταματά εντός 5 δευτερολέπτων ή λιγότερο.
Εάν ο #1 είναι ψευδής, το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται όταν η δημιουργία αρχείου εντολών χρησιμοποιείται για να ανοίξουν νέα παράθυρα.
Αυτή η αποτυχία σχετίζεται με:
Μερικοί ιστότοποι ανοίγουν ένα νέο παράθυρο όταν φορτώνεται σελίδα, για να διαφημίσουν ένα προϊόν ή μια υπηρεσία. Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι οι σελίδες δεν αποπροσανατολίζουν τους χρήστες με το άνοιγμα ενός η περισσοτέρων παραθύρων μόλις φορτωθεί μια σελίδα.
Σημείωση: Υπάρχουν πολλές μέθοδοι ενεργοποίησης αυτής της αποτυχίας. Ακολουθούν παρακάτω δύο κοινά παραδείγματα που υποστηρίζονται με διαφορετικά τρόπο σε ποικίλες εκδόσεις των πρακτόρων χρήστη.
Το ακόλουθο παράδειγμα χρησιμοποιείται συνήθως σε HTML 4.01 για το άνοιγμα νέων παραθύρων όταν φορτώνονται σελίδες.
Παράδειγμα κώδικα:
window.onload = showAdvertisement;
function showAdvertisement()
{
window.open('advert.html', '_blank', 'height=200,width=150');
}
Το ακόλουθο παράδειγμα χρησιμοποιείται συνήθως σε HTML για το άνοιγμα νέων παραθύρων όταν φορτώνονται σελίδες.
Παράδειγμα κώδικα:
if (window.addEventListener) {
window.addEventListener("load", showAdvertisement, true);
}
if (window.attachEvent) {
window.attachEvent("onload", showAdvertisement);
}
function showAdvertisement()
{
window.open('noscript.html', '_blank', 'height=200,width=150');
}
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
φορτώστε μια νέα σελίδα
ελέγξτε εάν άνοιξε ένα νέο παράθυρο ως αποτέλεσμα της φόρτωσης της νέας σελίδας
Εάν το βήμα 2 είναι αληθές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Τεχνολογίες με ρουτίνες χειρισμού συμβάντων ειδικές για συσκευές κατάδειξης.
Σημειώσεις υποστήριξης πράκτορα χρήστη και υποστηρικτικής τεχνολογίας
Δεν υπάρχουν.
Αυτή η αποτυχία σχετίζεται με:
Όταν οι ρουτίνες χειρισμού συμβάντων για συσκευές κατάδειξης αποτελούν τον μοναδικό μηχανισμό που είναι διαθέσιμος για την κλήση μιας λειτουργίας του περιεχομένου, χρήστες χωρίς όραση (που δεν μπορούν να χρησιμοποιήσουν συσκευές όπως ποντίκια καθώς απαιτούν συγχρονισμό ματιού-χεριού), καθώς και χρήστες που πρέπει να χρησιμοποιήσουν εναλλασσόμενα πληκτρολόγια ή συσκευές εισόδου που λειτουργούν ως προσομοιωτές πληκτρολογίων, δεν θα έχουν πρόσβαση στη λειτουργία του περιεχομένου.
Το ακόλουθο παράδειγμα είναι μια εικόνα που αποκρίνεται σε ένα κλικ του ποντικιού για να μεταβεί σε άλλη σελίδα. Συνιστά αποτυχία διότι δεν είναι δυνατή η χρήση του πληκτρολογίου για την μετακίνηση στην επόμενη σελίδα. <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε εάν οι ρουτίνες χειρισμού συμβάντων για συσκευές κατάδειξης αποτελούν το μόνο μέσο κλήσης των λειτουργιών δημιουργίας αρχείων εντολών.
Εάν βρεθεί οποιαδήποτε, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται σε όλο το περιεχόμενο που υποστηρίζει αρχείο εντολών.
Σημειώσεις υποστήριξης πράκτορα χρήστη και υποστηρικτικής τεχνολογίας
Δεν υπάρχουν.
Αυτή η αποτυχία σχετίζεται με:
Το περιεχόμενο που κανονικά επισημαίνεται σε περίπτωση πρόσβασης σε αυτό με το πληκτρολόγιο, μπορεί να αφαιρέσει την επισήμανση με τη δημιουργία αρχείου εντολών. Αυτό πραγματοποιείται ορισμένες φορές όταν ο σχεδιαστής εξετάζει τη δημιουργία ενός ενδείκτη σήμανσης συστήματος που δεν είναι καλαίσθητος. Ωστόσο, ο ενδείκτης σήμανσης συστήματος είναι ένα σημαντικό μέρος της προσβασιμότητας για χρήστες πληκτρολογίου. Επιπλέον, με αυτήν την πρακτική καταργείται εξολοκλήρου η σήμανση, το οποίο σημαίνει ότι το περιεχόμενο είναι προσβάσιμο μόνο μέσω μιας συσκευής κατάδειξης, όπως ένα ποντίκι.
Παράδειγμα κώδικα:
<input type="submit" onFocus="this.blur();">
Παράδειγμα κώδικα:
<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a>
Παράδειγμα κώδικα:
<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Χρησιμοποιήστε το πληκτρολόγιο για να επιβεβαιώσετε ότι μπορείτε να μεταβείτε σε όλα τα αλληλεπιδραστικά στοιχεία χρησιμοποιώντας το πληκτρολόγιο.
Ελέγξτε ότι όταν επισημαίνεται κάθε στοιχείο, παραμένει έτσι μέχρι ο χρήστης να μετακινήσει την επισήμανση.
Εάν ο #2 είναι ψευδής, τότε αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Κάθε γλώσσα scripting στην πλευρά του διακομιστή
Περιεχόμενο που δεν καλύπτει τις εξαιρέσει στο κριτήριο επιτυχίας για επιτρεπόμενα χρονικά όρια.
Αυτή η αποτυχία σχετίζεται με:
Η κεφαλίδα "Refresh" δεν ορίζεται σε HTTP/1.1 ή HTTP/1.0, αλλά υποστηρίζεται ευρέως από εφαρμογές περιήγησης (έχει δοκιμαστεί σε Firefox 1.0 και IE 6 σε Windows).
Οι γλώσσες scripting στην πλευρά του διακομιστή επιτρέπουν σε προγραμματιστές να ρυθμίσουν τη μη τυποποιημένη κεφαλίδα HTTP "Refresh" με λήξη χρόνου σύνδεσης (σε δευτερόλεπτα) και ένα URI στο οποίο θα ανακατευθύνεται η εφαρμογή περιήγησης μετά από συγκεκριμένη λήξη του χρόνου σύνδεσης. Εάν το χρονικό διάστημα είναι πολύ μικρό, τα άτομα με τύφλωση δεν θα έχουν αρκετό χρόνο, ώστε οι εφαρμογές ανάγνωσης οθόνης που χρησιμοποιούν να διαβάσουν τη σελίδα πριν αυτή ανανεωθεί απροσδόκητα και οδηγήσει την εφαρμογή ανάγνωσης οθόνης να αρχίσει την ανάγνωση από την κορυφή. Οι χρήστες με όραση μπορεί επίσης να αποπροσανατολιστούν από την απροσδόκητη ανανέωση.
Η κεφαλίδα HTTP που ρυθμίζεται είναι Refresh: {time in seconds}; url={URI of new location}
. Είναι επίσης δυνατή η παράλειψη του URI και η λήψη σελίδας με περιοδική ανανέωση, η οποία προκαλεί το ίδιο πρόβλημα. Η κεφαλίδα HTTP που ρυθμίζεται είναι Refresh: {time in seconds}
.
Το ακόλουθο παράδειγμα συνιστά αποτυχία διότι εφαρμόζεται προγραμματισμένη ανακατεύθυνση στην πλευρά του διακομιστή σε Java Servlets ή JavaServer Pages (JSP).
Παράδειγμα κώδικα:
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
response.setHeader("Refresh", "10; URL=TargetPage.html");
out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
out.println("<html><head><title>Redirect</title></head><body>");
out.println("<p>This page will redirect you in 10 seconds.</p>");
out.println("</body></html>");
}
Το ακόλουθο παράδειγμα συνιστά αποτυχία διότι εφαρμόζεται προγραμματισμένη ανακατεύθυνση στην πλευρά του διακομιστή σε Active Server Pages (ASP) με VBScript.
Παράδειγμα κώδικα:
<% @Language = "VBScript" %>
<% option explicit
Response.Clear
Response.AddHeader "Refresh", "5; URL=TargetPage.htm"
%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
…
<!--HTML code for content that is shown before the redirect is triggered-->
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Πρωτόκολλο μεταφοράς υπερκειμένου -- HTTP/1.0 (Αίτηση της ομάδας IETF για σχόλια 1945) (Hypertext Transfer Protocol -- HTTP/1.0 (IETF Request for Comments 2616)) (απλό κείμενο)
Πρωτόκολλο μεταφοράς υπερκειμένου -- HTTP/1,1 (Αίτηση της ομάδας IETF για σχόλια 2616) (Hypertext Transfer Protocol -- HTTP/1.0 (IETF Request for Comments 2616)) (απλό κείμενο)
Όταν αποδίδεται μια Ιστοσελίδα, ελέγξτε εάν ανακατευθύνει αυτόματα σε άλλη σελίδα μετά από κάποιο χρονικό διάστημα χωρίς κάποια ενέργεια του χρήστη.
Εάν βρεθεί μια τέτοια ανακατεύθυνση, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML με δημιουργία αρχείων εντολών
Αυτή η αποτυχία σχετίζεται με:
Αυτή η αποτυχία δείχνει πώς η χρήση γενικών στοιχείων HTML για τη δημιουργία στοιχείων ελέγχου διεπαφής χρήστη μπορεί να καταστήσει τα στοιχεία ελέγχου μη προσβάσιμα για την υποστηρικτική τεχνολογία. Οι υποστηρικτικές τεχνολογίες βασίζονται στη γνώση του ρόλου και της τρέχουσας κατάστασης ενός συστατικού στοιχείου, για να παράσχει τις πληροφορίες στον χρήστη. Πολλά στοιχεία HTML έχουν σαφώς καθορισμένους ρόλους, όπως σύνδεσμοι, κουμπιά, πεδία κειμένου κ.λπ. Τα γενικά στοιχεία όπως τα div
και span
δεν έχουν προκαθορισμένους ρόλους. Όταν αυτά τα γενικά στοιχεία χρησιμοποιούνται για τη δημιουργία στοιχείων ελέγχου διεπαφής χρήστη σε HTML, η υποστηρικτική τεχνολογία ίσως δεν διαθέτει τις απαραίτητες πληροφορίες για να περιγράψει και να αλληλεπιδράσει με το στοιχείο ελέγχου.
Δείτε την ενότητα των πόρων παρακάτω για συνδέσμους προς προδιαγραφές, οι οποίες περιγράφουν μηχανισμούς για την παροχή των απαραίτητων πληροφοριών ρόλου και κατάστασης για τη δημιουργία πλήρως προσβάσεων στοιχείων ελέγχου διεπαφής χρήστη.
Το ακόλουθο παράδειγμα συνιστά αποτυχία διότι δημιουργεί ένα τετράγωνο επιλογής χρησιμοποιώντας ένα στοιχείο span" και μια εικόνα.
Παράδειγμα κώδικα:
<p>
<span onclick="toggleCheckbox('chkbox')">
<img src="unchecked.gif" id="chkbox" alt=""> Include Signature
</span>
</p>
Ακολουθεί ο κώδικας scripting που αλλάζει την προέλευση εικόνας όταν γίνει κλικ με το ποντίκι στο στοιχείο εικόνας span
.
Παράδειγμα κώδικα:
var CHECKED = "check.gif";
var UNCHECKED = "unchecked.gif";
function toggleCheckbox(imgId) {
var theImg = document.getElementById(imgId);
if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) {
theImg.src = UNCHECKED;
// additional code to implement unchecked action
}
else {
theImg.src = CHECKED;
// additional code to implement checked action
}
}
Ένα τετράγωνο επιλογής που δημιουργήθηκε με αυτό τον τρόπο, δεν θα λειτουργήσει με την υποστηρικτική τεχνολογία εφόσον δεν υπάρχουν πληροφορίες που να το προσδιορίζουν ως τετράγωνο επιλογής. Επιπρόσθετα, δεν είναι δυνατή η εκτέλεση αυτού του παραδείγματος από το πληκτρολόγιο και άρα αποτυγχάνει στην ικανοποίηση της οδηγίας 2.1.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Εξετάστε τον πηγαίο κώδικα για στοιχεία με ρουτίνες χειρισμού συμβάντων που εκχωρήθηκαν εντός της επισημείωσης ή μέσω δημιουργίας αρχείου εντολών.
Εάν αυτά τα στοιχεία λειτουργούν ως στοιχεία ελέγχου διεπαφής χρήστη, ελέγξτε ότι έχει καθοριστεί ο ρόλος του στοιχείου ελέγχου.
Εάν ο έλεγχος #2 είναι ψευδής και το στοιχείο ελέγχου διεπαφής χρήστη που δημιουργήθηκε δεν έχει πληροφορίες ρόλου, αυτή η συνθήκη αποτυχίας ισχύει.
Γενικά
Αυτή η αποτυχία σχετίζεται με:
Το έγγραφο περιγράφει μια αποτυχία που προκύπτει όταν ένα νέο παράθυρο δημιουργείται σε απάντηση της συμπλήρωσης ενός πεδίου κειμένου από χρήστη, για λόγο διαφορετικό από την αναφορά σφάλματος.
Αυτό είναι ένα αποδοκιμαζόμενο παράδειγμα μιας αποτυχίας: Ένας χρήστης συμπληρώνει την ταχυδρομική του διεύθυνση. Μόλις συμπληρώνει τον ταχυδρομικό του κώδικα, ανοίγει ένα νέο παράθυρο που περιέχει διαφημίσεις για υπηρεσίες που είναι διαθέσιμες στην πόλη.
Αυτό το παράδειγμα είναι αποδεκτό: Ένας χρήστης συμπληρώνει την ταχυδρομική του διεύθυνση σε μια φόρμα. Μόλις συμπληρώσει το πεδίο του ταχυδρομικού κώδικα, εκτελείται ένα αρχείο εντολών για να επικυρώσει ότι πρόκειται για έγκυρο ταχυδρομικό κώδικα. Εάν η τιμή δεν είναι έγκυρη, ανοίγει ένα παράθυρο με οδηγίες για τη συμπλήρωση του πεδίου.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Βρείτε όλα τα πεδία της φόρμας για εισαγωγή κειμένου
Αλλάξτε την τιμή σε κάθε πεδίο της φόρμας
Ελέγξτε εάν ανοίγουν νέα παράθυρα.
Για κάθε νέο παράθυρο που ανοίγει, ελέγξτε εάν περιέχει μήνυμα σφάλματος και κουμπί που κλείνει το παράθυρο επιστρέφοντας την επισήμανση στο αρχικό στοιχείο της φόρμας.
Εάν ο #3 είναι αληθής και ο #4 ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Γενικά
Αυτή η αποτυχία σχετίζεται με:
Αυτό το έγγραφο περιγράφει μια αποτυχία που προκύπτει όταν ενημερώνεται αυτόματα το περιεχόμενο που γεμίζει όλο το παράθυρο προβολής του χρήστη και όταν το περιεχόμενο δεν περιέχει επιλογές απενεργοποίησης αυτής της συμπεριφοράς.
Η ενημέρωση ενός ειδησεογραφικού τόπου γίνεται αυτόματα για να διασφαλιστεί ότι έχει πάντα τα πιο πρόσφατα νέα. Δεν υπάρχει επιλογή απενεργοποίησης αυτής της συμπεριφοράς.
Μια παρουσίαση διαφανειών γεμίζει όλο το παράθυρο προβολής και προχωρά αυτόματα στην επόμενη διαφάνεια. Δεν υπάρχει κουμπί διακοπής.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
ανοίξτε το περιεχόμενο
αφήστε το περιεχόμενο ανοικτό για 24 ώρες
ελέγξτε εάν το περιεχόμενο άλλαξε
επαληθεύστε ότι το περιεχόμενο δεν περιέχει οποιεσδήποτε ρυθμίσεις για την απενεργοποίηση αυτόματων αλλαγών
Εάν τα 3 και 4 είναι αληθή, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Εφαρμόζεται στο DOM (Μοντέλο Αντικειμένου Εγγράφου) για XML.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι να διασφαλίσει ότι είναι δυνατή η ερμηνεία των ιστοσελίδων με τρόπο συνεκτικό από πράκτορες χρήστη, συμπεριλαμβανομένης της υποστηρικτικής τεχνολογίας. Εάν συγκεκριμένες σχέσεις σε Ιστοσελίδα είναι αμφίσημες, οι διαφορετικοί πράκτορες χρήστη, συμπεριλαμβανομένων υποστηρικτικών τεχνολογιών, μπορούν να παρουσιάσουν πληροφορίες στους χρήστες τους. Για παράδειγμα, παρουσιάζονται διαφορετικές πληροφορίες σε χρήστες υποστηρικτικών τεχνολογιών σε σχέση με άλλους δημοφιλείς πράκτορες χρήστη. Μερικά στοιχεία και παράμετροι σε γλώσσες επισημείωσης πρέπει να έχουν μοναδικές τιμές και εάν αυτή η απαίτηση δεν πληρείται, το αποτέλεσμα μπορεί να είναι λανθασμένο ή περιεχόμενο μη μοναδικά διαχωριζόμενο.
Τιμή παραμέτρου id που δεν είναι μοναδική.
Ένα έγγραφο SVG χρησιμοποιεί παραμέτρους id
σε στοιχεία title
(για εναλλακτικό κείμενο) προκειμένου να ξαναχρησιμοποιηθούν σε άλλες θέσεις του εγγράφου. Ωστόσο, ένα από τα στοιχεία title
έχει αναγνωριστικό που χρησιμοποιείται και αλλού στο έγγραφο, άρα το έγγραφο είναι αμφίσημο.
Ένα έγγραφο DAISY χρησιμοποιεί την παράμετρο imgref
στο στοιχείο caption
για να συνδέσει επεξηγήσεις με εικόνες. Ωστόσο, η τιμή της παραμέτρου imgref
δεν αναφέρεται στην παράμετρο id
του στοιχείου img
στο οποίο ανήκει, άρα ο πράκτορας χρήστη δεν μπορεί να βρει την επεξήγηση για αυτή την εικόνα.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε ότι όλες οι τιμές id εντός του εγγράφου (όπως ορίζεται στο σχήμα) είναι μοναδικές.
Ελέγξτε ότι τα στοιχεία και οι παράμετροι που αναφέρονται σε μοναδικά αναγνωριστικά εντός του ίδιου εγγράφου έχουν αντίστοιχη τιμή id
Σημειώστε ότι για τύπους εγγράφων XML που καθορίζονται από DTD, αυτό αναφέρεται σε παραμέτρους τύπου ID, IDREF ή IDREFS. Σημειώστε ότι για τύπους εγγράφων XML που καθορίζονται από W3C XML Schema, αυτό αναφέρεται σε παραμέτρους τύπου ID, IDREF ή IDREFS. (Για λόγους συμβατότητας, οι τύποι ID, IDREF και IDREFS πρέπει να χρησιμοποιούνται μόνο σε παραμέτρους, αλλά είναι δυνατή και η χρήση τους για στοιχεία, σύμφωνα με το "XML Schema Μέρος 2: Τύποι δεδομένων, δεύτερη έκδοση" (XML Schema Part 2: Datatypes Second Edition).) Για άλλες γλώσσες schema, ελέγξτε τους αντίστοιχους μηχανισμού για καθορισμό των αναγνωριστικών και των αναφορών σε αυτά.
Εάν ο #1 ή ο #2 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει μια συνθήκη αποτυχίας όταν το απαιτούμενο περιβάλλον για την κατανόηση του σκοπού ενός συνδέσμου, εντοπίζεται σε περιεχόμενο που δεν είναι περιβάλλον συνδέσμου που ορίζεται μέσω προγραμματισμού. Εάν το περιβάλλον για τον σύνδεσμο δεν είναι στην ίδια πρόταση, παράγραφο, στοιχείο λίστας ή κελί πίνακα με τον σύνδεσμο, τότε ο χρήστης δεν θα είναι σε θέση να εντοπίσει εύκολα τον προορισμό του συνδέσμου. Εάν ο χρήστης πρέπει να αφήσει τον σύνδεσμο να αναζητήσει το περιβάλλον, αυτό δεν είναι περιβάλλον συνδέσμου που ορίζεται μέσω προγραμματισμού και προκύπτει αυτή η συνθήκη αποτυχίας.
Μια υπηρεσία ειδήσεων παραθέτει τις πρώτες λίγες προτάσεις ενός άρθρου σε μια παράγραφο. Η επόμενη παράγραφος περιέχει τον σύνδεσμο "Διαβάστε περισσότερα...". Καθώς ο σύνδεσμος δεν βρίσκεται στην ίδια παράγραφο με την εισαγωγική πρόταση, ο χρήστης δεν μπορεί εύκολα να ανακαλύψει τί θα του επιτρέψει ο σύνδεσμος να διαβάσει περισσότερο.
Παράδειγμα κώδικα:
<p>A British businessman has racked up 2 million flyer miles and plans to
travel on the world's first commercial tourism flights to space.</p>
<p><a href="ff.html">Read More...</a></p>
Ένας τόπος ήχου, παρέχει συνδέσμους για σημεία από όπου είναι δυνατή η λήψη του προγράμματος αναπαραγωγής του. Οι πληροφορίες σχετικά με το στοιχείο προς λήψη από τον σύνδεσμο, είναι η προηγούμενη γραμμή του πίνακα διάταξης, που δεν είναι περιβάλλον για τον σύνδεσμο το οποίο ορίζεται μέσω προγραμματισμού.
Παράδειγμα κώδικα:
<table>
<tr>
<td>Play music from your browser</td>
</tr>
<tr>
<td>
<a href="http://www.example.com/download.htm">
<img src="download.jpg" width="165" height="32" alt="Download now"></a>
</td>
</tr>
</table>
Στις HTML και XHTML, λίστες ορισμών παρέχουν έναν συσχετισμό μέσω προγραμματισμού μεταξύ του όρου και του ορισμού του. Θεωρητικά λοιπόν, ένας σύνδεσμος που παρέχεται σε έναν ορισμό μπορεί να χρησιμοποιήσει τον όρο ορισμού ως το περιβάλλον του. Ωστόσο, η υποστήριξη είναι ιδιαίτερα ακατάλληλη για λίστες ορισμών και δεν θα υπάρχει τρόπος για χρήστες σύγχρονης υποστηρικτικής τεχνολογίας να ανακαλύψουν το περιβάλλον μέσω αποκλειστικά μιας λίστας ορισμών. Οι λίστες ορισμών είναι ένας χρήσιμος μηχανισμός για την παροχή σχέσεων συσχετισμού, αλλά αυτή τη στιγμή δεν μπορούν να θεωρηθούν επαρκείς για το Κριτήριο επιτυχίας 2.4.2 (Success Criterion 2.4.2).
Παράδειγμα κώδικα:
<dl>
<dt>Harry Potter and the Chamber of Secrets</dt>
<dd>Story of a boy with magical powers who has to face Lord Voldemort.</dd>
<dd><a href="potter.php?id=123">Buy now</a></dd>
<dt>Harry Potter and the Goblet of Fire</dt>
<dd>Harry finds himself selected as an underaged competitor in a dangerous multi-wizardry school competition.</dd>
<dd><a href="potter.php?id=124">Buy now</a></dd>
<dt>Harry Potter and the Prisoner of Azkaban</dt>
<dd>
Something wicked this way comes. It's Harry's third year at Hogwarts;
not only does he have a new "Defense Against the Dark Arts" teacher,
but there is also trouble brewing. Convicted murderer Sirius Black has
escaped the Wizards' Prison and is coming after Harry.
</dd>
<dd><a href="potter.php?id=125">Buy now</a></dd>
</dl>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Εντοπίστε απαραίτητο περιεχόμενο για την κατανόηση του τρόπου με τον οποίο κείμενο συνδέσμου περιγράφει τον σκοπό του συνδέσμου.
Ελέγξτε εάν το περιεχόμενο περιέχεται στην ίδια πρόταση, παράγραφο, στοιχείο λίστας ή κελί πίνακα ή στην επικεφαλίδα που προηγείται.
Εάν ο έλεγχος 2 είναι ψευδής, το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει μια συνθήκη αποτυχίας για εναλλακτικά κειμένου σε εικόνες. Εάν δεν υπάρχει παράμετρος alt, τότε οι υποστηρικτικές τεχνολογίες δεν μπορούν να προσδιορίσουν την εικόνα ή να μεταφέρουν τον σκοπό αυτής στον χρήστη.
Κάποια υποστηρικτική τεχνολογία ενδέχεται να επιχειρήσει να αναπληρώσει το κείμενο alt που απουσιάζει, μέσω ανάγνωσης του ονόματος αρχείου της εικόνας. Αλλά είναι ανεπαρκές να βασίζεστε απλά στο όνομα αρχείου για πολλούς λόγους. Για παράδειγμα, τα ονόματα αρχείων ενδέχεται να μην είναι περιγραφικά (π.χ. images/nav01.gif) και οι προδιαγραφές τεχνολογίας δεν απαιτούν περιγραφικά ονόματα αρχείων. Κάποια υποστηρικτική τεχνολογία ενδέχεται να μην διαβάζει το όνομα αρχείου, εάν απουσιάζει το κείμενο alt.
Στο παρακάτω παράδειγμα κώδικα, το άτομο που χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης δεν θα γνωρίζει τον σκοπό της εικόνας.
Παράδειγμα κώδικα:
<img src="../images/animal.jpg" />
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
προσδιορίστε κάθε στοιχεία img
, area
και input
του τύπου "image"
ελέγξτε ότι υπάρχει η παράμετρος alt
για αυτά τα στοιχεία.
Εάν ο έλεγχος #2 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει μια συνθήκη αποτυχίας για όλες τις τεχνικές που αφορούν μηχανισμούς πλοήγησης που επαναλαμβάνονται σε πολλαπλές Ιστοσελίδες εντός ενός συνόλου Ιστοσελίδων (κριτήριο επιτυχίας 3.2.3). Εάν ο μηχανισμός παρουσιάζει τη σειρά των συνδέσμων με μια διαφορετική σειρά σε δύο ή περισσότερες σελίδες, τότε η αποτυχία ενεργοποιείται.
Παραδείγματα ενός μηχανισμού πλοήγησης που παρουσιάζουν συνδέσμους σε μια διαφορετική σειρά.
Μενού Σελίδα 1
Παράδειγμα κώδικα:
<div id="menu">
<a href="Brazil.htm">Brazil</a><br />
<a href="Canada.htm">Canada</a><br />
<a href="Germany.htm">Germany</a><br />
<a href="Poland.htm">Poland</a>
</div>
Μενού Σελίδα 2
Παράδειγμα κώδικα:
<div id="menu">
<a href="Canada.htm">Canada</a><br />
<a href="Brazil.htm">Brazil</a><br />
<a href="Germany.htm">Germany</a><br />
<a href="Poland.htm">Poland</a>
</div>
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε να δείτε εάν χρησιμοποιείται ένας μηχανισμός πλοήγησης σε περισσότερες από μία Ιστοσελίδες.
Ελέγξτε την προεπιλεγμένη παρουσίαση του μηχανισμού πλοήγησης σε κάθε σελίδα για να δείτε εάν η λίστα συνδέσμων είναι στην ίδια σχετική σειρά σε κάθε Ιστοσελίδα.
Σημείωση: "Ίδια σχετική σειρά" σημαίνει ότι τα δευτερεύοντα στοιχεία πλοήγησης ενδέχεται να βρίσκονται μεταξύ των στοιχείων συνδέσμου σε ορισμένες σελίδες. Μπορούν να παρουσιάζονται χωρίς να επηρεάζεται το αποτέλεσμα αυτού του ελέγχου.
Εάν ο #1 είναι αληθής και ο #2 ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η περιγραφή της αποτυχίας που προκύπτει όταν η μεγάλη περιγραφή για μη κειμενικό περιεχόμενο δεν εξυπηρετεί τον ίδιο σκοπό ή δεν παρουσιάζει τις ίδιες πληροφορίες με το μη κειμενικό περιεχόμενο. Αυτό μπορεί να προκαλέσει προβλήματα για άτομα που δεν μπορούν να ερμηνεύσουν μη κειμενικό περιεχόμενο, καθώς βασίζονται στη μεγάλη περιγραφή για την παροχή των απαραίτητων πληροφοριών που μεταφέρονται από το μη κειμενικό περιεχόμενο. Χωρίς μια μεγάλη περιγραφή που παρέχει πλήρεις πληροφορίες, ένα άτομο ενδέχεται να μην μπορεί να κατανοήσει ή αλληλεπιδράσει με την Ιστοσελίδα.
Μια εικόνα που δείχνει τις θέσεις χώρων συμβάντων στους Ολυμπιακούς Αγώνες, εμφανίζεται σε έναν οδικό χάρτη. Η εικόνα περιέχει επίσης ένα εικονίδιο για κάθε τύπο αθλητικού συμβάντος που διεξάγεται στον κάθε χώρο. Η μεγάλη περιγραφή δηλώνει "Χάρτης που δείχνει τη θέση κάθε Ολυμπιακού χώρου. Τα αγωνίσματα της παγοδρομίας, του χόκεϋ και του κέρλινγκ διεξάγονται στο "Winter Park Ice Arena", το σκι σε κατηφόρα και το άλμα διεξάγονται στο "Snow Mountain", τα αγωνίσματα γυμναστικής διεξάγονται στην "JumpUp Arena", το σκι ανώμαλου εδάφους διεξάγεται στο "Kilometer Forest". Ενώ αυτή η περιγραφή παρέχει χρήσιμες πληροφορίες, δεν μεταφέρει τις ίδιες πληροφορίες με την εικόνα καθώς δεν παρέχει συγκεκριμένες πληροφορίες θέσης, όπως τη διεύθυνση ή την απόσταση κάθε χώρου από ένα σταθερό σημείο. Να σημειωθεί ότι οι μεγάλες περιγραφές δεν χρειάζεται πάντα να είναι πεζού λόγου. Ορισμένες φορές, οι πληροφορίες ενδέχεται να παρουσιάζονται καλύτερα σε έναν πίνακα ή άλλη εναλλακτική μορφή.
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Για όλο το μη κειμενικό περιεχόμενο που απαιτεί μια μεγάλη περιγραφή
Ελέγξτε ότι η μεγάλη περιγραφή εξυπηρετεί τον ίδιο σκοπό ή παρουσιάζει τις ίδιες πληροφορίες με το μη κειμενικό περιεχόμενο.
Εάν το βήμα #1 είναι ψευδές, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Στοιχεία ελέγχου HTML και XHTML που χρησιμοποιούν ορατές ετικέτες
Αυτή η αποτυχία σχετίζεται με:
Αυτή η αποτυχία περιγράφει ένα πρόβλημα που προκύπτει όταν δεν χρησιμοποιείται ένα στοιχείο label για να συσχετίσει ρητά ένα στοιχείο ελέγχου φόρμας με μια ετικέτα, όπου το οπτικό σχέδιο χρησιμοποιεί μια ετικέτα.
Σημείωση 1:Στοιχεία που χρησιμοποιούν ετικέτες ρητού συσχετισμού, είναι:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
Σημείωση 2:Το στοιχείο label
δεν χρησιμοποιείται για τα ακόλουθα καθώς οι ετικέτες για αυτά τα στοιχεία παρέχονται μέσω της παραμέτρου value (για κουμπιά υποβολής και επαναφοράς), της παραμέτρου alt (για κουμπιά εικόνας) ή το ίδιο το περιεχόμενο στοιχείου (κουμπί).
Κουμπιά υποβολής και εκκαθάρισης (input type="submit"
ή input type="reset"
)
Κουμπιά εικόνας (input type="image"
)
Κρυφά πεδία εισόδου (input type="hidden"
)
Κουμπιά αρχείου εντολών (στοιχεία button
ή <input type="button">
)
Το παρακάτω παράδειγμα δείχνει μια φόρμα που παρουσιάζει οπτικά ετικέτες για στοιχεία ελέγχου φόρμας, αλλά δεν κάνει χρήση του στοιχείου label
για να τα συσχετίσει με τα στοιχεία ελέγχου τους. Το παρακάτω παράδειγμα κώδικα είναι μια αποτυχία καθώς υποστηρικτική τεχνολογία δεν είναι σε θέση να ορίσει τους κατάλληλους συνδυασμούς label
και στοιχείων ελέγχου.
Παράδειγμα κώδικα:
<form>
First name:
<input type="text" name="firstname">
<br />
Last name:
<input type="text" name="lastname">
<br />
I have a dog <input type="checkbox" name="pet" value="dog" />
I have a cat <input type="checkbox" name="pet" value="cat" />
</form>
Στα παρακάτω παραδείγματα κώδικα, τα συσχετισμένα με τα στοιχεία ελέγχου εισαγωγής κειμένου ονόματα, δεν ορίζονται κατάλληλα από υποστηρικτική τεχνολογία.
Παράδειγμα κώδικα:
<form action="..." method="post">
<p>
<label>
First Name
<input type="text" name="firstname">
</label>
<label>
<input type="text" name="lastname">
Last Name
</label>
</p>
</form>
Παράδειγμα κώδικα:
<form action="..." method="post">
<p>
<label>First Name </label>
<input type="text" name="firstname">
<label>Last Name</label>
<input type="text" name="lastname">
</p>
</form>
Το πλαίσιο αναζήτησης κειμένου στο παρακάτω παράδειγμα κώδικα δεν έχει ένα όνομα. Το όνομα μπορεί να παρέχεται είτε με την παράμετρο title ή με ένα στοιχείο label, κρυμμένο με το CSS.
Παράδειγμα κώδικα:
<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">
Για όλα τα στοιχεία input
τύπου radio
, checkbox
, text
, file
ή password
, για όλα τα στοιχεία textareas
και για όλα τα στοιχεία select
στην Ιστοσελίδα:
Ελέγξτε ότι το οπτικό σχέδιο χρησιμοποιεί μια ετικέτα κειμένου που προσδιορίζει τον σκοπό του στοιχείου ελέγχου
Ελέγξτε ότι ένα στοιχείο label συσχετίζει το κείμενο με το στοιχείο input
Εάν ο έλεγχος #1 είναι αληθής και ο έλεγχος #2 ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
HTML, XHTML και CSS
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της συνθήκης αποτυχίας είναι η περιγραφή ενός προβλήματος που προκύπτει όταν αλλαγές στο μέγεθος κειμένου προκαλούν περικοπή, αποκοπή ή παραμόρφωση του κειμένου, ώστε να μην είναι πλέον διαθέσιμο στον χρήστη. Γενικά, αυτή η αποτυχία προκύπτει όταν δεν υπάρχει τρόπος για τη μηχανή διάταξης ενός πράκτορα χρήστη να εκπληρώσει όλες τις υποδείξεις διάταξης στην HTML, στο νέο μέγεθος γραμματοσειράς. Ορισμένοι από αυτούς τους τρόπους όπου μπορεί να συμβεί αυτό, περιλαμβάνουν:
Ρύθμιση της ιδιότητας overflow
του περικλείοντος στοιχείου σε hidden
Χρήση περιεχομένου σε απόλυτη τοποθέτηση
Δημιουργία αναδυόμενων που δεν είναι αρκετά μεγάλα για το περιεχόμενό τους στο νέο μέγεθος γραμματοσειράς
Το μέγεθος γραμματοσειράς ορίζεται με έναν κλιμακούμενο τρόπο, αλλά το κοντέινερ ρυθμίζεται σε ένα σταθερό μέγεθος pixel. Ένα γκρίζο περίγραμμα δείχνει τα όρια του κοντέινερ κειμένου. Όταν αλλάζει το μέγεθος κειμένου, υπερβαίνει τα όρια του κοντέινερ και παραμορφώνει την επόμενη παράγραφο.
Παράδειγμα κώδικα:
<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;>
Now is the time for all good men to come to the aid of their country.
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>
Εικόνα του παραδείγματος 1:
Αυτό το παράδειγμα είναι πανομοιότυπο του τελευταίου, με την εξαίρεση ότι το κοντέινερ ορίζεται ώστε να περικόπτει το κείμενο. Το κείμενο δεν επικαλύπτει την επόμενη παράγραφο, αλλά αποκόπτεται. Αυτό είναι επίσης μια αποτυχία.
Παράδειγμα κώδικα:
<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;>
Now is the time for all good men to come to the aid of their country.
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>
Εικόνα του παραδείγματος 2:
(καμία δεν εμπεριέχεται στη λίστα)
Αυξήστε το μέγεθος κειμένου του περιεχομένου κατά 200%.
Ελέγξτε ότι δεν περικόπτεται, αποκόπτεται ή παραμορφώνεται κανένα κείμενο.
Εάν ο έλεγχος #2 είναι ψευδής, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτά τα κριτήρια επιτυχίας.
Γλώσσες επισημείωσης: HTML, XHTML και άλλες τεχνολογίες που βασίζονται σε SGML ή XML.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της αποτυχίας είναι να προσδιορίσει παραδείγματα σφαλμάτων επισημείωσης σε ετικέτες στοιχείων, τα οποία μπορεί να προκαλέσουν αδυναμία της υποστηρικτικής τεχνολογίας για να παράγει ένα ικανοποιητικό μοντέλο της σελίδας. Διαφορετικοί πράκτορες χρήστη ενδέχεται να υλοποιήσουν διαφορετικές αιρετικές για την επαναφορά από σφάλματα, οδηγώντας σε μη συνεκτικές παρουσιάσεις της σελίδας μεταξύ πρακτόρων χρήστη.
Ορισμένα κοινού τύπου προβλήματα με ετικέτες έναρξης ή λήξης που οδηγούν σε αυτήν τη συνθήκη αποτυχίας (αν και αυτή δεν είναι μια πλήρης λίστα):
Ετικέτες ανοίγματος και κλεισίματος από τις οποίες απουσιάζουν οι αγκύλες ανοίγματος < και κλεισίματος >.
Ετικέτα κλεισίματος από την οποία απουσιάζει η αρχική παύλα / για να υποδείξει ότι πρόκειται για μια ετικέτα κλεισίματος.
Τιμές παραμέτρου που έχουν μια παράθεση ανοίγματος αλλά όχι μια παράθεση κλεισίματος. Οι τιμές παραμέτρου πρέπει να παρουσιάζουν είτε πλήρη παράθεση ή, σε ορισμένες γλώσσες επισημείωσης, μπορεί να είναι χωρίς παράθεση.
Έλλειψη λευκού διαστήματος μεταξύ παραμέτρων.
Τιμές παραμέτρου που δεν είναι σε παράθεση, έχουν λευκό διάστημα στην τιμή.
Αποτυχία παροχής μιας ετικέτας στοιχείου κλεισίματος για στοιχεία που δεν αποδέχονται σύνταξη κενού στοιχείου.
Ο παρακάτω κώδικας αποτυγχάνει καθώς απουσιάζει από την ετικέτα ανοίγματος μία γωνιακή αγκύλη και το στοχευόμενο όριο της ετικέτας δεν είναι σαφές.
Παράδειγμα κώδικα:
<p This is a paragraph</p>
Ο παρακάτω κώδικας αποτυγχάνει καθώς από την ετικέτα κλεισίματος απουσιάζει η κάθετη παύλα, καθιστώντας την όψη της ως ακόμα μίας άλλης ετικέτας ανοίγματος.
Παράδειγμα κώδικα:
<p>This is a paragraph<p>
Ο παρακάτω κώδικας αποτυγχάνει καθώς από την τιμή παραμέτρου απουσιάζει η παράθεση κλεισίματος, η οποία καθιστά το όριο του ζεύγους παράμετρος-τιμή ασαφές.
Παράδειγμα κώδικα:
<input title="name type="text">
Ο παρακάτω κώδικας αποτυγχάνει καθώς δεν υπάρχει λευκό διάστημα μεταξύ παραμέτρων, το οποίο καθιστά το όριο μεταξύ των ζευγαριών παράμετρος-τιμή ασαφές.
Παράδειγμα κώδικα:
<input title="name"type="text">
Ο παρακάτω κώδικας αποτυγχάνει καθώς τη τιμή παραμέτρου δεν είναι σε παράθεση και περιέχει λευκό διάστημα, το οποίο καθιστά το όριο του ζεύγους παράμετρος-τιμή ασαφές.
Παράδειγμα κώδικα:
<input title=Enter name here type=text>
Ο παρακάτω κώδικας αποτυγχάνει καθώς απουσιάζει η ετικέτα κλεισίματος από την πρώτη παράγραφο, καθιστώντας ασαφές εάν η δεύτερη παράγραφος είναι θυγατρική ή συγγενική της πρώτης.
Παράδειγμα κώδικα:
<p>This is a paragraph
<p>This is another paragraph</p>
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε ότι ο πηγαίος κώδικας σελίδων υλοποιείται σε γλώσσες επισημείωσης.
Ελέγξτε εάν είναι ακατάλληλες οποιεσδήποτε ετικέτες ανοίγματος, κλεισίματος ή παράμετροι.
Εάν ο έλεγχος #2 είναι αληθής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Κάθε τεχνολογία.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της συνθήκης αποτυχίας είναι η αποφυγή αντικατάστασης χαρακτήρων, των οποίοι οι γλύφοι είναι όμοιοι του στοχευόμενου χαρακτήρα, για αυτόν τον στοχευόμενο χαρακτήρα. Το σύνολο χαρακτήρων Unicode ορίζει χιλιάδες χαρακτήρες, καλύπτοντας πολυάριθμα συστήματα γραφής. Ενώ οι γλύφοι για ορισμένους από αυτούς τους χαρακτήρες ενδέχεται να έχουν όμοια όψη με τους γλύφους άλλων χαρακτήρων στην οπτική παρουσίαση, δεν υπόκεινται στην ίδια επεξεργασία με εργαλεία μετατροπής κειμένου σε ομιλία.
Για παράδειγμα, οι χαρακτήρες U+0063 και U+03F2 μοιάζουν με το γράμμα "c", αλλά ο πρώτος προέρχεται από την αλφάβητο δυτικών γλωσσών και ο δεύτερος από την ελληνική αλφάβητο και δεν χρησιμοποιείται σε δυτικές γλώσσες. Οι χαρακτήρες U+0033 και U+04E0 μοιάζουν με τον αριθμό "3", αλλά ο δεύτερος είναι στην ουσία ένα γράμμα της κυριλλικής αλφαβήτου.
Σημείωση: Αυτή η αποτυχία ισχύει επίσης στη χρήση οντοτήτων χαρακτήρων. Είναι ο λανθασμένος χαρακτήρες που χρησιμοποιείται, λόγω της αναπαράστασης του γλύφου του, που συνιστά μια αποτυχία και όχι ο μηχανισμός με τον οποίο αυτός ο χαρακτήρας υλοποιείται.
Η παρακάτω λέξη μοιάζει, σε προγράμματα περιήγησης με κατάλληλη υποστήριξη γραμματοσειρών, με την αγγλική λέξη "cook", αλλά συνίσταται από τη συμβολοσειρά U+03f2 U+043E U+03BF U+006B, όπου μόνο ένα είναι γράμμα της δυτικής αλφαβήτου. Αυτή η λέξη δεν θα υποστεί ουσιαστική επεξεργασία και δεν παρέχεται εναλλακτικό κειμένου.
Παράδειγμα κώδικα:
ϲоοk
Το παρακάτω παράδειγμα, όπως το παραπάνω, θα μοιάζει με την αγγλική λέξη "cook" όταν αποδίδεται σε προγράμματα περιήγησης με κατάλληλη υποστήριξη γραμματοσειρών. Σε αυτήν την περίπτωση, οι χαρακτήρες υλοποιούνται με οντότητες χαρακτήρων, αλλά η λέξη δεν θα υπόκειται σε ουσιαστική επεξεργασία και δεν θα παρέχεται ένα εναλλακτικό κειμένου.
Παράδειγμα κώδικα:
ϲоοk
Λειτουργικό παράδειγμα: "ϲоοk"
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε τους χαρακτήρες ή τις οντότητες χαρακτήρων που χρησιμοποιούνται για την αναπαράσταση κειμένου.
Εάν οι χαρακτήρες που χρησιμοποιούνται, δεν συμφωνούν με τους κατάλληλους χαρακτήρες για τους γλύφους που εμφανίζονται στην ανθρώπινη γλώσσα του περιεχομένου, τότε χρησιμοποιούνται ομοιώματα γλυφών.
Εάν ομοιώματα γλυφών χρησιμοποιούνται και δεν υπάρχει ένα εναλλακτικό κειμένου για κάθε εύρος κειμένου που χρησιμοποιεί ομοιώματα γλυφών, τότε το περιεχόμενο δεν ικανοποιεί το κριτήριο επιτυχίας.
Κάθε τεχνολογία.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της συνθήκης αποτυχίας είναι να αποφευχθεί η χρήση τέχνης ASCII (ASCII art) όταν δεν παρέχεται ένα εναλλακτικό κειμένου. Αν και η τέχνη ASCII υλοποιείται ως μια συμβολοσειρά χαρακτήρων, το νόημά της προέρχεται από το μοτίβο γλυφών που μορφοποιούνται από μια οπτική παρουσίαση αυτής της συμβολοσειράς και όχι από το ίδιο το κείμενο. Επομένως, η τέχνη ASCII είναι μη κειμενικό περιεχόμενο και απαιτεί μια εναλλακτική κειμένου. Τα εναλλακτικά κειμένου ή σύνδεσμοι προς αυτές, θα πρέπει να τοποθετούνται κοντά στην τέχνη ASCII ώστε να συσχετίζονται με αυτή.
Από το παρακάτω διάγραμμα τέχνης ASCII απουσιάζει ένα εναλλακτικό κειμένου και επομένως, δεν ικανοποιεί το κριτήριο επιτυχίας 1.1.1. Να σημειωθεί ότι αυτό το παράδειγμα αποτυχίας προκαλεί όντως την αποτυχία της σελίδας, αλλά μπορείτε να παρακάμψετε το παράδειγμα (skip over the example).
Παράδειγμα κώδικα:
<pre>
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Flash frequency (Hz)
</pre>
(καμία δεν εμπεριέχεται στη λίστα)
Πρόσβαση σε μια σελίδα με τέχνη ASCII.
Για κάθε περίπτωση τέχνης ASCII, ελέγξτε ότι υπάρχει ένα εναλλακτικό κειμένου.
Εάν ο έλεγχος #2 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Κάθε τεχνολογία.
Αυτή η αποτυχία σχετίζεται με:
Αυτή η αποτυχία βοηθά να διασφαλίσετε ότι άτομα που δεν μπορούν να αντιληφθούν διαφορές χρώματος, μπορούν να προσδιορίσουν τους συνδέσμους. Απαιτούνται υπογραμμίσεις συνδέσμων ή κάποιας άλλης μορφής, μη χρωματική οπτική ένδειξη. Ενώ ορισμένοι σύνδεσμοι ενδέχεται να είναι οπτικά αυτονόητοι από τη σχεδίαση σελίδας και το περιβάλλον, όπως σύνδεσμοι πλοήγησης, οι σύνδεσμοι εντός κειμένου είναι συχνά κατανοητοί μόνον από τις δικές τους παραμέτρους εμφάνισης. Αν καταργήσετε την υπογράμμιση και αφήσετε μόνο τη διαφορά χρώματος για τέτοιους συνδέσμους, θα είναι μια αποτυχία καθώς δεν θα υπάρχει άλλη οπτική ένδειξη (εκτός του χρώματος) ότι πρόκειται για έναν σύνδεσμο.
Σημείωση 1:Εάν η μη χρωματική ένδειξη πραγματοποιείται μόνον όταν το ποντίκι βρίσκεται επάνω από τον σύνδεσμο ή όταν ο σύνδεσμος επισημαίνεται, αυτό παραμένει μια αποτυχία.
Σημείωση 2:Εάν ο σύνδεσμος είναι διαφορετικού χρώματος και σε έντονη γραφή, δεν θα αποτύχει καθώς η έντονη γραφή δεν εξαρτάται από το χρώμα.
Μια Ιστοσελίδα περιλαμβάνει έναν μεγάλο αριθμό συνδέσμων εντός του σώματος κειμένου. Οι σύνδεσμοι έχουν στυλ κατάλληλο ώστε να μην έχουν υπογραμμίσεις και είναι ιδιαιτέρως όμοιοι ως προς το χρώμα στο σώμα κειμένου. Αυτό θα είναι μια αποτυχία καθώς οι χρήστες δεν θα μπορούν να κάνουν τη διάκριση των συνδέσμων από το σώμα κειμένου.
Ο παρακάτω κώδικας είναι ένα παράδειγμα κατάργησης της υπογράμμισης από έναν σύνδεσμο σε μια πρόταση ή παράγραφο, χωρίς παροχή άλλης οπτικής ένδειξης εκτός του χρώματος.
Παράδειγμα κώδικα:
<head>
<style type="text/css">
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>
<body>
<p>To find out more about the <a href="rain_in_spain.htm">rain in spain</a>there are many resources.</p>
</body>
Σημείωση: Εάν η οπτική ένδειξη παρέχεται μόνο όταν αφήνεται το ποντίκι πάνω στο στοιχείο (όπως στο παραπάνω παράδειγμα), θα εξακολουθεί να αποτυγχάνει.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε ότι κάθε σύνδεσμος εντός του κειμένου που είναι μέρος μιας πρότασης ή παραγράφου (ή άλλης περιοχής όπου θα μπορούσαν να θεωρηθούν κατά λάθος ως μη συνδεδεμένο κείμενο) στη σελίδα υπογραμμίζεται ή προσδιορίζεται οπτικά με άλλον τρόπο (π.χ. έντονη γραφή, πλάγια γραφή) ως ένας σύνδεσμος χωρίς να βασίζεται στο χρώμα (απόχρωση).
Εάν ο έλεγχος #1 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Σελίδες που παρέχουν εναλλακτικές συγχρονισμένων μέσων για το κείμενο.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της αποτυχίας είναι να αποφευχθούν περιπτώσεις στις οποίες συγχρονισμένα εναλλακτικά μέσα δεν φέρουν ετικέτα με το κείμενο για το οποίο είναι εναλλακτικά. Τα συγχρονισμένα εναλλακτικά μέσα παρέχουν βελτιωμένη πρόσβαση σε χρήστες για τους οποίους τα συγχρονισμένα μέσα αποτελούν μια περισσότερο αποτελεσματική μορφή από το κείμενο. Καθώς είναι εναλλακτικά κειμένου, δεν χρειάζεται να έχουν εφεδρικά εναλλακτικά κειμένου. Ωστόσο, χρειάζεται να φέρουν σαφείς ετικέτες με το κείμενο το οποίο αντικαθιστούν, ώστε οι χρήστες να μπορούν να τα εντοπίσουν και χρήστες που συνήθως αναμένουν εναλλακτικά κειμένου για συγχρονισμένα μέσα, να γνωρίζουν πού να τα αναζητήσουν.
Μια σελίδα με οδηγίες για την ολοκλήρωση μιας φόρμας φόρων, παρέχει μια πεζή περιγραφή των πεδίων προς ολοκλήρωση, δεδομένα προς παροχή κ.λπ.. Επιπλέον, ένα συγχρονισμένο εναλλακτικό μέσο παρέχει εκφωνημένες οδηγίες, με βίντεο ενός ατόμου που ολοκληρώνει την ενότητα που εξετάζεται στον ήχο. Αν και αμφότερες οι εκδόσεις παρέχονται στη σελίδα, η έκδοση συγχρονισμένου μέσου παρέχεται αλλού στη σελίδα και δεν φέρει σαφή ετικέτα με το μέρος του κειμένου το οποίο αντικαθιστά. Αυτό καθιστά δύσκολο για τους χρήστες που αντιμετωπίζουν το κείμενο, να το εντοπίσουν και χρήστες που συναντούν το βίντεο δεν γνωρίζουν πού βρίσκεται το εναλλακτικό κειμένου του.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε σελίδες που παρέχουν εναλλακτικές συγχρονισμένων μέσων για το κείμενο.
Ελέγξτε ότι τα συγχρονισμένα μέσα φέρουν σαφείς ετικέτες με το κείμενο για το οποίο είναι εναλλακτική.
Εάν ο έλεγχος #2 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτά τα κριτήρια επιτυχίας.
Κάθε τεχνολογία.
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της αποτυχίας είναι να αποφευχθούν περιπτώσεις στις οποίες συγχρονισμένα εναλλακτικά μέσα παρέχουν περισσότερες πληροφορίες από το κείμενο για το οποίο είναι εναλλακτικές, αλλά δεν παρέχουν τα δικά τους εναλλακτικά κειμένου για παροχή πρόσβασης στις πρόσθετες πληροφορίες. Τα συγχρονισμένα εναλλακτικά μέσα παρέχουν βελτιωμένη πρόσβαση σε χρήστες για τους οποίους τα συγχρονισμένα μέσα αποτελούν μια περισσότερο αποτελεσματική μορφή από το κείμενο. Καθώς είναι εναλλακτικές κειμένου, δεν χρειάζεται να έχουν τα ίδια εφεδρικά εναλλακτικά κειμένου στη μορφή επεξηγήσεων, ηχητικών περιγραφών ή εναλλακτικών πλήρους κειμένου. Ωστόσο, εάν παρέχουν περισσότερες πληροφορίες από το κείμενο για το οποίο είναι εναλλακτικές, τότε είναι περισσότερο από απλά εναλλακτικές, αλλά περιεχόμενο συγχρονισμένων μέσων. Σε αυτήν την περίπτωση υπόκεινται στις πλήρεις απαιτήσεις του κριτηρίου επιτυχίας 1.2.2 (Success Criterion 1.2.2) για την παροχή επεξηγήσεων και στα κριτήρια επιτυχίας 1.2.2 (Success Criterion 1.2.2) και 1.2.3.
(καμία δεν εμπεριέχεται στη λίστα)
Ελέγξτε για επεξηγήσεις σε εναλλακτικές συγχρονισμένων μέσων.
Ελέγξτε ότι η εναλλακτική συγχρονισμένων μέσων δεν παρέχει περισσότερες πληροφορίες από όσες παρουσιάζονται σε αυτή στη σελίδα σε κείμενο.
Σημείωση: Οι εναλλακτικές συγχρονισμένων μέσων χρησιμοποιούν συχνά διαφορετικές λέξεις για να παρουσιάσουν τι βρίσκεται στη σελίδα, αλλά δεν θα παρουσιάζουν νέες πληροφορίες σχετικές με το θέμα της σελίδας.
Εάν ο έλεγχος #2 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτά τα κριτήρια επιτυχίας.
Εφαρμόζεται σε όλες τις τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Χωρίς προηγούμενες οδηγίες, μη αναμενόμενη αλλαγή περιβάλλοντος λόγω αλλαγής της ρύθμισης διεπαφής χρήστη μπορεί ορισμένες φορές να προκαλέσει σύγχυση στους χρήστες. Οι χρήστες πρέπει να λάβουν οδηγίες πριν από τέτοιες περιπτώσεις. Η παροχή των οδηγιών με τρόπο που ο χρήστης μπορεί να μην έχει τη δυνατότητα να αναθεωρήσει, ενδέχεται να επιτρέψει τη δημιουργία σύγχυσης.
Παραδείγματα αποτυχίας:
Μη παροχή οδηγιών στην Ιστοσελίδα που προηγούνται του στοιχείου διεπαφής χρήστη, η οποία προκαλεί αλλαγή του περιβάλλοντος μέσω αλλαγής της ρύθμισης.
Μη παροχή οδηγιών σε ένα μέρος της διαδικασίας πριν το βήμα όπου ενδέχεται να συναντήσουν τέτοια αλλαγή στο περιβάλλον, σε περίπτωση μιας διαδικασίας πολλαπλών βημάτων όπου χρήστες πρέπει να συμπληρώνουν συγκεκριμένα βήματα προκειμένου να προσεγγίσουν το στοιχείο διεπαφής χρήστη, όπου η αλλαγή μιας ρύθμισης θα προκαλέσει αλλαγή περιβάλλοντος.
Μη παροχή απαραίτητων οδηγιών σχετικά με την αλλαγή περιβάλλοντος στην περίπτωση εφαρμογής ενδοδικτύου Ιστού.
Εντοπίστε εμφάνιση αλλαγής περιβάλλοντος λόγω αλλαγής ρύθμισης διεπαφής χρήστη
Εντοπίστε εκπαιδευτικό υλικό που όλοι οι χρήστες πρέπει να αναθεωρήσουν πριν αντιμετωπίσουν την αλλαγή του περιβάλλοντος.
Εάν ο #1 είναι αληθής και ο #2 ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Κάθε γλώσσα επισημείωσης που βασίζεται σε XML, συμπεριλαμβανομένων των HTML 4.01 και XHTML 1.x.
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει μια συνθήκη αποτυχίας όπου σφάλματα διπλότυπων αναγνωριστικών είναι γνωστό ότι προκαλούν προβλήματα σε υποστηρικτικές τεχνολογίες όταν επιχειρούν να αλληλεπιδράσουν με περιεχόμενο. Οι διπλότυπες τιμές τύπου ID μπορεί να είναι προβληματικές για πράκτορες χρήστη που βασίζονται σε αυτήν την παράμετρο για να μεταφέρουν με ακρίβεια σχέσεις μεταξύ διαφορετικών μερών περιεχομένου σε χρήστες. Για παράδειγμα, ένα πρόγραμμα ανάγνωσης οθόνης μπορεί να χρησιμοποιήσει τιμές ID για τον προσδιορισμό του ισχύοντος περιεχομένου κεφαλίδας για ένα κελί δεδομένων εντός ενός πίνακα δεδομένων ή ενός στοιχείου ελέγχου εισαγωγής δεδομένων για το οποίο ισχύει μια δεδομένη ετικέτα. Εάν αυτές οι τιμές δεν είναι μοναδικές, το πρόγραμμα ανάγνωσης οθόνης δεν θα μπορεί να ορίσει μέσω προγραμματισμού ποιες κεφαλίδες σχετίζονται με το κελί δεδομένων ή ποιο στοιχείο ελέγχου σχετίζεται με ποια ετικέτα ή όνομα.
Ο έλεγχος ότι οι τιμές της παραμέτρου id είναι μοναδικές εντός ενός εγγράφου επιτυγχάνεται με την επικύρωση του εγγράφου σε σχέση με το σχήμα του, διότι το σχήμα καθορίζει ποιες παράμετροι περιέχουν αναγνωριστικά μοναδικά σε όλη την έκταση του εγγράφου.
Σημείωση 1:Στις περισσότερες γλώσσες επισημείωσης, οι τιμές ID είναι τιμές παραμέτρων, για παράδειγμα στην HTML και XHTML.
Σημείωση 2:Έγγραφα XML που χρησιμοποιούν μόνο την παράμετρο xml:id
ως παράμετρο ID, αναλύοντας το έγγραφο XML με μια λειτουργία ανάλυσης επικύρωσης που υποστηρίζει το xml:id specification, είναι αρκετό.
Ένας συγγραφέας χρησιμοποιεί μια ηλεκτρονική υπηρεσία επικύρωσης για να ελέγχει ότι όλες οι τιμές παραμέτρου id είναι μοναδικές.
Ένας προγραμματιστής χρησιμοποιεί χαρακτηριστικά στο εργαλείο συγγραφής του που διασφαλίζει ότι οι τιμές παραμέτρου id είναι μοναδικές.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
"xml:id έκδοση 1.0" (xml:id Version 1.0" - Σύσταση W3C, 9 Σεπτεμβρίου 2005.
Επεκτάσιμη γλώσσα επισημείωσης (XML) 1.0 (Τέταρτη έκδοση): "Περιορισμός εγκυρότητας: ID" (Validity constraint: ID)
HTML 4.01: παράμετρος id (id attribute)
Ελέγξτε ότι όλες οι τιμές του τύπου ID είναι μοναδικές στην Ιστοσελίδα
Εάν το βήμα #1 είναι ψευδές, τότε αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Κάθε τεχνολογία
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει μια συνθήκη αποτυχίας που προκύπτει όταν απενεργοποιηθεί η προεπιλεγμένη οπτική ένδειξη της σήμανσης πληκτρολογίου του πράκτορα χρήστη ή καταστεί μη ορατή από άλλο στυλ της σελίδας, χωρίς παροχή ενός οπτικού ενδείκτη σήμανσης που παρέχεται από τον συγγραφέα. Η απενεργοποίηση του ενδείκτη σήμανσης καθοδηγεί τον πράκτορα χρήστη ώστε να μην παρουσιάσει τον ενδείκτη σήμανσης. Άλλο στυλ μπορεί να καταστήσει δύσκολη την εμφάνιση του ενδείκτη σήμανσης, ακόμα και εάν υπάρχει, όπως διαρθρώσεις που έχουν ίδια εμφάνιση με τη διάρθρωση σήμανσης ή παχιά περιγράμματα που έχουν ίδιο χρώμα με τον ενδείκτη σήμανσης ώστε να μην είναι δυνατή η εμφάνιση έναντι αυτών.
Το παρακάτω παράδειγμα CSS θα καταργήσει τον προεπιλεγμένο ενδείκτη σήμανσης και θα αποτύχει η απαίτηση παροχής ορατού ενδείκτη σήμανσης.
Παράδειγμα κώδικα:
:focus {outline: none}
Το παρακάτω παράδειγμα CSS θα δημιουργήσει μια διάρθρωση γύρω από συνδέσμους που έχουν όμοια εμφάνιση με τον ενδείκτη σήμανσης. Αυτό καθιστά εφικτό για χρήστες να προσδιορίσουν ποιος έχει στην ουσία τη σήμανση, ακόμα και όταν ο πράκτορας χρήστη δεν προσελκύει τον ενδείκτη σήμανσης.
Παράδειγμα κώδικα:
a {outline: thin dotted black}
Το παρακάτω παράδειγμα CSS δημιουργεί ένα περίγραμμα γύρω από συνδέσμους που δεν έχουν αρκετή αντίθεση ώστε να είναι ορατός ο ενδείκτης σήμανσης όταν σχεδιάζονται επάνω σε αυτόν. Σε αυτήν την περίπτωση, ο ενδείκτης σήμανσης σχεδιάζεται εκτός του περιγράμματος, αλλά καθώς αμφότεροι είναι μαύροι και το περίγραμμα πιο παχύ από τον ενδείκτη σήμανσης, δεν ικανοποιεί πλέον τον ορισμό "ορατό".
Παράδειγμα κώδικα:
a {border: medium solid black}
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
Ορίστε τη σήμανση σε όλα τα στοιχεία με δυνατότητα σήμανσης σε μια σελίδα.
Ελέγξτε ότι είναι ορατός ο ενδείκτης σήμανσης.
Το #2 είναι αληθές.
Όλες οι τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Εάν ένα συστατικό στοιχείο διεπαφής χρήστη έχει σήμανση, είναι ιδιαίτερα σημαντικό για την κατάστασή του. Πολλοί τύποι υποστηρικτικής τεχνολογίας βασίζονται στην παρακολούθηση της τρέχουσας σήμανσης πληκτρολογίου. Τα προγράμματα ανάγνωσης οθόνης θα μεταφέρουν το σημείο ενδιαφέροντος του χρήστη στο επισημασμένο συστατικό στοιχείο διεπαφής χρήστη και οι μεγεθυντές οθόνης θα αλλάξουν την εμφάνιση του περιεχομένου ώστε το επισημασμένο συστατικό στοιχείο να είναι ορατό. Εάν δεν ενημερωθεί υποστηρικτική τεχνολογία όταν η σήμανση μεταφερθεί σε ένα νέο συστατικό στοιχείο, ο χρήστης θα μπερδευτεί όταν επιχειρήσει να αλληλεπιδράσει με το λάθος συστατικό στοιχείο.
Ενώ οι πράκτορες χρήστη διαχειρίζονται συνήθως τις λειτουργίες τυπικών στοιχείων ελέγχου, συστατικά στοιχεία διεπαφής χρήστη προσαρμοσμένου αρχείου εντολών, είναι υπεύθυνα για τη χρήση API προσβασιμότητας ώστε να είναι διαθέσιμες πληροφορίες σήμανσης και ειδοποιήσεις.
Ένα προσαρμοσμένο μενού εμφανίζει στοιχεία μενού αποδίδοντας ρητά αυτά, με χειρισμό συμβάντων ποντικιού και πλήκτρων απευθείας και επισήμανση του τρέχοντος επιλεγμένου στοιχείου μενού. Ο προγραμματιστής δεν εκθέτει το στοιχείο μενού που έχει επισημανθεί μέσω του API προσβασιμότητας, ώστε η υποστηρικτική τεχνολογία να μπορεί μόνο να προσδιορίσει ότι η σήμανση είναι αλλού εντός του μενού και να μην μπορεί να προσδιορίσει ποιο στοιχείο μενού έχει επισημανθεί.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Χρησιμοποιώντας τη λειτουργία ελέγχου προσβασιμότητας για την τεχνολογία (ή εάν δεν είναι διαθέσιμη, ελέγξτε τον κώδικα ή εκτελέστε δοκιμή με υποστηρικτική τεχνολογία), ελέγξτε τα στοιχεία ελέγχου για να δείτε εάν εκθέτουν την κατάσταση σήμανσης μέσω του API προσβασιμότητας.
Χρησιμοποιώντας τη λειτουργία ελέγχου προσβασιμότητας για την τεχνολογία (ή εάν δεν είναι διαθέσιμη, ελέγξτε τον κώδικα ή εκτελέστε δοκιμή με υποστηρικτική τεχνολογία), ελέγξτε εάν ενημερώνεται υποστηρικτική τεχνολογία όταν η σήμανση μετακινείται από ένα στοιχείο ελέγχου, σε ένα άλλο.
Εάν ο έλεγχος #1 ή ο έλεγχος #2 είναι ψευδής, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση αυτού του κριτηρίου επιτυχίας.
HTML, XHTML και CSS
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της συνθήκης αποτυχίας είναι να περιγραφεί ένα πρόβλημα που προκύπτει όταν η αλλαγή του μεγέθους κειμένου δεν προκαλεί αντίστοιχη αλλαγή μεγέθους των στοιχείων ελέγχου φόρμας που βασίζονται σε κείμενο. Αυτό σημαίνει ότι ο χρήστης ενδέχεται να αντιμετωπίσει δυσκολίες κατά την εισαγωγή κειμένου και να μην είναι σε θέση να διαβάσει ό,τι έχει εισάγει, καθώς το κείμενο δεν εμφανίζεται στο απαραίτητο από τον χρήστη μέγεθος κειμένου.
Τα στοιχεία ελέγχου φόρμας βάσει κειμένου περιλαμβάνουν πλαίσια εισαγωγής δεδομένων (κείμενο και περιοχή κειμένου), καθώς και κουμπιά.
Μία φόρμα "Επικοινωνία μαζί μας" διαθέτει ορισμένες εισαγωγικές πληροφορίες και στοιχεία ελέγχου φόρμας για χρήστες που εισάγουν το όνομά τους, το επώνυμό τους, έναν αριθμό τηλεφώνου και διεύθυνση ηλεκτρονικού ταχυδρομείου. Η επικεφαλίδα, το εισαγωγικό κείμενο και οι ετικέτες στοιχείου ελέγχου φόρμας έχουν υλοποιηθεί με έναν κλιμακωτό τρόπο, αλλά όχι τα ίδια τα στοιχεία ελέγχου φόρμας.
Το συστατικό στοιχείο XHTML:
Παράδειγμα κώδικα:
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />
Το συστατικό στοιχείο CSS:
Παράδειγμα κώδικα:
h1 { font-size: 2em; }
p, label { font-size: 1em; }
input {font-size: 12pt}
Δεν υπάρχουν διαθέσιμοι πόροι για την τεχνική αυτή.
(καμία δεν εμπεριέχεται στη λίστα)
Καταχωρήστε κείμενο σε στοιχεία ελέγχου φόρμας βάσει κειμένου, τα οποία λαμβάνουν κείμενο από τον χρήστη.
Αυξήστε το μέγεθος κειμένου του περιεχομένου κατά 200%.
Ελέγξτε ότι το κείμενο στα στοιχεία ελέγχου φόρμας βάσει κειμένου αυξάνεται κατά 200%.
Εάν ο έλεγχος #3 είναι ψευδής, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτά τα κριτήρια επιτυχίας.
Όλες οι τεχνολογίες
Αυτή η αποτυχία σχετίζεται με:
Σκοπός αυτής της τεχνικής είναι η περιγραφή της αποτυχίας που προκύπτει όταν ένα απαραίτητο πεδίο ή ένα πεδίο σφάλματος επισημαίνεται με διαφορές χρώματος μόνο, χωρίς εναλλακτικό τρόπο προσδιορισμού του απαραίτητου πεδίου ή πεδίου σφάλματος. Αυτό μπορεί να προκαλέσει προβλήματα για άτομα με τύφλωση ή αχρωματοψία, καθώς ενδέχεται να μην είναι σε θέση να αντιληφθούν τις διαφορές χρώματος που υποδεικνύουν ποιο είναι το απαραίτητο πεδίο ή ποιο πεδίο προκαλεί ένα σφάλμα.
Ένας χρήστης συμπληρώνει μια ηλεκτρονική φόρμα και απαιτείται το πεδίο αριθμού τηλεφώνου. Για να υποδειχθεί ότι απαιτείται το πεδίο αριθμού τηλεφώνου, η ετικέτα "Αριθμός τηλεφώνου" εμφανίζεται μόνο σε μπλε κείμενο, χωρίς οποιαδήποτε άλλη ένδειξη ότι το πεδίο "Αριθμός τηλεφώνου" είναι απαραίτητο. Ένας χρήστης με τύφλωση ή αχρωματοψία δεν είναι σε θέση να προσδιορίσει ότι το πεδίο "Αριθμός τηλεφώνου" είναι απαραίτητο.
Ένας χρήστης υποβάλλει μια ηλεκτρονική φόρμα και αφήνει κενό ένα απαραίτητο πεδίο, με αποτέλεσμα ένα σφάλμα. Το πεδίο φόρμας που προκάλεσε το σφάλμα υποδεικνύεται μόνο από κόκκινο κείμενο, χωρίς πρόσθετη μη χρωματική ένδειξη ότι το πεδίο προκάλεσε ένα σφάλμα.
Για όλα τα απαραίτητα πεδία ή πεδία σφάλματος στην Ιστοσελίδα που προσδιορίζονται χρησιμοποιώντας διαφορές χρώματος:
Ελέγξτε ότι παρέχεται ένας μη χρωματικός τρόπος προσδιορισμού του απαραίτητου πεδίου ή του πεδίου σφάλματος.
Εάν το βήμα #1 είναι ψευδές, τότε αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.
Κάθε τεχνολογία
Αυτή η αποτυχία σχετίζεται με:
Αυτή η αποτυχία διασφαλίζει ότι άτομα με προβλήματα όρασης ή νοητικές αναπηρίες θα αναγνωρίσουν πεδία αριθμών τηλεφώνου και θα κατανοούν ποιες πληροφορίες πρέπει να παρέχουν για να συμπληρωθούν τα πεδία. Οι αριθμοί τηλεφώνου έχουν συχνά μορφοποίηση σταθερού, διακριτού τρόπου και οι συγγραφείς ενδέχεται να θεωρούν ότι απλώς παρέχοντας οπτική μορφοποίηση των πεδίων θα αρκεί για τον προσδιορισμό αυτών. Ωστόσο, ακόμα και αν όλα τα πεδία έχουν ονόματα που ορίζονται μέσω προγραμματισμού, μια ετικέτα κειμένου πρέπει επίσης να προσδιορίζει το σύνολο πεδίων ως αριθμό τηλεφώνου.
Στις Ηνωμένες Πολιτείες, οι αριθμοί τηλεφώνου χωρίζονται σε έναν κωδικό περιοχής τριών ψηφίων, ένα πρόθεμα τριών ψηφίων και μια επέκταση τεσσάρων ψηφίων. Μια Ιστοσελίδα δημιουργεί πεδία εισαγωγής κειμένου σταθερού μήκους για τα τρία μέρη του αριθμού τηλεφώνου, περιβάλλοντας το πρώτο πεδίο με παρενθέσεις και χωρίζοντας το δεύτερο και τρίτο πεδίο με μια παύλα. Λόγω αυτής της μορφοποίησης, ορισμένοι χρήστες αναγνωρίζουν τα πεδία ως έναν αριθμό τηλεφώνου. Ωστόσο, δεν υπάρχει ετικέτα κειμένου για τον αριθμό τηλεφώνου στην Ιστοσελίδα. Αυτό συμβαίνει γιατί η ετικέτα για κάθε πεδίο θα είναι το πλησιέστερο κείμενο που προηγείται, ώστε τα τρία πεδία να έχουν ετικέτες "(", ")" και "-" αντίστοιχα.
Για κάθε σύνολο πεδίων αριθμού τηλεφώνου στην ιστοσελίδα που αναπαριστά έναν μοναδικό αριθμό τηλεφώνου, ελέγξτε ότι το σύνολο των πεδίων φέρει ετικέτες με μια ετικέτα ορατού κειμένου που τοποθετείται κοντά στο σύνολο πεδίων αριθμού τηλεφώνου.
Για κάθε σύνολο πεδίων αριθμού τηλεφώνου στην Ιστοσελίδα που αναπαριστάνει έναν μεμονωμένο αριθμό τηλεφώνου, παρέχονται οδηγίες για τον τρόπο συμπλήρωσης των πεδίων.
Εάν ο έλεγχος #1 και ο έλεγχος 2 είναι ψευδείς, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Κάθε τεχνολογία
Αυτή η αποτυχία σχετίζεται με:
Αυτή η αποτυχία προκύπτει όταν άτομα χαμηλής όρασης δεν μπορούν να διαβάσουν κείμενο που εμφανίζεται επάνω σε μια εικόνα παρασκηνίου. Όταν δεν υπάρχει επαρκής αντίθεση μεταξύ της εικόνας παρασκηνίου και του κειμένου, χαρακτηριστικά της εικόνας παρασκηνίου μπορεί να συγχέονται με το κείμενο, καθιστώντας δύσκολη την ακριβή ανάγνωση του κειμένου.
Για την ικανοποίηση του κριτηρίου επιτυχίας 1.4.3 και 1.4.6, πρέπει να υπάρχει επαρκής αντίθεση μεταξύ του κειμένου και του παρασκηνίου του. Για εικόνες, αυτό σημαίνει ότι θα χρειάζεται να υπάρχει επαρκής αντίθεση μεταξύ του κειμένου και των τμημάτων της εικόνας που είναι περισσότερο όπως το κείμενο και πίσω από το κείμενο.
Το μαύρο κείμενο επικαλύπτει μια εικόνα με μαύρες γραμμές. Οι γραμμές διαγράφονται πίσω από τα γράμματα και το γράμμα F μοιάζει με το E κ.ο.κ..
Το μαύρο κείμενο επικαλύπτει μια εικόνα με σκοτεινές γκρίζες περιοχές. Όποτε το κείμενο διαγράφει μια σκοτεινή γκρίζα περιοχή, η αντίθεση είναι τόσο ακατάλληλη ώστε το κείμενο δεν μπορεί να διαβαστεί.
Γρήγορος έλεγχος: Πραγματοποιήστε πρώτα έναν γρήγορο έλεγχο για να δείτε εάν η αντίθεση μεταξύ του κειμένου και της περιοχής της εικόνας, πιο σκοτεινή (για σκοτεινό κείμενο) ή πιο φωτεινή (για φωτεινό κείμενο), ικανοποιεί ή όχι την απαίτηση του κριτηρίου επιτυχίας (1.4.3 ή 1.4.5). Εάν η αντίθεση ικανοποιεί ή υπερβαίνει την καθορισμένη αντίθεση, τότε δεν υπάρχει αποτυχία.
Εάν ο γρήγορος έλεγχος είναι ψευδής, τότε ελέγξτε να δείτε εάν το παρασκήνιο πίσω από κάθε γράμμα έχει επαρκή αντίθεση με το γράμμα.
Εάν ο γρήγορος έλεγχος είναι ψευδής και ο #2 είναι ψευδής επίσης, τότε αυτή η συνθήκη αποτυχίας ισχύει και το περιεχόμενο αποτυγχάνει το κριτήριο επιτυχίας αντίθεσης.
HTML και XHTML
Αυτή η αποτυχία σχετίζεται με:
Αυτή η αποτυχία περιγράφει μια κοινή συνθήκη όπου σύνδεσμοι όπως "κάντε κλικ εδώ" ή "περισσότερα", χρησιμοποιούνται ως στοιχεία anchor όπου χρειάζεται να έχετε το περιβάλλον κείμενο για να κατανοήσετε τον σκοπό τους και όπου δεν υπάρχει μηχανισμός να καταστήσει τον προορισμό σαφή, όπως ένα κουμπί για επέκταση του κειμένου συνδέσμου.
Πολλά άτομα με τύφλωση που χρησιμοποιούν προγράμματα ανάγνωσης οθόνης, καλούν ένα πλαίσιο διαλόγου που έχει μια λίστα συνδέσμων από τη σελίδα. Χρησιμοποιούν αυτήν τη λίστα συνδέσμων για να αποφασίσουν πού θα μεταβούν. Αλλά εάν πολλοί από τους συνδέσμους της λίστας αυτής απλά αναγράφουν "κάντε κλικ εδώ" ή "περισσότερα", θα είναι αδύνατη η χρήση αυτού του χαρακτηριστικού στο πρόγραμμα ανάγνωσης οθόνης τους, το οποίο είναι μια βασική στρατηγική πλοήγησης. Για αυτόν τον λόγο είναι μια αποτυχία του 2.4.9 η μη παροχή οποιουδήποτε τρόπου που θα τους επιτρέπει να γνωρίζουν τον προορισμό μόνο από το κείμενο συνδέσμου. Ισχύει επίσης για άτομα που μετακινούνται με το πλήκτρο tab μεταξύ συνδέσμων. Εάν το μόνο που ακούνε κατά τη μετακίνησή τους στο έγγραφο με το πλήκτρο tab είναι "κάντε κλικ εδώ, κάντε κλικ εδώ, κάντε κλικ εδώ κ.λπ.", θα μπερδευτούν.
Παράδειγμα κώδικα:
<a href="file110.htm">Click here</a> for more information on the Rocky Mountains.
Παράδειγμα κώδικα:
<h2>News headlines</h2>
The middle east peace meetings have yielded fruitful dialogue.
<a href="r4300.htm">read more</a>
Εξετάστε κάθε σύνδεσμο στη σελίδα.
Ελέγξτε να δείτε εάν έχει μη περιγραφικό κείμενο συνδέσμου, όπως "κάντε κλικ εδώ" ή "περισσότερα", ο σκοπός του οποίου μπορεί να προσδιοριστεί από το περιβάλλον κείμενο, αλλά όχι μόνο από το κείμενο συνδέσμου.
Ελέγξτε να δείτε εάν υπάρχει ένας μηχανισμός στη σελίδα που μετατρέπει όλους τους μη περιγραφικούς συνδέσμους της σελίδας σε περιγραφικούς συνδέσμους.
Εάν το βήμα #2 είναι αληθές ΚΑΙ το #3 είναι ψευδές, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί το κριτήριο επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει τη συνθήκη αποτυχίας που προκαλείται όταν μια Ιστοσελίδα ανοίγει ένα συστατικό στοιχείο διεπαφής παραθύρου ή μενού, ενσωματωμένο στη σελίδα με τρόπο που καθιστά δύσκολο για έναν χρήστη πληκτρολογίου να λειτουργήσει λόγω της θέση τους στη διαδοχική σειρά πλοήγησης. Όταν ο χρήστης ανοίξει το παράθυρο ή μενού που είναι ενσωματωμένο στη σελίδα, ενεργοποιώντας ένα κουμπί ή σύνδεσμο, η επόμενη ενέργειά του θα είναι να αλληλεπιδράσει με το παράθυρο ή το μενού. Εάν το παράθυρο ή το μενού δεν είναι παρακείμενα του στοιχείου ελέγχου ενεργοποίησης στη διαδοχική σειρά πλοήγησης, θα είναι δύσκολο για τον χρήστη πληκτρολογίου να λειτουργήσει το παράθυρο ή μενού.
Όταν ένα μενού ή παράθυρο DHTML ενεργοποιείται, δημιουργείται δυναμικά, τοποθετείται οπτικά κοντά στο στοιχείο ενεργοποίησης και προστίθεται στο τέλος του DOM. Καθώς προστίθεται στο τέλος του DOM, βρίσκεται στο τέλος της διαδοχικής σειράς πλοήγησης. Ο χρήστης πρέπει να μετακινηθεί με το πλήκτρο tab στην υπόλοιπη Ιστοσελίδα, πριν να μπορεί να αλληλεπιδράσει με το παράθυρο ή το μενού.
Όταν ένα μενού DHTML απορρίπτεται, καταργείται ή αποκρύπτεται από την Ιστοσελίδα και η σήμανση ορίζεται στο έγγραφο. Ο χρήστης πρέπει να μετακινηθεί με το πλήκτρο tab από την αρχή της ακολουθίας πλοήγησης για να προσεγγίσει το σημείο από το οποίο άνοιξε το μενού.
Για κάθε μενού ή παράθυρο που είναι ενσωματωμένο σε μια Ιστοσελίδα που άνοιξε μέσω ενός στοιχείου ελέγχου ενεργοποίησης:
Ενεργοποιήστε το στοιχείο ελέγχου ενεργοποίησης μέσω του πληκτρολογίου.
Ελέγξτε εάν η σήμανση βρίσκεται στο μενού ή στο παράθυρο.
Ελέγξτε εάν η προώθηση της σήμανσης στη διαδοχική σειρά πλοήγησης θέτει τη σήμανση στο μενού ή το παράθυρο.
Απορρίψτε το μενού ή το παράθυρο.
Ελέγξτε εάν η σήμανση βρίσκεται στο στοιχείο ελέγχου ενεργοποίησης.
Ελέγξτε εάν η οπισθοδρόμηση της σήμανσης στη διαδοχική σειρά πλοήγησης θέτει τη σήμανση στο στοιχείο ελέγχου ενεργοποίησης.
Εάν αμφότερα τα βήματα 1α και 1β είναι ψευδή, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Εάν αμφότερα τα βήματα 2α και 2β είναι ψευδή, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Γενικά
Αυτή η αποτυχία σχετίζεται με:
Αυτό περιγράφει μια συνθήκη αποτυχίας του κριτηρίου επιτυχίας 4.1.2, όπου ορισμένα ή όλα τα τμήματα ενός πεδίο φόρμας πολλαπλών τμημάτων δεν έχουν ονόματα. Συχνά υπάρχει μια ετικέτα για το πεδίο πολλαπλών τμημάτων, η οποία είτε συσχετίζεται μέσω προγραμματισμού με το πρώτο τμήμα ή δεν συσχετίζεται μέσω προγραμματισμού με οποιαδήποτε τμήματα.
Σημείωση: Ένα όνομα δεν χρειάζεται απαραιτήτως να είναι ορατό, αλλά είναι ορατό σε υποστηρικτικές τεχνολογίες.
Ένας αριθμός τηλεφώνου στις Η.Π.Α. συνίσταται από έναν κωδικό περιοχής 3-ψηφίων, ένα πρόθεμα 3-ψηφίων και ένα επίθημα 4-ψηφίων. Έχουν τυπικά την εξής μορφοποίηση ([κωδικός περιοχής]) [πρόθεμα]-[επίθημα], όπως στο (206) 555-1212. Συχνά, φόρμες που αιτούνται έναν αριθμό τηλεφώνου θα περιλαμβάνουν 3 ξεχωριστά πεδία, αλλά με μία μεμονωμένη ετικέτα, όπως:
Παράδειγμα κώδικα:
Phone number:
(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">
Η αποτυχία προκύπτει όταν δεν υπάρχει όνομα για καθένα από τα 3 πεδία στο API προσβασιμότητας. Ένας χρήστης υποστηρικτικής τεχνολογίας θα αντιμετωπίσει αυτά ως τρία μη ορισμένα πεδία κειμένου. Ορισμένες υποστηρικτικές τεχνολογίες θα διαβάζουν τη στίξη ως αναγνωριστικό για πεδία κειμένου, το οποίο μπορεί να προκαλέσει ακόμα περισσότερη σύγχυση. Στην περίπτωση ενός αριθμού τηλεφώνου 3-πεδίων στις Η.Π.Α., ορισμένες υποστηρικτικές τεχνολογίες θα ονομάσουν τα πεδία "(", ")" και "-", το οποίο δεν είναι ιδιαίτερα χρήσιμο.
Ο ίδιος αριθμός τηλεφώνου στις Η.Π.Α.. Σε αυτήν την περίπτωση, η ετικέτα δεν συσχετίζεται μέσω προγραμματισμού με οποιαδήποτε από τα τμήματα. Αριθμός τηλεφώνου:
Παράδειγμα κώδικα:
(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">
Ένας χρήστης υποστηρικτικής τεχνολογίας θα αντιμετωπίσει αυτά ως τρία μη ορισμένα πεδία κειμένου.
Ο ίδιος αριθμός τηλεφώνου στις Η.Π.Α.. Σε αυτήν την περίπτωση, η ετικέτα συσχετίζεται μέσω προγραμματισμού με το πρώτο τμήμα.
Παράδειγμα κώδικα:
<label for="area">Phone number:</label>
(<input id="area" type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">
Ένας χρήστης υποστηρικτικής τεχνολογίας θα οδηγηθεί να πιστέψει ότι το πρώτο πεδίο είναι ολόκληρος ο αριθμός τηλεφώνου και θα αντιμετωπίσει τα δεύτερα και τρίτα πεδία ως μη ορισμένα πεδία κειμένου.
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Microsoft Active Accessibility 2.0 SDK. Περιλαμβάνει το Inspect32.exe και άλλα εργαλεία MSAA.
Τεκμηρίωση συλλογής εργαλείων προσβασιμότητας Gnome (Gnome Accessibility Toolkit documentation)
Τεκμηρίωση και εργαλεία QA προσβασιμότητας Gnome (Gnome Accessibility QA documentation and tools)
Microsoft Internet Explorer Developer Toolbar. Επιτρέπει τον έλεγχο DOM που δημιουργείται από αρχείο εντολών στο Microsoft Internet Explorer.
Firebug. Επιτρέπει τον έλεγχο DOM, που παράγεται από αρχείο εντολών, στο Firefox.
Γενική διαδικασία:
Εγκαταστήστε ένα εργαλείο που σας επιτρέπει να δείτε το API προσβασιμότητας για την πλατφόρμας σας (δείτε την ενότητα "Πόροι")
Εντοπίστε κάθε στοιχείο ελέγχου φόρμας
Ελέγξτε ότι η ιδιότητα name για κάθε στοιχείο ελέγχου είναι συμπληρωμένη
Εναλλακτική διαδικασία για HTML και XHTML:
Εντοπίστε κάθε στοιχείο input
, select
και textarea
στην πηγή HTML
Ελέγξτε ότι υπάρχει μία παράμετρος title στο στοιχείο
Ελέγξτε ότι υπάρχει ένα συσχετισμένο στοιχείο label
Γενική διαδικασία:
Εάν ο έλεγχος #3 είναι ψευδής, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Εναλλακτική διαδικασία για HTML και XHTML:
Εάν οι έλεγχοι #2 και #3 είναι ψευδείς, τότε ισχύει η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί το κριτήριο επιτυχίας.
Όλες οι τεχνολογίες που υποστηρίζουν CSS.
Αυτή η αποτυχία σχετίζεται με:
Τα :before
και :after
δεν υποστηρίζονται από το IE7 και παλαιότερες εκδόσεις
Τα ψευδο-στοιχεία CSS :before
και :after
καθορίζουν τη θέση του περιεχομένου πριν και μετά από ένα περιεχόμενο δένδρου εγγράφου στοιχείου. Η ιδιότητα content
, σε συνδυασμό με αυτά τα ψευδο-στοιχεία, ορίζει τι εισάγεται. Για χρήστες που χρειάζεται να προσαρμόσουν ή απενεργοποιήσουν πληροφορίες στυλ προκειμένου να προβάλλουν το περιεχόμενο σύμφωνα με τις ανάγκες τους, οι υποστηρικτικές τεχνολογίες ενδέχεται να μην είναι σε θέση να αποκτήσουν πρόσβαση στις πληροφορίες που εισάγονται μέσω CSS. Επομένως, είναι μια αποτυχία η χρήση αυτών των ιδιοτήτων για την εισαγωγή μη διακοσμητικού περιεχομένου.
Στο παρακάτω παράδειγμα, τα :before
και :after
χρησιμοποιούνται για να υποδείξουν αλλαγές ομιλητή και να εισάγουν εισαγωγικά σε ένα σενάριο.
Το CSS περιέχει:
Παράδειγμα κώδικα:
p.jim:before { content: "Jim: " }
p.mary:before { content: "Mary: " }
q:before { content: open-quote }
q:after { content: close-quote }
Χρησιμοποιείται σε αυτό το απόσπασμα:
Παράδειγμα κώδικα:
<p class="jim">
<q>Do you think he's going to make it?</q>
</p>
<p class="mary">
<q>It's not looking good.</q>
</p>
Σε αυτό το παράδειγμα, το :before
χρησιμοποιείται για τη διαφοροποίηση γεγονότων από γνώμες.
Το CSS περιέχει:
Παράδειγμα κώδικα:
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }
Χρησιμοποιείται σε αυτό το απόσπασμα:
Παράδειγμα κώδικα:
<p class="fact">
The defendant was at the scene of the crime when it occurred.
</p>
<p class="opinion">
The defendant committed the crime.
</p>
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
CSS 2.1: Δημιουργούμενο περιεχόμενο, αυτόματη αρίθμηση και λίστες (CSS 2.1: Generated content, automatic numbering, and lists)
Εξετάστε όλο το περιεχόμενο που εισάγεται μέσω χρήσης των ψευδο-στοιχείων :before και :after και της ιδιότητας content
Επαληθεύστε ότι το περιεχόμενο είναι διακοσμητικό.
Εάν το περιεχόμενο που εισάγεται δεν είναι διακοσμητικό, ελέγξτε ότι οι πληροφορίες παρέχονται σε υποστηρικτικές τεχνολογίες και είναι επίσης διαθέσιμες όταν απενεργοποιείται το CSS.
Εάν ο έλεγχος #2 ή #3 είναι ψευδής, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί αυτό το κριτήριο επιτυχίας.
Όλες οι τεχνολογίες.
Αυτή η αποτυχία σχετίζεται με:
Πολλά άτομα με νοητικές αναπηρίες έχουν σημαντικό πρόβλημα με μπλοκ κειμένου που είναι στοιχισμένα (ευθυγράμμιση τόσο στο αριστερό, όσο και στο δεξί περιθώριο). Τα διαστήματα μεταξύ των λέξεων δημιουργούν "μεγάλα διαστήματα λευκού" που κατακλύζουν τη σελίδα, κάτι που μπορεί να καταστήσει το κείμενο δυσανάγνωστο για ορισμένα άτομα. Αυτή η αποτυχία περιγράφει περιπτώσεις όπου προκύπτει αυτή η διάταξη κειμένου που προκαλεί σύγχυση. Ο καλύτερος τρόπος αποφυγής αυτού του προβλήματος είναι να μην δημιουργηθεί διάταξη κειμένου πλήρης στοίχισης (ευθυγράμμιση στα αριστερά και δεξιά περιθώρια).
Στο παρακάτω παράδειγμα μιας αποτυχίας, η HTML παράμετρος align
χρησιμοποιείται για τη δημιουργία στοιχισμένου κειμένου.
Παράδειγμα κώδικα:
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus.
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
</p>
Σε αυτό το παράδειγμα μιας αποτυχίας, η CSS ιδιότητα text-align
χρησιμοποιείται για τη δημιουργία στοιχισμένου κειμένου.
Παράδειγμα κώδικα:
...
p {text-align: justify}
...
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus.
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>
Ανοίξτε τη σελίδα σε ένα κοινό πρόγραμμα περιήγησης.
Επαληθεύστε ότι το περιεχόμενο δεν στοιχίζεται (ευθυγράμμιση τόσο στο αριστερό, όσο και στο δεξί περιθώριο).
Εάν η διαδικασία ελέγχου #2 είναι ψευδής, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο δεν ικανοποιεί το κριτήριο επιτυχίας 1.4.8.
Περιεχόμενο που περιέχει συνδέσμους.
Αυτή η αποτυχία σχετίζεται με:
Διαφορετικές υποστηρικτικές τεχνολογίες κάνουν χρήση διαφορετικών στρατηγικών επισκευής όταν αντιμετωπίζουν συνδέσμους που δεν φέρουν εναλλακτικά κειμένου. Για HTML, ενδέχεται να χρησιμοποιήσουν την παράμετρο title
του anchor, εάν υπάρχει ή την τιμή της παραμέτρου src
του στοιχείου img
.
Αυτή η συνθήκη αποτυχίας προκύπτει όταν ένας σύνδεσμος περιέχει μόνο μη κειμενικό περιεχόμενο, όπως μια εικόνα και το μη κειμενικό περιεχόμενο έχει υλοποιηθεί με τρόπο που δεν μπορεί να αγνοηθεί από υποστηρικτική τεχνολογία. Καθώς ένας σύνδεσμος είναι ένα αλληλεπιδραστικό στοιχείο ελέγχου, ο χρήστης μπορεί να κινηθεί με το πλήκτρο tab σε αυτόν και να τον ενεργοποιήσει. Καθώς δεν υπάρχει περιεχόμενο κειμένου εντός του συνδέσμου για να χρησιμοποιηθεί ως το όνομα, η υποστηρικτική τεχνολογία χρησιμοποιεί μια ποικιλία τεχνικών επισκευής για να εντοπίσει κάποιο όνομα για χρήση για τον σύνδεσμο.
Συχνά, χρησιμοποιούνται κείμενο και εικόνες σε μια σελίδα ως σύνδεσμος με τον ίδιο στόχο. Αυτό δημιουργεί το φαινόμενο "τραυλίσματος" όταν δύο γειτονικοί σύνδεσμοι έχουν ίδιο όνομα και οι συγγραφείς επιχειρήσουν να εξαλείψουν το πλεόνασμα παρέχοντας μια παράμετρο null alt για την εικόνα. Δυστυχώς, αυτό συχνά κάνει το πρόβλημα χειρότερο. Η τεχνική Συνδυασμού παρακείμενης εικόνας και συνδέσμων κειμένου για τον ίδιο πόρο (H2: Combining adjacent image and text links for the same resource) (HTML) είναι η προτεινόμενη προσέγγιση μείωσης του αριθμού των ξεχωριστών συνδέσμων και του ανεπιθύμητου πλεονάσματος.
Ένας τόπος αναζήτησης επιστρέφει αποτελέσματα αναζήτησης που περιλαμβάνουν έναν σύνδεσμο κειμένου και έναν σύνδεσμο εικόνας για τον τόπο συμφωνίας. Η εικόνα έχει μια παράμετρο null alt
, καθώς το αποτέλεσμα ήδη περιέχει έναν σύνδεσμο με μια περιγραφή κειμένου. Ωστόσο, το πρόγραμμα ανάγνωσης οθόνης δεν αγνοεί τον σύνδεσμο εικόνας αλλά χρησιμοποιεί ευρετικές για να εντοπίσει κάποιο κείμενο που ενδεχομένως περιγράφει τον σκοπό του συνδέσμου. Για παράδειγμα, το πρόγραμμα ανάγνωσης οθόνης μπορεί να εκφωνήσει "football dot gif Football Scorecard."
Παράδειγμα κώδικα:
<a href="scores.html">
<img src="football.gif" alt="" />
</a>
<a href="scores.html">
Football Scoreboard
</a>
}
Οι πόροι προορίζονται αποκλειστικά για σκοπούς πληροφόρησης και δεν υπονοείται καμία έγκριση.
Ελέγξτε εάν ο σύνδεσμος περιέχει μόνο μη κειμενικό περιεχόμενο.
Ελέγξτε εάν το μη κειμενικό περιεχόμενο έχει υλοποιηθεί με τρόπο που μπορεί να αγνοηθεί από υποστηρικτική τεχνολογία.
Εάν όλοι οι έλεγχοι είναι αληθείς, τότε ισχύει αυτή η συνθήκη αποτυχίας και το περιεχόμενο αποτυγχάνει στην ικανοποίηση του κριτηρίου επιτυχίας.