Μια σύντομη, επιλεκτική λίστα ελέγχου για προσβάσιμα κουμπιά στο web

Το πρόβλημα με τις συμβουλές για την προσβασιμότητα των κουμπιών

Οι περισσότερες οδηγίες για την προσβασιμότητα των κουμπιών ανήκουν σε δύο κατηγορίες: είτε είναι μια ερμηνεία 40 σελίδων των WCAG που δεν διαβάζει κανείς, είτε είναι μια ασαφής σύσταση να "κάνετε τα κουμπιά προσβάσιμα" χωρίς εφαρμόσιμα βήματα. Καμία από τις δύο δεν βοηθά όταν παραδίδετε ένα χαρακτηριστικό την Πέμπτη.

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

1. Χρησιμοποιήστε το στοιχείο button για τα κουμπιά

Αν λειτουργεί σαν κουμπί, θα πρέπει να είναι στοιχείο <button>. Όχι ένα <div> με onclick, όχι ένα <span> με role="button", όχι ένα <a> με href="#" και preventDefault.

Το στοιχείο <button> σάς δίνει δωρεάν πλοήγηση με πληκτρολόγιο, διαχείριση εστίασης και ανακοινώσεις από αναγνώστες οθόνης. Όταν χρησιμοποιείτε ένα <div>, ξαναχτίζετε όλα αυτά από την αρχή — και θα τα κάνετε λάθος.

Η μόνη εξαίρεση: αν η ενέργεια οδηγεί σε νέα σελίδα ή αλλάζει το URL, χρησιμοποιήστε στοιχείο <a>. Οι σύνδεσμοι και τα κουμπιά είναι σημασιολογικά διαφορετικά. Οι χρήστες αναγνωστών οθόνης πλοηγούνται ανά τύπο στοιχείου και περιμένουν από τα κουμπιά να εκτελούν ενέργειες και από τους συνδέσμους να οδηγούν σε πλοήγηση.

2. Κάντε την περιοχή ενεργοποίησης τουλάχιστον 44×44 pixels

Το WCAG 2.5.5 (Επίπεδο AAA) απαιτεί τα διαδραστικά στοιχεία να έχουν ελάχιστο μέγεθος στόχου 44×44 CSS pixels. Αυτό δεν αφορά το οπτικό μέγεθος — αφορά την περιοχή στην οποία μπορεί να γίνει κλικ.

Μπορείτε να έχετε ένα μικρό οπτικό κουμπί με επαρκές padding ή να επεκτείνετε την περιοχή ενεργοποίησης με ένα ψευδο-στοιχείο. Αυτό που έχει σημασία είναι ο χρήστης να μην χρειάζεται να στοχεύσει με ακρίβεια.

Οι χρήστες κινητών, τα άτομα με κινητικές αναπηρίες και οποιοσδήποτε χρησιμοποιεί μια συσκευή εν κινήσει θα αστοχήσουν σε μικρούς στόχους. Ένα κουμπί εικονιδίου 24×24 pixel μπορεί να φαίνεται καθαρό, αλλά αποτελεί αστοχία ευχρηστίας.

3. Παρέχετε ορατές καταστάσεις εστίασης που δεν είναι απλώς οι προεπιλογές του browser

Ο προεπιλεγμένος δακτύλιος εστίασης του browser είναι καλύτερος από το τίποτα, αλλά είναι ασυνεπής μεταξύ browsers και συχνά αόρατος πάνω σε ορισμένα φόντα. Χρειάζεστε μια προσαρμοσμένη κατάσταση εστίασης που λειτουργεί στο design system σας.

Ένας καλός δείκτης εστίασης έχει τρεις ιδιότητες:

• Υψηλή αντίθεση: τουλάχιστον 3:1 σε σχέση με τα γειτονικά χρώματα
• Ορατή απόσταση: να μην κρύβεται από το ίδιο το περίγραμμα ή το φόντο του κουμπιού
• Συνεπές σχήμα: οι χρήστες πρέπει να τον αναγνωρίζουν ως δείκτη εστίασης σε όλο το interface σας

Μην αφαιρείτε το outline: none χωρίς να το αντικαταστήσετε με κάτι καλύτερο. Και μην κάνετε τις καταστάσεις εστίασης τόσο διακριτικές ώστε να τις βλέπετε μόνο εσείς σε τέλειες συνθήκες φωτισμού.

4. Γράψτε ετικέτες κουμπιών που βγάζουν νόημα εκτός συμφραζομένων

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

