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

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

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

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

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

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

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

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

Εάν άλλα στοιχεία εισαχθούν δυναμικά στον πηγαίο κώδικα μιας σελίδας μέσω δέσμης ενεργειών 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 widow) που εισάγονται είναι εκτός της κανονικής σειράς του πηγαίου κώδικα. Για παράδειγμα, βρίσκονται στο κάτω μέρος της σελίδας και δεν εστιάζει αμέσως. Επομένως, η σειρά στην ακολουθία δεν είναι σύμφωνη με το νόημα του περιεχομένου.
  • Το κλείσιμο ψευδοπαραθύρων δεν επιστρέφει την εστίαση στο στοιχείο ενεργοποίησης.
Δεν ικανοποιείται
  • Η σειρά στην ακολουθία με την οποία γίνεται πρόσβαση σε συνδέσμους, στοιχεία φόρμας και αντικείμενα με το πλήκτρο tab είναι ακατανόητη και καθιστά τη λειτουργία με το πληκτρολόγιο σημαντικά πιο δύσκολη.

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

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

  • Σε αυτό το σημείο ελέγχου δηλ. Κριτήριο επιτυχίας 2.4.3 Συνεπής ακολουθία λειτουργίας πληκτρολογίου, ελέγχεται η σειρά στην ακολουθία. Ανεξάρτητα από το αν αντιστοιχεί στη διάταξη των στοιχείων με δυνατότητα εστίασης στον πηγαίο κώδικα ή αν δημιουργείται μέσω ευρετηρίου καρτελών και σεναρίων.
  • Η βασική προσβασιμότητα και δυνατότητα ενεργοποίησης των διαδραστικών στοιχείων είναι το αντικείμενο του κριτηρίου επιτυχίας 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 δεν επεξεργάζεται σωστά υπό ορισμένες συνθήκες.

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