Σημείο ελέγχου 1.3.2(b) Ακολουθία με νόημα

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

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

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

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

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

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

Το σημείο ελέγχου δηλ. το Σημείο ελέγχου 1.3.2(b) Ακολουθία με νόημα ισχύει όταν χρησιμοποιείται CSS, ειδικά για την τοποθέτηση περιεχομένου, ή όταν το περιεχόμενο εισάγεται δυναμικά.

2. Έλεγχος

2.1. Ευχρηστία χωρίς φύλλα στυλ

1. Ανοίξτε τη σελίδα στον Firefox και στο επιπρόσθετο Web Accessibility Toolbar επιλέξτε τη συνάρτηση CSS > Disable CSS.
2. Ελέγξτε εάν το περιεχόμενο στην προβολή εξακολουθεί να είναι δυνατό να χρησιμοποιηθεί χωρίς CSS. Εάν υπάρχει:
   • Προβλήματα γραμμικοποίησης (η σειρά του περιεχομένου προκαλεί σύγχυση);
   • Μπερδεύετε το περιεχόμενο που κρύβεται στην οθόνη με το CSS;
   • Επικαλύψεις περιεχομένου;
   • Πίνακες που γίνονται εντελώς μπερδεμένοι χωρίς περιγράμματα πίνακα;
   • Lightbox και άλλα στοιχεία που δεν μπορούν πλέον να χρησιμοποιηθούν ή να κατανοηθούν;
   • Μικτές πληροφορίες χρώματος σε HTML και CSS (το κείμενο δεν είναι πλέον αναγνώσιμο ή είναι δύσκολο να διαβαστεί);
   • Εξαφανίζεται μη διακοσμητικό περιεχόμενο ενσωματωμένο με τα ψευδοστοιχεία CSS :before or :after;
   • Εξαφανίζονται κενά έτσι ώστε μεμονωμένες λέξεις να γίνονται οπτικά ένα ή κείμενα που αποκλείονται από κενά που εξακολουθούν να είναι αποκλεισμένα ακόμη και χωρίς CSS;

2.2. Έλεγχος περιεχομένου που εισάγεται δυναμικά

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

1. Ανοίξτε τη σελίδα στον Firefox.

2. Προεπιλεγμένη ρύθμιση στον Firefox: Επιλέξτε Εργαλεία > Ρυθμίσεις στο μενού. Επιλέξτε την περιοχή "Για προχωρημένους", στην αριστερή καρτέλα "Γενικά", στην περιοχή "Προσβασιμότητα" επιλέξτε την επιλογή "Να επιτρέπεται η επισήμανση κειμένου με το πληκτρολόγιο". Αυτό έχει ως αποτέλεσμα η θέση του δρομέα να εμφανίζεται ως κουκούλα που αναβοσβήνει. Αυτό συνήθως αντιστοιχεί στην εστίαση του προγράμματος ανάγνωσης οθόνης.

3. Καλέστε περιεχόμενο που έχει εισαχθεί δυναμικά, για παράδειγμα εισάγοντας μια φόρμα ή ενεργοποιώντας έναν σύνδεσμο.
4. Ανοίξτε το Firebug , επιλέξτε το εικονίδιο στοιχείου (το εικονίδιο δείχνει τον κέρσορα σε ένα πλήκτρο) στα αριστερά στη γραμμή μενού Firebug και κάντε κλικ στο περιεχόμενο που έχει εισαχθεί. Ο δημιουργημένος πηγαίος κώδικας μπορεί τώρα να προβληθεί σε περιβάλλον στο παράθυρο Firebug.
5. Ελέγξτε τη θέση του εισαγόμενου στοιχείου.

   Πρώτη περίπτωση : Το περιεχόμενο που έχει εισαχθεί εμφανίζεται στον πηγαίο κώδικα κάτω από το στοιχείο ενεργοποίησης; (Δείτε την εξήγηση στην Ενότητα 3. Σημειώσεις.)

   Δεύτερη περίπτωση: Εάν τα ψευδοπαράθυρα (εδώ lightboxes) που δημιουργούνται δεν εισάγονται στον πηγαίο κώδικα αμέσως μετά το στοιχείο ενεργοποίησης. Αλλά κάπου αλλού, για παράδειγμα στο κάτω μέρος της σελίδας:

   1. Κλείσιμο του παραθύρου. Έλεγχος από το στοιχείο ενεργοποίησης υπο τη χρήση του πληκτρολογίου.
   2. Χρήστες του λογισμικού ανάγνωσης οθόνης αναγνωρίζουν ότι έχει προστεθεί νέο περιεχόμενο; Αυτό μπορεί να συμβεί με διάφορους τρόπους:
      • Η εστίαση μετακινείται μέσω της Java script στην αρχή του εισαγόμενου στοιχείου. Το σημείο εισαγωγής που αναβοσβήνει είναι ορατό στην αρχή.
      • Κείμενο συνδέσμου ή κουμπιού ή μια ιδιότητα του στοιχείου ενεργοποίησης. Για παράδειγμα, απενεργοποιημένο αλλάζει. Στη συνέχεια πληκτρολογείτε και το στοιχείο που προστέθηκε λαμβάνει την επόμενη εστίαση.
   3. Όταν το Modal window είναι κλειστό: η εστίαση επιστρέφει στο στοιχείο ενεργοποίησης;

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