Ένα κουμπί με ετικέτα "Μάθετε περισσότερα" είναι άχρηστο σε αυτή τη λίστα. Το ίδιο και το "Κάντε κλικ εδώ" ή το "Υποβολή". Η ετικέτα πρέπει να περιγράφει την ενέργεια: "Λήψη της λίστας ελέγχου προσβασιμότητας", "Εγγραφή σε ενημερώσεις", "Διαγραφή αυτού του σχολίου".

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

Για κουμπιά μόνο με εικονίδιο, το aria-label είναι υποχρεωτικό. Ένα κουμπί με μόνο ένα εικονίδιο μεγεθυντικού φακού χρειάζεται aria-label="Search" ή ισοδύναμο κείμενο. Το εικονίδιο δεν είναι προσβάσιμο στους αναγνώστες οθόνης.

5. Εξασφαλίστε επαρκή χρωματική αντίθεση

Το WCAG 2.1 απαιτεί λόγο αντίθεσης τουλάχιστον 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (18pt ή 14pt bold). Οι ετικέτες κουμπιών είναι συνήθως κανονικό κείμενο.

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

Χρησιμοποιήστε έναν ελεγκτή αντίθεσης κατά τον σχεδιασμό, όχι μετά την κυκλοφορία. Η διόρθωση προβλημάτων αντίθεσης στην παραγωγή είναι ακριβή, επειδή συχνά απαιτεί αλλαγές στο design system.

Αν εργάζεστε με εργαλεία επεξεργασίας εικόνας, η επεξεργασία στην πλευρά του client μπορεί να βοηθήσει στη διατήρηση της ιδιωτικότητας κατά τη δημιουργία προσβάσιμων οπτικών assets — ιδιαίτερα όταν δοκιμάζετε χρωματικούς συνδυασμούς ή δημιουργείτε καταστάσεις προεπισκόπησης.

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

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

Επίσης δεν καλύπτει το ευρύτερο ερώτημα του πότε να χρησιμοποιείτε κουμπί αντί για άλλα διαδραστικά στοιχεία. Για αυτό, χρειάζεται να κατανοείτε το σημασιολογικό HTML και το accessibility tree — θέματα που αξίζουν δικά τους άρθρα.

Αυτό που καλύπτει είναι οι εύκολες νίκες: τα λάθη που εμφανίζονται σχεδόν σε κάθε code review, που επηρεάζουν τους περισσότερους χρήστες και που διορθώνονται πιο εύκολα κατά την ανάπτυξη.

Πώς να το ενσωματώσετε στη ροή εργασίας σας

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

Στον σχεδιασμό: προσθέστε καταστάσεις εστίασης και σημειώσεις για τις περιοχές ενεργοποίησης στα αρχεία σχεδιασμού σας. Μην τα αφήνετε στους developers να τα μαντέψουν.

Στο code review: ελέγξτε για στοιχεία <button>, aria-label σε κουμπιά εικονιδίων και CSS για καταστάσεις εστίασης. Αυτά εντοπίζονται γρήγορα.

Στις δοκιμές: περάστε με tab μέσα από το interface σας χρησιμοποιώντας το πληκτρολόγιο. Αν δεν μπορείτε να φτάσετε σε ένα κουμπί ή δεν μπορείτε να δείτε πού βρίσκεται η εστίαση, δεν μπορούν ούτε οι χρήστες σας.

Στην τεκμηρίωση: συμπεριλάβετε απαιτήσεις προσβασιμότητας κουμπιών στη βιβλιοθήκη components σας. Κάντε πιο εύκολο το σωστό από το λάθος.

Αν κάνετε debugging σε προβλήματα παραγωγής, εργαλεία για την επιθεώρηση HTTP headers και redirects μπορούν να σας βοηθήσουν να κατανοήσετε πώς οι υποστηρικτικές τεχνολογίες ερμηνεύουν το markup σας — ιδιαίτερα όταν διερευνάτε τη διαχείριση εστίασης μετά την πλοήγηση.

Το κόστος της παράλειψης αυτής της δουλειάς

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

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

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

Βασικά σημεία

