#Σημείο ελέγχου 2.4.11 Η εστίαση δεν καλύπτεται (ελάχιστη)

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

Οι χρήστες πρέπει να μπορούν να κάνουν ορατό το εστιασμένο χειριστήριο χωρίς να μετακινούν την εστίαση του πληκτρολογίου. Για παράδειγμα, χρησιμοποιώντας Esc για να κλείσουν ανοιχτό περιεχόμενο, χρήση πλήκτρων για κύλιση περιεχομένου ή χρήση πλήκτρου για εναλλαγή μεταξύ επικαλύψεων). Είναι αντικείμενο από το Σημείο ελέγχου 2.4.11 Η εστίαση δεν καλύπτεται (ελάχιστη) [Επίπεδο AA].

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

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

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

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

2. Έλεγχος

• Ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης Firefox ή Chrome.
• Χρησιμοποιήστε το πλήκτρο tab ή shift + tab για πλοήγηση προς τα εμπρός και προς τα πίσω στη σελίδα, εστιάζοντας σε όλα τα στοιχεία ελέγχου.
• Ελέγξτε εάν υπάρχουν περιπτώσεις όπου ένα στοιχείο ελέγχου εστιασμένο σε καρτέλες αποκρύπτεται εντελώς. Για παράδειγμα, από μια σταθερή κεφαλίδα ή υποσέλιδο, από ένα διάλογο που δεν είναι παράθυρο διαλόγου ή άλλο περιεχόμενο που εμφανίζεται στους χρήστες.
• Εάν το ενεργό περιεχόμενο κρύβει ένα στοιχείο ελέγχου, δείτε εάν το στοιχείο ελέγχου μπορεί να γίνει ορατό χωρίς να μετακινήσετε την εστίαση του πληκτρολογίου. Υλοποιείστε τα ακόλουθα βήματα:
  1. Χρησιμοποιώντας το πλήκτρο Escape.
  2. Χρησιμοποιώντας ένα πλήκτρο για κύλιση.
  3. Πατώντας ένα κουμπί για εναλλαγή μεταξύ της θέσης εστίασης και του εμφανιζόμενου περιεχομένου.

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

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

• Η CSS ιδιότητα scroll-margin και ή ιδιότητα scroll-padding μπορούν να χρησιμοποιηθούν για να αποφευχθεί η απόκρυψη στοιχείων ελέγχου από περιοχές σταθερής θέσης όταν λαμβάνουν εστίαση. Ένας από τους περιορισμούς των ιδιοτήτων είναι ότι πρέπει να είναι γνωστό το ακριβές ύψος του Sticky-κοντέινερ.

  Αυτό δεν συμβαίνει πάντα, για παράδειγμα όταν οι διαστάσεις του Sticky-κοντέινερ μπορούν να αλλάξουν ανάλογα με το πραγματικό ύψος του περιεχομένου. Σε τέτοιες περιπτώσεις, ενδέχεται να απαιτείται πρόσθετη JavaScript για δυναμική αλλαγή της τιμής του scroll-margin ή scroll-padding.

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

Το σημείο ελέγχου 2.4.11 δεν ικανοποιείτε

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

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

Οριοθέτηση 1.4.13 «Περιεχόμενο on Hover ή Focus» και 2.4.11 «Η εστίαση δεν καλύπτεται»

Το σημείο ελέγχου 1.4.13 «Περιεχόμενο on Hover ή Focus» θέτει διάφορες απαιτήσεις για το περιεχόμενο που μπορεί να εμφανιστεί όταν ο δείκτης ή το πληκτρολόγιο είναι εστιασμένο και επικαλύπτει άλλο περιεχόμενο.

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

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

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

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

• 2.4 Navigable

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

• 2.4.11:Focus Not Obscured (Minimum) (Level AA)

Επαρκείς Τεχνικές

• C43: Using CSS scroll-padding to un-obscure content

Αποτυχίες

• F110: Failure of Success Criterion 2.4.12 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements

Γιατί το σημείο ελέγχου στοχεύει την (τουλάχιστον μερική) ορατότητα του στοιχείου και όχι την ένδειξη εστίασης;

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

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

Στη συζήτηση της Ομάδας Εργασίας για τις Κατευθυντήριες Γραμμές Προσβασιμότητας (AGWG) μπορεί να βρεθεί η ακόλουθη αιτιολόγηση (μεταφρασμένη ανάλογα):

1. Σε πολλές υλοποιήσεις, η ένδειξη εστίασης είναι πιο χλωμή στην άκρη. Εάν η διατύπωση αναφερόταν μόνο στην ένδειξη εστίασης, σε επίπεδο συμμόρφωσης AA ένα μόνο ορατό pixel με πολύ χαμηλή αντίθεση θα είχε ως αποτέλεσμα την επιτυχία του σημείου ελέγχου, παρόλο που δεν είναι πραγματικά ορατό.
2. Υπάρχει ήδη ένα σημείο ελέγχου «Τρέχουσα θέση εστίασης πάντα ορατή» που απαιτεί να είναι ορατή η ένδειξη εστίασης. Εάν η ένδειξη «Η εστίαση δεν καλύπτεται» στόχευε τον δείκτη, οι δύο απαιτήσεις φαίνεται να είναι περιττές.
3. Οι περισσότερες ενδείξεις εστίασης περιβάλλουν ένα χειριστήριο. Έτσι, εάν τουλάχιστον ένα pixel του χειριστηρίου δεν είναι κρυμμένο, θα πρέπει να είναι ορατά πολλά pixel της ένδειξης εστίασης. Δεδομένης της τρέχουσας διατύπωσης της απαίτησης, υπάρχει μεγάλη πιθανότητα οι δείκτες εστίασης να είναι τουλάχιστον εν μέρει ορατοί σε τυπικά στοιχεία λειτουργίας.

Πηγή: GitHub, Accessibility Guidelines Working Group Clarification for Understanding 2.4.11 Focus Not Obscured (Minimum) to ensure consistent testing