Για τη γραμμικοποίηση: Η διάταξη των στοιχείων της σελίδας μπορεί να αλλάξει εάν το περιεχόμενο χρησιμοποιείται χωρίς το φύλλο στυλ που προορίζεται για εμφάνιση στην οθόνη. Χωρίς το κατάλληλο πλαίσιο, μεγάλο μέρος του περιεχομένου είναι ακατανόητο ή μπερδεμένο. Ένα παράδειγμα είναι τα περιεχόμενα των lightbox ή άλλων αναδυόμενων στοιχείων που είναι κρυμμένα από το CSS και εμφανίζονται τώρα κάπου.

Σχετικά με πληροφορίες μικτών χρωμάτων: Περιστασιακά το χρώμα των γραμματοσειρών καθορίζεται στο φύλλο στυλ, αλλά το χρώμα του φόντου καθορίζεται στο αρχείο HTML. Ενδέχεται οι γραμματοσειρές να εμφανίζονται σε φόντο του ίδιου χρώματος χωρίς το εκχωρημένο φύλλο στυλ.

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

Σχετικά με τη WAI-ARIA: Η χρήση του WAI-ARIA δεν παίζει κανένα ρόλο σε αυτό τον έλεγχο.

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

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

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

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

• Η σωστή θέση του περιεχομένου που εμφανίζεται ή εισάγεται ελέγχεται εδώ. Το εάν αυτό το περιεχόμενο έχει νόημα ελέγχεται σε άλλα σημεία ελέγχου, όπως το 3.3.1 "Προσδιορισμός σφαλμάτων" ή 2.4.4(a) "Σημαντικά κείμενα συνδέσμων".

• Τα προσαρμοσμένα στοιχεία ελέγχου, τα οποία δημιουργούν διεπαφές χρήστη από τοποθετημένα div με εικόνες φόντου, βρίσκονται ήδη σε αριθμός υφιστάμενων σημείων ελέγχου που έχουν ελεγχθεί σιωπηρά, όπως 1.4.3(c) "Ορατό περιεχόμενο με προσαρμοσμένα χρώματα", και 2.4.7 "Τρέχουσα θέση εστίασης πάντα ορατή" και 2.4.6 "Κατανοητές επικεφαλίδες και ετικέτες" και 4.1.2 "Όνομα, Ρόλος, Τιμή".

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

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

• Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

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

• 1.3.2 Meaningful Sequence (Level A)
• 1.3.3 Sensory Characteristics (Level A)

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

• G57 Ordering the content in a meaningful sequence
• G96 Providing textual identification of items that otherwise rely only on sensory information to be understood

CSS τεχνικές

• C6 Positioning content based on structural markup
• C27: Making the DOM order match the visual order

Scripting τεχνικές

• SCR21: Using functions of the Document Object Model (DOM) to add content to a page
• SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element
• SCR27: Reordering page sections using the Document Object Model
• SCR28: Using an expandable and collapsible menu to bypass block of content
• SCR37: Creating Custom Dialogs in a Device Independent Way

Αποτυχίες

• F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
• F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
• F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word
• F87: Failure of 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS

Πηγές

Σημαντικά άρθρα και πόροι σχετικά του DOM Scripting

• W3C: Document Object Model (DOM) Technical Reports
• URL: DOMscripting Website by Jeremy Keith
• protofunc(): The great Screenreader Focus-Test

Στην XHTML, ο καθορισμός ενός φύλλου στυλ είναι υποχρεωτικός. Μπορεί ακόμα να ικανοποιηθεί αυτό το σημείο ελέγχου;

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

Σχεδόν όλα τα νεότερα προγράμματα περιήγησης μπορούν πλέον να αξιολογούν φύλλα στυλ. Δεν είναι περιττό να ελέγχετε την προβολή χωρίς φύλλα στυλ;

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

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