• Χρησιμοποιήστε στοιχεία <button> για κουμπιά και στοιχεία <a> για πλοήγηση — η σημασιολογική διαφορά έχει σημασία για τις υποστηρικτικές τεχνολογίες
• Εξασφαλίστε ότι οι περιοχές ενεργοποίησης είναι τουλάχιστον 44×44 CSS pixels, ώστε να εξυπηρετούν κινητικές αναπηρίες και χρήστες κινητών
• Παρέχετε ορατές καταστάσεις εστίασης υψηλής αντίθεσης που λειτουργούν σε όλο το design system σας
• Γράψτε ετικέτες κουμπιών που βγάζουν νόημα όταν διαβάζονται μεμονωμένα και χρησιμοποιήστε aria-label για κουμπιά μόνο με εικονίδιο
• Ελέγξτε τη χρωματική αντίθεση κατά τον σχεδιασμό, όχι μετά την κυκλοφορία, για να αποφύγετε ακριβές εκ των υστέρων διορθώσεις

FAQ

Q: Μπορώ να χρησιμοποιήσω role="button" σε ένα <div> αν προσθέσω keyboard handlers;

A: Μπορείτε, αλλά δεν θα έπρεπε. Θα χρειαστεί να χειριστείτε χειροκίνητα Enter, Space, διαχείριση εστίασης και απενεργοποιημένες καταστάσεις — και αναπόφευκτα θα σας ξεφύγει κάτι. Το στοιχείο <button> τα κάνει όλα αυτά σωστά από προεπιλογή. Χρησιμοποιήστε το.

Q: Τι γίνεται με τα κουμπιά που εναλλάσσουν κατάσταση, όπως ένα κουμπί play/pause;

A: Χρησιμοποιήστε aria-pressed="true" ή aria-pressed="false" για να δηλώσετε την τρέχουσα κατάσταση. Η ετικέτα του κουμπιού πρέπει επίσης να αντικατοπτρίζει την ενέργεια που θα συμβεί στο κλικ ("Pause" κατά την αναπαραγωγή, "Play" όταν είναι σε παύση), όχι την τρέχουσα κατάσταση. Οι χρήστες αναγνωστών οθόνης πρέπει να γνωρίζουν τι θα κάνει το κουμπί, όχι σε ποια κατάσταση βρίσκεται το σύστημα.

Q: Τα απενεργοποιημένα κουμπιά πρέπει να πληρούν τις απαιτήσεις αντίθεσης;

A: Το WCAG 2.1 εξαιρεί τα απενεργοποιημένα controls από τις απαιτήσεις αντίθεσης (1.4.3), αλλά αυτό είναι αμφιλεγόμενο. Τα απενεργοποιημένα κουμπιά με κακή αντίθεση είναι δύσκολο να τα αντιληφθούν όλοι. Αν πρόκειται να εμφανίσετε ένα απενεργοποιημένο κουμπί, κάντε το ευανάγνωστο. Ακόμα καλύτερα, κρύψτε το ή εξηγήστε γιατί είναι απενεργοποιημένο.

Q: Πώς δοκιμάζω την προσβασιμότητα κουμπιών χωρίς αναγνώστη οθόνης;

A: Χρησιμοποιήστε το πληκτρολόγιό σας. Περάστε με Tab μέσα από το interface και επαληθεύστε ότι μπορείτε να φτάσετε σε κάθε κουμπί, να δείτε πού βρίσκεται η εστίαση και να ενεργοποιήσετε κουμπιά με Enter ή Space. Αυτό εντοπίζει τα περισσότερα προβλήματα. Για βαθύτερες δοκιμές, χρησιμοποιήστε τον accessibility inspector στο Chrome ή στο Firefox DevTools για να ελέγξετε τον υπολογισμένο ρόλο και την ετικέτα.

Q: Ποια είναι η διαφορά μεταξύ aria-label και aria-labelledby;

A: Το aria-label παρέχει απευθείας μια συμβολοσειρά κειμένου. Το aria-labelledby αναφέρεται στο ID ενός άλλου στοιχείου του οποίου το περιεχόμενο κειμένου γίνεται η ετικέτα. Χρησιμοποιήστε aria-labelledby όταν το κείμενο της ετικέτας υπάρχει ήδη αλλού στο DOM. Χρησιμοποιήστε aria-label όταν χρειάζεται να παρέχετε μια ετικέτα που δεν είναι ορατή στην οθόνη.

Πηγές

• Web Content Accessibility Guidelines (WCAG) 2.1 — W3C
• Inclusive Components: Toggle Buttons — Heydon Pickering
• The ARIA Button Pattern — W3C ARIA Authoring Practices Guide
• WebAIM: Keyboard Accessibility — WebAIM