Τι ελέγχεται;
Η διαδραστική περιοχή των στοιχείων διεπαφής χρήστη (στόχος) πρέπει να καλύπτει μια περιοχή 24 x 24 pixel CSS (μέγεθος στόχου) για χρήση με συσκευές κατάδειξης (π.χ. ποντίκι ή αφή). Ισχύουν οι ακόλουθες εξαιρέσεις:
- Απόσταση: Οι στόχοι μικρότεροι από 24 x 24 pixel (CSS) έχουν αρκετή απόσταση από άλλους στόχους. Αυτό θεωρείται ότι συμβαίνει όταν ένας φανταστικός κύκλος με διάμετρο 24 pixel (CSS) είναι κεντραρισμένος στο πλαίσιο οριοθέτησης του αντίστοιχου στόχου και ο κύκλος δεν τέμνει έναν άλλο στόχο ή τον κύκλο άλλου στόχου μικρότερου μεγέθους. Παράδειγμα: Μια σειρά κουμπιών, με μέγεθος 20 x 20 pixel CSS, απέχουν μεταξύ τους 4 pixel CSS.
- Ισοδύναμη εναλλακτική: Μπορείτε να εκτελέσετε τη συνάρτηση με ένα άλλο στοιχείο ελέγχου που πληροί την απαίτηση και βρίσκεται στην ίδια σελίδα.
- Inline: Ο στόχος είναι σε μια πρόταση ή το μέγεθος του στόχου περιορίζεται από το ύψος γραμμής του περιβάλλοντος μη διαδραστικού κειμένου (π.χ. ένας σύνδεσμος κειμένου σε μια παράγραφο).
- User Agents: Το μέγεθος του στόχου καθορίζεται από τον παράγοντα χρήστη και δεν αλλάζει από τον κατασκευαστή.
- Βασικό : Η συγκεκριμένη εκπροσώπηση του στόχου είναι απαραίτητη ή απαιτείται από το νόμο.
Γιατί ελέγχεται;
Τα διαδραστικά στοιχεία θα πρέπει να ενεργοποιούνται εύκολα μέσω εισόδου δείκτη (π.χ. ποντίκι ή αφή) χωρίς οι χρήστες να ενεργοποιήσουν κατά λάθος ένα γειτονικό στοιχείο. Οι χρήστες που έχουν δυσκολία με λεπτές κινητικές δεξιότητες μπορεί να δυσκολεύονται να πατήσουν με ακρίβεια μικρούς στόχους. Το επαρκές μέγεθος ή η απόσταση μεταξύ των στόχων μειώνει την πιθανότητα να πατήσουν λάθος στοιχείο.
Πώς ελέγχεται;
1. Εφαρμογή του σημείου ελέγχο 2.5.8 «Μέγεθος στόχου»
Το σημείο ελέγχου 2.5.8 «Μέγεθος στόχου» ισχύει εάν υπάρχουν διαδραστικά στοιχεία.2. Έλεγχος
- Προσδιορίστε διαδραστικά στοιχεία που ενεργοποιούνται με συσκευές κατάδειξης (π.χ. ποντίκι ή αφή) και δεν εμπίπτουν στις εξαιρέσεις.
- Για κάθε στόχο, ελέγξτε εάν το μέγεθος είναι επαρκές ή εάν υπάρχει κατά τα άλλα επαρκή απόσταση από γειτονικούς στόχους.
- Για να προσδιορίσετε το μέγεθος pixel CSS ενός διαδραστικού στοιχείου, εάν έχετε αμφιβολίες, χρησιμοποιήστε τη λειτουργία inspection του προγράμματος περιήγησης:
- Κάντε δεξί κλικ στο διαδραστικό στοιχείο που θέλετε να ελέγξτε και επιλέξτε inspection από το μενού περιβάλλοντος. Στα περισσότερα προγράμματα περιήγησης, αυτή η μέθοδος επιλογής στοιχείων εμφανίζει επίσης το ύψος και το πλάτος των pixel CSS.
- Ο πίνακας διάταξης Inspector εμφανίζει τις τιμές ύψους και πλάτους του επιλεγμένου στοιχείου, καθώς και πρόσθετες τιμές για τις ιδιότητες padding, border και margin (CSS). Και τα δύο padding και border αποτελούν μέρος του μεγέθους στόχου, ακόμα κι αν δεν είναι ορατά γραφικά, επειδή αντιδρούν στην ενεργοποίηση του δείκτη.
- Ο πίνακας Inspector Computed εμφανίζει επίσης τις τιμές ύψους και πλάτους του επιλεγμένου στοιχείου, καθώς και άλλες υπολογιζόμενες ιδιότητες CSS.
- Το Bookmarklet Target Size μπορεί να χρησιμοποιηθεί για υποστήριξη:
- Προσδιορίζει διαδραστικά στοιχεία, υπολογίζει το κεντρικό σημείο τους και σχεδιάζει έναν ημιδιαφανή κύκλο 24x24 pixel γύρω από το κεντρικό σημείο του στοιχείου.
- Ένας πράσινος κύκλος με παχύ περίγραμμα σημαίνει: το στοιχείο έχει ύψος ή πλάτος 24 pixel ή περισσότερο.
- Ένας μπλε κύκλος σημαίνει: Το στοιχείο έχει ύψος και πλάτος μικρότερο από 24 pixel.
- Εάν διαπιστωθεί ότι ένα διαδραστικό στοιχείο επικαλύπτει ένα άλλο διαδραστικό στοιχείο, μετά την εφαρμογή του σελιδοδείκτη, εμφανίζεται μια προειδοποίηση JavaScript με τον αριθμό των επικαλυπτόμενων στοιχείων.
- Προσδιορίζει διαδραστικά στοιχεία, υπολογίζει το κεντρικό σημείο τους και σχεδιάζει έναν ημιδιαφανή κύκλο 24x24 pixel γύρω από το κεντρικό σημείο του στοιχείου.
- Μια εναλλακτική λύση για τον έλεγχο του μεγέθους στόχου είναι το Εργαλειοθήκη προσβασιμότητας επεκτάσεων Chrome από το HalfAccessible .
- Μετά την εγκατάσταση και το άνοιγμα της επέκτασης, εμφανίζεται ένα αναδυόμενο παράθυρο. Ενεργοποιήστε εδώ το "Open Toolkit".
- Στην αναδυόμενη περιοχή που εμφανίζεται τώρα, ενεργοποιήστε το πλαίσιο ελέγχου "Μέγεθος στόχου" κάτω από την καρτέλα "Εργαλεία".
- Μετακινήστε τους στόχους ή τοποθετήστε τον δείκτη του ποντικιού πάνω τους. Εάν ο στόχος πληροί την απαίτηση ("PASS") ή εάν πληροί μόνο την απόσταση ("REVIEW").
- Ελέγξτε εάν οι στόχοι για τους οποίους εμφανίζεται το "REVIEW" απέχουν επαρκώς από άλλους στόχους ή εμπίπτουν στις εξαιρέσεις (π.χ. επειδή είναι σύνδεσμοι συνεχούς κειμένου).
- Ελέγξτε εάν τα στοιχεία μικρού μεγέθους αποτελούν εξαιρέσεις κατά την έννοια του σημείου ελέγχου, επειδή δεν αξιολογούνται:
- Εγγενή στοιχεία ελέγχου των οποίων το μέγεθος καθορίζεται από τον παράγοντα χρήστη, όπως εγγενή πλαίσια ελέγχου.
- Στόχοι των οποίων το μέγεθος καθορίζεται από το περιβάλλον κείμενο (π.χ. σύνδεσμοι κειμένου σε μια παράγραφο).
- Η συγκεκριμένη παρουσίαση του στόχου είναι απαραίτητη ή απαιτείται από το νόμο.
- Υπάρχει ένα άλλο στοιχείο ελέγχου για την ίδια λειτουργία που πληροί την απαίτηση και βρίσκεται στην ίδια σελίδα.
3. Σημειώσεις
- Ένα ελάχιστο μέγεθος 24 x 24 pixel CSS σημαίνει: Ο στόχος είναι αρκετά μεγάλος ώστε να επιτρέπει τη σχεδίαση ενός τετραγώνου 24 x 24 pixel στον στόχο (και να μην εκτείνεται πέρα από την περιοχή στόχου). Αυτό είναι ιδιαίτερα σημαντικό να λαμβάνεται υπόψη για στρογγυλεμένες επιφάνειες.
- Η εξαίρεση απόστασης μπορεί επίσης να ισχύει εάν ένα στοιχείο είναι μικρότερο σε ύψος. Παράδειγμα: Τα κουμπιά έχουν πλάτος 44 pixel CSS, αλλά έχουν ύψος μόνο 16 pixel CSS. Δεν υπάρχουν διαδραστικά στοιχεία ακριβώς πάνω ή κάτω από τα κουμπιά.
- Η περιοχή στόχος για τις συσκευές κατάδειξης δεν είναι απαραίτητα η ίδια με την ορατή περιοχή κλικ. Για παράδειγμα, ένας γραφικός διακόπτης με ορατό εικονίδιο είναι 16 x 16 pixel και έχει ένα padding από τα 4 pixel σε κάθε πλευρά. Αυτό αθροίζει σε μια περιοχή στόχο 24 x 24 pixel.
- Οι λίστες συνδέσμων που είναι διατεταγμένες σε δομές πλοήγησης δεν υπολογίζονται ως ενσωματωμένοι σύνδεσμοι. Οι κατασκευαστές μπορούν να προβλέψουν τη σχετική θέση αυτών των συνδέσμων και να εφαρμόσουν επαρκή απόσταση στόχων.
- Η απαίτηση είναι ανεξάρτητη από τον παράγοντα ζουμ της σελίδας. Όταν οι χρήστες κάνουν ζουμ στη σελίδα, το μέγεθος pixel CSS των στοιχείων δεν αλλάζει.
- Το σημείο ελέγχου 2.5.8 δεν ισχύει για στοιχεία που εμφανίζονται από το πρόγραμμα περιήγησης. Αυτό σημαίνει ότι τα εγγενή στοιχεία ελέγχου, όπως οι είσοδοι Radio-Buttons και τα πλαίσια ελέγχου εξαιρούνται, αλλά οι προσαρμοσμένες είσοδοι Radio-Buttons και τα πλαίσια ελέγχου επηρεάζονται από αυτήν την απαίτηση.
4. Αξιολόγηση
Το σημείο ελέγχου 2.5.8 «Μέγεθος στόχου» μερικώς ικανοποιείται ή χειρότερα
Το μέγεθος στόχου ενός διαδραστικού στοιχείου δεν περιλαμβάνει 24 x 24 pixel CSS και δεν μπορεί να αξιολογηθεί ως προς τις εξαιρέσεις (π.χ. επαρκής απόσταση).