Προσβάσιμες καταστάσεις εστίασης: Σχεδιασμός ορατής εστίασης πληκτρολογίου
Πώς να σχεδιάσετε ορατή εστίαση πληκτρολογίου που πληροί το WCAG 2.2: τι απαιτούν τα 2.4.7 και 2.4.13, πώς λειτουργεί το :focus-visible και συμβουλές σχεδίασης για δακτυλίους εστίασης.
Core Takeaway
Κάθε διαδραστικό στοιχείο χρειάζεται μια σαφώς ορατή ένδειξη εστίασης για τους χρήστες του πληκτρολογίου. Το WCAG 2.2 το απαιτεί στο επίπεδο AA (2.4.7). Για ισχυρό δείκτη, στοχεύστε στην καθοδήγηση AAA του WCAG (2.4.13): τουλάχιστον η περιοχή ενός περιγράμματος εικονοστοιχείων 2 CSS γύρω από το στοιχείο με αντίθεση 3:1 μεταξύ εστιασμένων και μη εστιασμένων καταστάσεων. Χρησιμοποιήστε το :focus-visible για να εμφανίσετε δαχτυλίδια για χρήστες πληκτρολογίου χωρίς να τα εμφανίζετε σε κάθε κλικ του ποντικιού.
Γιατί οι καταστάσεις εστίασης έχουν σημασία
Τα άτομα που χρησιμοποιούν πληκτρολόγιο, διακόπτη συσκευής ή μεγεθυντικό φακό οθόνης μετακινούνται σε μια σελίδα ένα στοιχείο κάθε φορά. Η ένδειξη εστίασης είναι ο μόνος τρόπος που γνωρίζουν πού βρίσκονται. Η κατάργηση του περιγράμματος του προγράμματος περιήγησης χωρίς αντικατάσταση είναι μία από τις πιο συνηθισμένες αποτυχίες προσβασιμότητας.
Τι απαιτεί το WCAG 2.2
Το κριτήριο επιτυχίας 2.4.7 Ορατή εστίαση (επίπεδο AA) απαιτεί οποιαδήποτε διεπαφή που λειτουργεί με πληκτρολόγιο να έχει μια λειτουργία όπου η ένδειξη εστίασης είναι ορατή. Το WCAG 2.2 προστέθηκε 2.4.13 Εμφάνιση εστίασης (επίπεδο AAA), που περιγράφει μια ισχυρή ένδειξη: τουλάχιστον τόσο μεγάλη όσο η περιοχή πάχους περιμέτρου 2 CSS pixel του στοιχείου, με αναλογία αντίθεσης τουλάχιστον 3:1 μεταξύ των εστιασμένων και μη εστιασμένων καταστάσεων.
:focus-visible
Το MDN εξηγεί ότι το :focus-visible ισχύει όταν ένα στοιχείο έχει εστίαση και το πρόγραμμα περιήγησης αποφασίζει, χρησιμοποιώντας ευρετικές μεθόδους, ότι η εστίαση θα πρέπει να εμφανίζεται, συνήθως για χρήση πληκτρολογίου. Αυτό σας επιτρέπει να εμφανίζετε δυνατούς δακτυλίους εστίασης για χρήστες πληκτρολογίου χωρίς να τους εμφανίζετε κάθε φορά που κάποιος κάνει κλικ σε ένα κουμπί με το ποντίκι. Χρησιμοποιήστε το αντί να αφαιρέσετε τα περιγράμματα.
Σχεδιάζοντας το δαχτυλίδι
Πρακτικές οδηγίες:
- Χρησιμοποιήστε ένα περίγραμμα ή δακτύλιο με μετατόπιση, ώστε να μην αναμειγνύεται στο στοιχείο.
- Ελέγξτε την αντίθεση σε κάθε φόντο στο οποίο μπορεί να εμφανιστεί το στοιχείο. ένα δίχρωμο δαχτυλίδι βοηθά.
- Διατηρήστε το συνεπές μεταξύ των στοιχείων, που ορίζεται ως διακριτικό στο σύστημα σχεδιασμού σας.
- Ποτέ μην βασίζεστε μόνο σε μια ανεπαίσθητη αλλαγή χρώματος.
- Βεβαιωθείτε ότι το εστιασμένο στοιχείο δεν είναι κρυμμένο πίσω από αυτοκόλλητες κεφαλίδες.
Εστίαση και κίνηση
Ένας δακτύλιος εστίασης μπορεί να εμφανιστεί με πολύ σύντομη μετάβαση, αλλά θα πρέπει να αισθάνεται αμέσως. Αποφύγετε κινούμενα σχέδια που καθυστερούν το κουδούνισμα ή μετακινούν το στοιχείο και για προσαρμοσμένα στοιχεία που σχεδιάζονται με καμβά, βεβαιωθείτε ότι υπάρχει ακόμα ένα πραγματικό στοιχείο με δυνατότητα εστίασης στη σελίδα, ώστε οι χρήστες του πληκτρολογίου να μπορούν να το προσεγγίσουν.
Κλειδί Principles για να θυμάστε
- Απαιτείται ορατή εστίαση στο WCAG AA (2.4.7)
- 2.4.13 (AAA): Περιοχή 2 px και αλλαγή αντίθεσης 3:1
- Χρησιμοποιήστε το :focus-visible αντί να αφαιρέσετε περιγράμματα
- Ορίστε το δαχτυλίδι εστίασης ως διακριτικό σχεδίασης
- Η διεπαφή χρήστη που έχει αποδοθεί σε καμβά χρειάζεται πραγματικά στοιχεία με δυνατότητα εστίασης
Συχνές Ερωτήσεις
Πηγές
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Έγγραφα Ιστού