#Σημείο ελέγχου 2.4.3 Συνεπής ακολουθία λειτουργίας πληκτρολογίου

Τι ελέγχεται;

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

Γιατί ελέγχεται;

Η λειτουργία θα πρέπει να είναι δυνατή ανεξάρτητα από τη συσκευή. Αυτό σημαίνει: Πρέπει να είναι δυνατό τόσο με δείκτη (ποντίκι, χειρονομία αφής) όσο και με το πληκτρολόγιο. Άλλες μορφές εισόδου, όπως η φωνητική είσοδος ή ο έλεγχος διακόπτη, βασίζονται επίσης στην καλή χρηστικότητα του πληκτρολογίου και μια λογική σειρά εστίασης.

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

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

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

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

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

Πώς ελέγχεται;

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

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

2. Έλεγχος

  1. Ανοίξτε τη σελίδα στον Firefox.
  2. Χρησιμοποιήστε το πλήκτρο tab ⭾  για να μεταβείτε στους συνδέσμους, στα στοιχεία της φόρμας και στα αντικείμενα. Ελέγξετε εάν η σειρά είναι ουσιαστικά κατανοητή.
  3. Ανοίξτε τη σελίδα στο Chrome και επαναλάβετε τον έλεγχο.
2.1 Έλεγχος περιεχομένου που εισάγεται δυναμικά

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

  1. Ανοίξτε τη σελίδα στον Firefox.
  2. Προεπιλεγμένη ρύθμιση στον Firefox: Επιλέξτε Ρυθμίσεις στο μενού του προγράμματος περιήγησης. Στην περιοχή «Surfing», επιλέξτε την επιλογή «Να επιτρέπεται η σήμανση κειμένου με το πληκτρολόγιο». Αυτό έχει ως αποτέλεσμα η θέση του δρομέα να εμφανίζεται ως κουκούλα που αναβοσβήνει. Αυτό συνήθως αντιστοιχεί στην εστίαση του προγράμματος ανάγνωσης οθόνης.
  3. Καλέστε περιεχόμενο που έχει εισαχθεί δυναμικά, για παράδειγμα εισάγοντας δεδομένα σε πεδία μια φόρμας ή ενεργοποιώντας ένα κουμπί.
  4. Καλέστε το εργαλείο προγραμματιστή του φυλλομετρητή (Inspector for Firefox). Επιλέξτε το εικονίδιο το οποίο δείχνει τον κέρσορα σε ένα πλήκτρο. Βρίσκετε στα αριστερά της γραμμής μενού και κάντε κλικ στο περιεχόμενο που έχει εισαχθεί. Ο δημιουργημένος πηγαίος κώδικας μπορεί τώρα να προβληθεί στο περιβάλλον του παραθύρου που εμφανίζεται.
  5. Ελέγξτε τη θέση του εισαγόμενου στοιχείου.
    • Περίπτωση 1: Το περιεχόμενο που έχει εισαχθεί εμφανίζεται στον πηγαίο κώδικα κάτω από το στοιχείο ενεργοποίησης.
    • Περίπτωση 2: Εάν τα ψευδοπαράθυρα που δημιουργούνται (Modal dialog) δεν εισάγονται άμεσα στον πηγαίο κώδικα, αλλά μετά από το στοιχείο ενεργοποίησης, κάπου αλλού, για παράδειγμα στο τέλος της σελίδας:
  1. Πρέπει πρώτα να κλείσετε το ψευδοπαράθυρο. Ξεκινήσετε ξανά από το στοιχείο ενεργοποίησης χρησιμοποιώντας το πληκτρολόγιο.
  2. Οι χρήστες του προγράμματος ανάγνωσης οθόνης αναγνωρίζουν επίσης ότι έχει προστεθεί νέο περιεχόμενο; Αυτό μπορεί να γίνει με διάφορους τρόπους, για παράδειγμα:
    • Η εστίαση μετακινείται στην αρχή του εισαγόμενου στοιχείου μέσω συναρτήσεων. Επίσης, είναι στο σημείο εισαγωγής ο δρομέας που αναβοσβήνει ορατός.
    • Το κείμενο συνδέσμου/κουμπιού ή μια ιδιότητα του στοιχείου ενεργοποίησης (π.χ. disabled δηλαδή απενεργοποιημένο) αλλάζει και όταν στη συνέχεια πληκτρολογείτε, λαμβάνει το στοιχείο που προστέθηκε την εστίαση.
  3. Η εστίαση επιστρέφει στο στοιχείο ενεργοποίησης όταν είναι κλειστό το ψευδοπαράθυρο;

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

  • Οι χρήστες πλοηγούνται διαδοχικά στο περιεχόμενο και θα πρέπει ουσιαστικά να ακολουθεί η σειρά εστίασης την οπτική διάταξη στην οθόνη. Οι μικρότερες αποκλίσεις δεν αποτελούν πρόβλημα, όμως μερικές φορές δεν είναι καν δυνατό να κατανοηθεί η ακολουθία λειτουργίας του πληκτρολογίου από τη διάταξη στην οθόνη.
  • Η σειρά εστίασης είναι δύσκολο να κατανοηθεί όταν περνά πάνω από κρυμμένα στοιχεία τα οποία μπορούν να ενεργοποιηθούν. Αυτό ισχύει ιδιαίτερα για διαδοχικούς κρυμμένους συνδέσμους παράκαμψης.
  • Εάν η σειρά εστίασης δεν είναι ευδιάκριτη. Για παράδειγμα, εάν η επισήμανση εστίασης καταργηθεί, είναι το Bookmarklet Show Tab Focus του Jeff Smith ένα χρήσιμο εργαλείο για την επισήμανση της τρέχουσας θέσης.
  • Ο έλεγχος πραγματοποιείται με ενεργοποιημένη τη JavaScript.

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

    Σημαντικό σε αυτό το πλαίσιο: Τα πεδία των φορμών ενδέχεται να μην μπορούν να πλοηγηθούν με το πλήκτρο tab ⭾ , παρόλο που έχουν επισημανθεί σωστά. Εάν το παράθυρο του προγράμματος περιήγησης δεν έχει εστίαση, δεν μπορείτε απλώς να κάνετε κλικ σε αυτό και στη συνέχεια να αρχίσετε να χρησιμοποιείτε το πληκτρολόγιο. Αντίθετα, η εστίαση πρέπει να μετακινηθεί στο παράθυρο του προγράμματος περιήγησης χρησιμοποιώντας το πληκτρολόγιο (F6).

    Οι λίστες επιλογής χωρίς κουμπί υποβολής που ανταποκρίνονται στο onchange ενδέχεται να μην μπορούν να λειτουργήσουν μόνο με τα πλήκτρα βέλους [π.χ. → / ↓ ], καθώς η πρώτη επιλογή λίστας ενεργοποιείται πάντα. Για να περιηγηθείτε σε τέτοιες λίστες επιλογής, ίσως χρειαστεί πρώτα να τις ανοίξετε χρησιμοποιώντας το συνδυασμό πλήκτρων ALT + ↓ . Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τα πλήκτρα βέλους πάνω και κάτω για να μετακινηθείτε στις επιλογές και να πατήσετε Enter για να επιλέξετε μια επιλογή.

  • Ο Οδηγός πρακτικών συγγραφής Authoring Practices 1.1 ARIA (APG) παρέχει οδηγίες σχετικά με τη σειρά εστίασης/διαχείριση εστίασης που πρέπει να περιμένετε για συγκεκριμένους τύπους γραφικών στοιχείων.

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

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

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

Κριτήριο ικανοποιείται
  • Η σειρά στην ακολουθία με την οποία γίνεται πρόσβαση σε συνδέσμους, στοιχεία φόρμας και αντικείμενα με το πλήκτρο tab ⭾  είναι ουσιαστικά κατανοητή και συνεκτική.
Κριτήριο δεν ικανοποιείται πλήρως
  • Η σειρά στην ακολουθία είναι ασυνεπής, αποκλίνει από την οπτική διάταξη χωρίς κατανοητό λόγο ή η εστίαση του πληκτρολογίου δεν είναι ορατή για περισσότερες από τρεις συνεχόμενες στάσεις στο παράθυρο του προγράμματος περιήγησης.
  • Τα ψευδοπαράθυρα (Modal dialog window) που εισάγονται είναι εκτός της κανονικής σειράς του πηγαίου κώδικα. Για παράδειγμα, βρίσκονται στο κάτω μέρος της σελίδας και δεν εστιάζει αμέσως. Επομένως, η σειρά στην ακολουθία δεν είναι σύμφωνη με το νόημα του περιεχομένου.
  • Το κλείσιμο ψευδοπαραθύρων δεν επιστρέφει την εστίαση στο στοιχείο ενεργοποίησης.
Κριτήριο δεν ικανοποιείται
  • Η σειρά στην ακολουθία με την οποία γίνεται πρόσβαση σε συνδέσμους, στοιχεία φόρμας και αντικείμενα με το πλήκτρο tab ⭾  είναι ακατανόητη και καθιστά τη λειτουργία με το πληκτρολόγιο σημαντικά πιο δύσκολη.

Ταξινόμηση του σημείου ελέγχου

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

  • Σε αυτό το σημείο ελέγχου δηλαδή Κριτήριο επιτυχίας 2.4.3 Συνεπής ακολουθία λειτουργίας πληκτρολογίου, ελέγχεται η σειρά στην ακολουθία. Ανεξάρτητα από το αν αντιστοιχεί στη διάταξη των στοιχείων με δυνατότητα εστίασης στον πηγαίο κώδικα ή αν δημιουργείται μέσω του πλήκτρου Tab και σεναρίων.
  • Η βασική προσβασιμότητα και δυνατότητα ενεργοποίησης των διαδραστικών στοιχείων είναι το αντικείμενο του κριτηρίου επιτυχίας 2.1.1 «Μπορεί να χρησιμοποιηθεί χωρίς ποντίκι».
  • Η ορατότητα της εστίασης είναι το αντικείμενο του κριτηρίου επιτυχίας 2.4.7 "Τρέχουσα θέση εστίασης πάντα ορατή".
  • Εδώ ελέγχεται η σωστή θέση του περιεχομένου που εμφανίζεται ή εισάγεται. Το εάν αυτό το περιεχόμενο έχει νόημα ελέγχεται σε άλλο κριτήριο επιτυχίας, όπως 2.4.4(a) "Σημαντικά κείμενα συνδέσμων".

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

Κατευθυντήρια γραμμή Κριτήριο επιτυχίας

  • If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

    Success Criterion 2.4.3 Focus Order (Level A)
Τεχνικές Γενικές τεχνικές HTML τεχνικές Scripting τεχνικές Αποτυχίες

Ερωτήσεις σχετικά του σημείου ελέγχου

Ερώτηση: Πώς πρέπει να αξιολογείται η χρήση του tabindex;

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

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

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

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