Τι αποτελεί αντικείμενο αγωγής: Ένας πρακτικός οδηγός για τα πρότυπα διεπαφής χρήστη που κρύβονται πίσω από 6.666 καταγγελίες σχετικά με την προσβασιμότητα

Η κεφαλίδα είναι η πρώτη διαδραστική επιφάνεια σε κάθε σελίδα, και το κουμπί «χάμπουργκερ» είναι συχνά το πρώτο στοιχείο στο οποίο φτάνει ένας χρήστης που χρησιμοποιεί πληκτρολόγιο. Όταν αυτό το κουμπί εμφανίζεται ως <div> με εικόνα φόντου CSS, δεν διαθέτει προσβάσιμο όνομα ή ανοίγει ένα μενού που παγιδεύει το εστίαση ή δεν κοινοποιεί την κατάσταση ανοιχτού/κλειστού του, ολόκληρος ο ιστότοπος καθίσταται δομικά μη λειτουργικός από το πληκτρολόγιο πριν ο χρήστης έρθει σε επαφή με οποιοδήποτε πραγματικό περιεχόμενο.

Ο σύνδεσμος παράκαμψης είναι το συνοδευτικό σφάλμα. Ένας λειτουργικός "Skip to main content" Ο σύνδεσμος «skip» είναι μια διόρθωση πέντε γραμμών, αλλά αποτελεί και τον πιο αποτελεσματικό τρόπο για να διαπιστωθεί αν μια ομάδα ανάπτυξης έχει συμπεριλάβει καθόλου την προσβασιμότητα στη λίστα ελέγχου της. Οι καταγγελίες συχνά αναφέρουν και τα δύο στοιχεία στην ίδια παράγραφο, καθώς ένας σύνδεσμος «skip» που λείπει ή δεν λειτουργεί σωστά αποτελεί προειδοποιητικό σημάδι — αν η ομάδα δεν ενσωμάτωσε σύνδεσμο «skip», είναι σχεδόν βέβαιο ότι δεν ενσωμάτωσε ούτε τις καταστάσεις aria-expanded.

Απεικονίστε το ερέθισμα του μενού ως πραγματικό <button> με ετικέτα κειμένου ορατή ή προσβάσιμη μόνο από πρόγραμμα ανάγνωσης οθόνης και ένα διαχειριζόμενο aria-expanded ιδιότητα. Καθορίστε μια "Skip to main content" σύνδεσμος που γίνεται ορατός όταν το ποντίκι τοποθετηθεί πάνω του και οδηγεί στο εσωτερικό του <main> σημείο αναφοράς. Βεβαιωθείτε ότι η εστίαση μεταφέρεται στο μενού όταν αυτό ανοίγει, επιστρέφει στο στοιχείο ενεργοποίησης όταν κλείνει, και ότι Esc κλείνει το μενού.

Στις περισσότερες μεγάλες ιστοσελίδες, η λειτουργία αναζήτησης έχει ανασχεδιαστεί ως προσαρμοσμένο στοιχείο — ένα πεδίο εισαγωγής κειμένου με αντι-αναπήδηση που στέλνει ένα αίτημα σε κάθε πάτημα πλήκτρου και εμφανίζει μια πλωτή λίστα προτάσεων μέσα σε ένα στοιχείο με απόλυτη τοποθέτηση <div>. Η ίδια η εισαγωγή κειμένου συνήθως λειτουργεί κανονικά. Η λίστα προτάσεων, όμως, σχεδόν ποτέ δεν λειτουργεί σωστά. Εμφανίζεται εκτός του πλαισίου DOM του πεδίου εισαγωγής, δεν έχει role="listbox", όχι aria-activedescendant, και δεν εμφανίζεται καμία ειδοποίηση για τη ζωντανή περιοχή όταν εμφανίζονται τα αποτελέσματα. Ένας χρήστης προγράμματος ανάγνωσης οθόνης πληκτρολογεί, δεν ακούει τίποτα, πατά το πλήκτρο Enter και βλέπει μια σελίδα αποτελεσμάτων που δεν γνώριζε ότι τον περίμενε.

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

Χρησιμοποιήστε το καθιερωμένο πρότυπο WAI-ARIA για τα αναπτυσσόμενα μενού: role="combobox" στην είσοδο με aria-expanded, aria-controls, και aria-activedescendant συνδεδεμένο με ένα role="listbox" προτάσεων. Προσθέστε μια ευέλικτη ζωντανή περιοχή που να εμφανίζει τον αριθμό των αποτελεσμάτων. Βεβαιωθείτε ότι η λίστα προτάσεων είναι προσβάσιμη με το πλήκτρο του κάτω βέλους και όχι μόνο με το ποντίκι.

Το πλέγμα PLP συγκεντρώνει διάφορα αντιπαραδείγματα σε μία οθόνη. Κάθε πλακίδιο είναι συνήθως μια κάρτα στην οποία μπορεί κανείς να κάνει κλικ και περιλαμβάνει τρία ή τέσσερα διαδραστικά υποστοιχεία — σύνδεσμο εικόνας, σύνδεσμο τίτλου, δείγματα χρωμάτων, κουμπί γρήγορης προσθήκης — τα οποία περικλείονται σε έναν άλλο σύνδεσμο προς τη σελίδα του προϊόντος. Το αποτέλεσμα είναι ένθετα διαδραστικά στοιχεία (ένα σφάλμα HTML), περιττό κείμενο συνδέσμων («Hero Dash Three Graphic Image Link» που επαναλαμβάνεται τέσσερις φορές) και δείγματα χρωμάτων που δημιουργούνται από <div> στοιχεία με χειριστές κλικ, αλλά χωρίς ρόλο και χωρίς όνομα.

Η πλευρική στήλη φίλτρων προσθέτει μια δεύτερη κατηγορία σφαλμάτων. Οι επιλογές φίλτρων είναι συνήθως λίστες με πλαίσια επιλογής, αλλά δημιουργούνται με προσαρμοσμένα στοιχεία div και span, τα οποία έχουν διαμορφωθεί έτσι ώστε να μοιάζουν με πλαίσια επιλογής, ενώ το πραγματικό <input> κρυμμένο εκτός οθόνης. Όταν αυτή η κρυφή εισαγωγή χάσει τη σύνδεσή της — μέσω ενός κανόνα CSS, ενός χειριστή συμβάντων JavaScript που απορροφά τα πατήματα του πλήκτρου διαστήματος ή ενός ελλείποντος for ιδιότητα στην ορατή ετικέτα — το φίλτρο λειτουργεί πλέον μόνο με το ποντίκι.

Χρησιμοποιήστε ένα σύνδεσμο ανά πλακίδιο με περιγραφικό κείμενο, και όχι τρεις συνδέσμους ανά προϊόν. Απεικονίστε τα δείγματα χρωμάτων όπως στην πραγματικότητα <button> στοιχεία μέσα σε ένα role="radiogroup". Δημιουργήστε πτυχές φίλτρου με βάση τα πραγματικά <input type="checkbox"> στοιχεία με συσχετιζόμενα <label> ετικέτες; Διαμορφώστε οπτικά τα πεδία εισαγωγής αντί να τα κρύβετε. Ενημερώστε για τις αλλαγές στο φίλτρο με μια ευγενική ζωντανή περιοχή.

Στη σελίδα λεπτομερειών προϊόντος, ο χρήστης ενός προγράμματος ανάγνωσης οθόνης πρέπει να κάνει διάφορες συγκεκριμένες επιλογές με τη σωστή σειρά: να επιλέξει χρώμα, να επιλέξει μέγεθος, να ορίσει την ποσότητα και, τέλος, να προσθέσει το προϊόν στο καλάθι. Κάθε μία από αυτές τις επιλογές υλοποιείται στο σύγχρονο ηλεκτρονικό εμπόριο ως προσαρμοσμένο widget — συνήθως μια οριζόντια σειρά από <button>σε σχήμα <div>Όσον αφορά τα μεγέθη, πλακίδια χρώματος που δημιουργούνται από στοιχεία div με στυλ CSS, καθώς και ένα αριθμητικό κουμπί ρύθμισης που αποτελείται από δύο κουμπιά εικονιδίων που πλαισιώνουν ένα πεδίο εισαγωγής. Τα κουμπιά αύξησης και μείωσης διατίθενται συνήθως χωρίς προσβάσιμο όνομα· οι καταγγελίες τα περιγράφουν ως που ανακοινώθηκε ως «button, button» χωρίς καμία ένδειξη για το τι κάνουν.

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

Χρησιμοποιήστε πραγματικά στοιχεία ελέγχου φόρμας. Τα δείγματα χρωμάτων και οι επιλογείς μεγέθους θα πρέπει να είναι role="radiogroup" από role="radio" κουμπιά (ή πραγματικές επιλογές ραδιοκουμπιών με αόρατο στυλ), το καθένα με ένα προσβάσιμο όνομα όπως «Μέγεθος: Μεσαίο». Ο ρυθμιστής ποσότητας πρέπει να είναι ένα πεδίο εισαγωγής αριθμού με ετικέτα, με ζεύγη κουμπιών αύξησης/μείωσης, των οποίων τα προσβάσιμα ονόματα περιλαμβάνουν τη δράση και την τρέχουσα ποσότητα. Περιβάλλετε ολόκληρο το μπλοκ επιλογών σε ένα fieldset με λεζάντα.

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

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

Περιβάλλετε την περιοχή cart-status με aria-live="polite" και να ενημερώνει το κείμενό του κάθε φορά που η προσθήκη ολοκληρώνεται με επιτυχία. Εάν ο σχεδιασμός χρησιμοποιεί ένα παράθυρο επιβεβαίωσης, μεταφέρετε την εστίαση στο παράθυρο αυτό όταν ανοίγει και επαναφέρετε την εστίαση στο αρχικό κουμπί όταν κλείνει. Ενημερώστε την ένδειξη του αριθμού των προϊόντων στο καλάθι με μια ανακοίνωση που προορίζεται αποκλειστικά για προγράμματα ανάγνωσης οθόνης, όπως «Προστέθηκε 1 προϊόν. Σύνολο καλαθιού: 3 προϊόντα».

Τα στοιχεία ελέγχου που αποτελούνται αποκλειστικά από εικονίδια παρουσιάζουν προβλέψιμα προβλήματα: το ορατό περιεχόμενο είναι ένα SVG ή ένα γλυφικό γραμματοσειράς εικονιδίων, το προσβάσιμο περιεχόμενο είναι κενό, ενώ η έξοδος του προγράμματος ανάγνωσης οθόνης περιορίζεται στον δομικό ρόλο του στοιχείου χωρίς όνομα. Το εικονίδιο του καλαθιού καταλήγει να ανακοινώνεται ως «σύνδεσμος» ή «συμπτυγμένο», το μπαλόνι συνομιλίας ως «κουμπί» και η σειρά των εικονιδίων κοινωνικών δικτύων στο υποσέλιδο ως «σύνδεσμος, σύνδεσμος, σύνδεσμος, σύνδεσμος, σύνδεσμος». Ο χρήστης δεν έχει κανέναν τρόπο να γνωρίζει τι κάνει το καθένα από αυτά.

Τα εικονίδια καλαθιού εμφανίζουν προβλήματα συχνότερα από άλλα εικονίδια για έναν αρχιτεκτονικό λόγο: σε πολλές υλοποιήσεις, ο αριθμός των προϊόντων στο καλάθι εμφανίζεται μέσα στο προσβάσιμο όνομα του εικονιδίου (π.χ. το εικονίδιο εμφανίζει το «0» μέσα στο SVG) και το πρόγραμμα ανάγνωσης οθόνης ανιχνεύει μόνο τον αριθμό. Σύμφωνα με αναφορές, το εικονίδιο του καλαθιού αναγγέλλεται ως «3, σύνδεσμος» ή «0, σύνδεσμος», χωρίς καμία ένδειξη ότι το «3» αναφέρεται στην ποσότητα των προϊόντων στο καλάθι αγορών.

Κάθε στοιχείο ελέγχου που αποτελείται αποκλειστικά από εικονίδιο πρέπει να έχει ένα προσβάσιμο όνομα. Προσθέστε ένα aria-label πάνω στο κουμπί ή να τοποθετήσετε μια ετικέτα κειμένου που δεν είναι ορατή μέσα σε αυτό: "Shopping cart, 3 items". Αποφύγετε να συμπεριλαμβάνετε αριθμούς μέσα στο προσβάσιμο όνομα του εικονιδίου χωρίς να παρέχετε το κατάλληλο πλαίσιο. Για διακοσμητικά εικονίδια που εμφανίζονται δίπλα σε ορατό κείμενο, χρησιμοποιήστε aria-hidden="true" κάντε κλικ στην εικόνα και αφήστε το κείμενο να λειτουργήσει ως ετικέτα.

Η σελίδα ολοκλήρωσης αγοράς συγκεντρώνει μεγαλύτερο κίνδυνο μη συμμόρφωσης ανά εικονοστοιχείο από οποιαδήποτε άλλη σελίδα σε έναν ιστότοπο ηλεκτρονικού εμπορίου, ενώ τα σφάλματα εμφανίζονται συχνά. Τα αναπτυσσόμενα μενού διευθύνσεων εμφανίζονται ως προσαρμοσμένα <div> στοιχεία που αγνοούν το πλήκτρο διαστήματος. Οι ενδείξεις υποχρεωτικών πεδίων εμφανίζονται μόνο ως κόκκινος αστερίσκος, χωρίς aria-required και χωρίς προγραμματιστική σύνδεση. Ενσωματωμένα μηνύματα σφάλματος που εμφανίζονται με κόκκινο κείμενο κάτω από το πεδίο, χωρίς aria-describedby σύνδεση του πεδίου με το σφάλμα και απουσία ειδοποίησης στην ενεργή περιοχή όταν αποτυγχάνει η επικύρωση. Ο χρήστης συμπληρώνει τη φόρμα, πατά το κουμπί «Συνέχεια», επιστρέφει αθόρυβα στην προηγούμενη σελίδα και δεν έχει κανέναν τρόπο να γνωρίζει ποια πεδία παρουσίασαν σφάλμα ή για ποιο λόγο.

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

Χρησιμοποιήστε πραγματικά <label> στοιχεία που αντιστοιχούν στις εισόδους μέσω for/id. Σημειώστε τα υποχρεωτικά πεδία με aria-required="true" και να υποδεικνύετε την απαίτηση με ορατό κείμενο, όχι μόνο με χρώμα. Σε περίπτωση αποτυχίας της επικύρωσης, εμφανίστε το μήνυμα σφάλματος μέσα στο πεδίο εισαγωγής aria-describedby στόχος, δώστε το πεδίο που παρουσιάζει σφάλμα aria-invalid="true", και μετακινήστε την εστίαση του πληκτρολογίου στο πρώτο πεδίο με σφάλμα. Δημιουργήστε μια περιοχή συνοπτικής εμφάνισης σφαλμάτων στο πάνω μέρος της φόρμας με συνδέσμους προς κάθε πεδίο που παρουσιάζει σφάλμα.

Το πλαίσιο πληρωμής είναι ασυνήθιστο, καθώς συχνά εμφανίζεται μέσω ενός ενσωματωμένου iframe τρίτου μέρους — Stripe Elements, Braintree Hosted Fields, Adyen drop-in. Μέσα στο iframe, η φόρμα του ίδιου του παρόχου πληρωμών είναι συνήθως σαφώς επισημασμένη. Όμως, τη στιγμή που ένας ιστότοπος δημιουργεί τη δική του λειτουργία καταχώρισης καρτών ή περιβάλλει τα ενσωματωμένα πεδία σε προσαρμοσμένη διάταξη που αντικαθιστά τις ετικέτες με οπτικά σύμβολα κράτησης θέσης, τα τέσσερα πεδία — αριθμός, ημερομηνία λήξης, CVV, ταχυδρομικός κώδικας — μετατρέπονται σε μια σειρά κενών πεδίων εισαγωγής για ένα πρόγραμμα ανάγνωσης οθόνης.

Το πεδίο CVV είναι αυτό που παρουσιάζει τις περισσότερες περιπτώσεις λανθασμένης επισήμανσης, καθώς οι σχεδιαστές αντικαθιστούν συνήθως την ετικέτα του με ένα εικονίδιο ερωτηματικού που ανοίγει ένα αναδυόμενο παράθυρο με εξήγηση για το τι είναι το CVV. Το αναδυόμενο παράθυρο δεν αποτελεί την ετικέτα· το πεδίο εξακολουθεί να χρειάζεται ένα προγραμματιστικό όνομα. Όταν δεν διαθέτει τέτοιο όνομα, το πρόγραμμα ανάγνωσης οθόνης αναγγέλλει ολόκληρο το τμήμα πληρωμής ως «επεξεργασία, επεξεργασία, επεξεργασία, επεξεργασία» και η συναλλαγή διακόπτεται.

Εάν χρησιμοποιείτε ενσωμάτωση πεδίων που φιλοξενούνται από τρίτους, ακολουθήστε τις οδηγίες προσβασιμότητας του προμηθευτή — οι περισσότεροι παρέχουν έναν τεκμηριωμένο τρόπο για την επισήμανση πεδίων εκτός του iframe. Εάν δημιουργείτε προσαρμοσμένη λειτουργία καταχώρισης καρτών, κάθε πεδίο εισαγωγής χρειάζεται ένα πραγματικό <label> στοιχείο με ορατή ετικέτα κειμένου, καθώς και autocomplete="cc-number" / cc-exp" / cc-csc" χαρακτηριστικά, ώστε οι διαχειριστές κωδικών πρόσβασης και οι τεχνολογίες υποβοήθησης να μπορούν να αναγνωρίζουν τα πεδία ανάλογα με τη χρήση τους.

Στη σελίδα του καλαθιού επαναλαμβάνεται το πρόβλημα με το κουμπί ρύθμισης ποσότητας της σελίδας λεπτομερειών προϊόντος (PDP), αλλά με μεγαλύτερο διακύβευμα: ένας χρήστης προγράμματος ανάγνωσης οθόνης που δεν μπορεί να χειριστεί το κουμπί αυτό δεν μπορεί να ολοκληρώσει την παραγγελία. Το κουμπί «Κατάργηση» αποτελεί από μόνο του ένα αντιπαράδειγμα — συνήθως είναι ένα μικρό εικονίδιο «×» δίπλα σε κάθε στοιχείο της παραγγελίας, συχνά χωρίς ορατό κείμενο, χωρίς aria-label, και δεν υπάρχει καμία ειδοποίηση όταν η σειρά διαγράφεται. Ο χρήστης πατάει αυτό που πιστεύει ότι είναι το κουμπί διαγραφής, η σειρά εξαφανίζεται, και το πρόγραμμα ανάγνωσης οθόνης δεν λέει τίποτα. Δεν υπάρχει τρόπος να επιβεβαιωθεί ότι η ενέργεια ολοκληρώθηκε με επιτυχία.

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

Κάθε στοιχείο της λίστας θα πρέπει να διαθέτει ένα κουμπί διαγραφής με ετικέτα (π.χ., "Remove Blue T-Shirt, size M, from cart"). Τα στοιχεία κύλισης ποσότητας θα πρέπει να αναφέρουν την τρέχουσα τιμή τους ως μέρος του προσβάσιμου ονόματος ή μέσω αντιστοιχισμένων ενημερώσεων ζωνών ελέγχου. Το υποσύνολο του καλαθιού θα πρέπει να βρίσκεται μέσα σε ένα aria-live="polite" περιοχή, ώστε να ανακοινώνονται οι αλλαγές. Επιβεβαιώστε τις διαγραφές με τη δυνατότητα αναίρεσης.

Αυτή είναι η μεγαλύτερη κατηγορία στο σύνολο δεδομένων, καθώς αποτελεί το πρόβλημα με το χαμηλότερο κόστος ανίχνευσης και το υψηλότερο κόστος αγνόησης. Ένα πρόγραμμα ανάγνωσης οθόνης περιηγείται στο DOM, συναντά ένα <input>, και διαβάζει το προσβάσιμο όνομά του — το οποίο υπολογίζει με βάση, κατά σειρά: aria-labelledby, aria-label, μια συνδεδεμένη <label for>, το title το χαρακτηριστικό ή το σύμβολο κράτησης θέσης. Εάν δεν υπάρχει κανένα από τα δύο, το πρόγραμμα ανάγνωσης οθόνης αναγγέλλει μόνο τον ρόλο: «πεδίο επεξεργασίας» ή «επεξεργασία, κενό». Αυτή η φράση, σχεδόν κατά λέξη, επαναλαμβάνεται σε εκατοντάδες καταγεγραμμένες καταγγελίες.

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

Κάθε διαδραστικό στοιχείο ελέγχου διαθέτει μια ορατή ετικέτα, η οποία συνδέεται μέσω κώδικα. <label for="email">Email</label><input id="email" type="email"> αποτελεί το τυπικό πρότυπο. Οι θέσεις κράτησης είναι συμπληρωματικές υποδείξεις, όχι υποκατάστατα. Για στοιχεία ελέγχου όπου η ορατή ετικέτα είναι πραγματικά ανεπιθύμητη (πεδία αναζήτησης, κουμπιά με εικονίδια), χρησιμοποιήστε aria-label με περιγραφικό κείμενο — ποτέ με το σύμβολο κράτησης θέσης να επαναλαμβάνεται.

Η φράση «δεν ανακοινώθηκε ή δεν δόθηκε εστίαση» εμφανίζεται κατά λέξη σε πάνω από 400 καταχωρήσεις παραπόνων και αποτελεί μία από τις πιο συχνές φράσεις σε ολόκληρο το σύνολο δεδομένων. Περιγράφει έναν συγκεκριμένο τρόπο σφάλματος: ένα αναδυόμενο παράθυρο ή ένας διάλογος εμφανίζεται στη σελίδα (συχνά αυτόματα — εγγραφή σε ενημερωτικό δελτίο, έλεγχος ηλικίας, επιβεβαίωση τοποθεσίας), το ορατό περιεχόμενο αλλάζει, αλλά το πρόγραμμα ανάγνωσης οθόνης δεν λαμβάνει κανένα σήμα ότι κάτι έχει αλλάξει. Η εστίαση παραμένει στην υποκείμενη σελίδα. Ο χρήστης συνεχίζει να περιηγείται με το πλήκτρο Tab σε ό,τι βρισκόταν κάτω από το αναδυόμενο παράθυρο, χωρίς να έχει καθόλου επίγνωση ότι έχει εμφανιστεί ένα παράθυρο διαλόγου που εμποδίζει την πρόσβαση.

Αυτή είναι η κλασική περίπτωση ενός τρόπου που αποτυγχάνει σε όλους τους τομείς ταυτόχρονα: όχι role="dialog", όχι aria-modal="true", δεν υπάρχει προγραμματισμένη αλλαγή εστίασης κατά την εμφάνιση, δεν υπάρχει παγίδευση εστίασης κατά την εμφάνιση, δεν υπάρχει συμπεριφορά κλεισίματος με το πλήκτρο Esc, δεν εμφανίζεται τίτλος. Επειδή όλα αυτά τα προβλήματα εμφανίζονται μαζί, η επιμέρους διόρθωση οποιουδήποτε από αυτά δεν επιφέρει καμία αλλαγή στην κατάσταση του προβλήματος.

Χρησιμοποιήστε ένα καθιερωμένο πρότυπο διαλόγου (η προδιαγραφή «WAI-ARIA Authoring Practices» αποτελεί το σημείο αναφοράς). Κατά το άνοιγμα: μετακινήστε την εστίαση στο πρώτο στοιχείο με δυνατότητα εστίασης εντός του διαλόγου, ορίστε aria-modal="true" και role="dialog", ονομάστε το παράθυρο διαλόγου με aria-labelledby με το δείκτη να βρίσκεται πάνω στον τίτλο του. Όσο είναι ανοιχτό: διατηρήστε την εστίαση εντός του διαλόγου. Κατά το κλείσιμο: επαναφέρετε την εστίαση στο στοιχείο που το ενεργοποίησε. Λειτουργήστε κανονικά με το πλήκτρο Esc. Εάν το παράθυρο διαλόγου διακόπτει μια ροή (π.χ. αυτόματη αναπαραγωγή κατά τη φόρτωση της σελίδας), παρέχετε στον χρήστη έναν μοναδικό τρόπο για να το κλείσει οριστικά.

Οι δείκτες εστίασης συνήθως απενεργοποιούνται σκόπιμα από κάποιον προγραμματιστή ή σχεδιαστή που θεωρούσε το προεπιλεγμένο περίγραμμα του προγράμματος περιήγησης ως οπτικό θόρυβο και έγραψε *:focus { outline: none; } σε ένα φύλλο στυλ. Η σελίδα φαίνεται πλέον πιο καθαρή σε έναν χρήστη με όραση που χρησιμοποιεί ποντίκι. Για έναν χρήστη με όραση που χρησιμοποιεί πληκτρολόγιο — συμπεριλαμβανομένων των περισσότερων χρηστών με προβλήματα όρασης, των χρηστών με κινητικές δυσκολίες και των χρηστών που πλοηγούνται χωρίς ποντίκι — η σελίδα καθίσταται μη λειτουργική. Ο χρήστης μπορεί να πατήσει το πλήκτρο Tab, αλλά δεν μπορεί να δει πού βρίσκεται.

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

Ποτέ μην απενεργοποιείτε γενικά :focus περίγραμμα χωρίς αντικατάσταση. Ορίστε ένα στυλ εστίασης που να ξεχωρίζει — συνήθως ένα περίγραμμα 2-3px με επαρκή αντίθεση τόσο σε σχέση με το στοιχείο όσο και με το φόντο του — χρησιμοποιώντας :focus-visible έτσι ώστε ο δείκτης να εμφανίζεται κατά την πλοήγηση με το πληκτρολόγιο, αλλά όχι όταν κάνετε κλικ με το ποντίκι. Ελέγξτε το σε κάθε διαδραστικό στοιχείο, συμπεριλαμβανομένων των προσαρμοσμένων widget, των συνδέσμων μέσα στις κάρτες και των στοιχείων με tabindex.

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

Η ευρύτερη κατηγορία — εικόνες χωρίς εναλλακτικό κείμενο — περιλαμβάνει εικόνες banner, φωτογραφίες προϊόντων, εικονογραφήσεις κεντρικού περιεχομένου, εικονίδια κοινωνικών δικτύων και τον τεράστιο κατάλογο εικόνων μάρκετινγκ που διαθέτει ένας τυπικός ιστότοπος ηλεκτρονικού εμπορίου. Οι καταγγελίες σε αυτή την κατηγορία συχνά αναφέρουν συγκεκριμένα ονόματα αρχείων εικόνων, υποδηλώνοντας ότι ο εμπειρογνώμονας του ενάγοντος πραγματοποίησε έναν αυτοματοποιημένο έλεγχο που κατέγραψε κάθε εικόνα της οποίας alt το χαρακτηριστικό έλειπε ή ήταν κενό, ενώ θα έπρεπε να είναι περιγραφικό.

Τα λογότυπα πρέπει να περιλαμβάνουν εναλλακτικό κείμενο που να περιγράφει το όνομα της εταιρείας και, αν το λογότυπο παραπέμπει σε κάποιον σύνδεσμο, τον προορισμό — alt="Acme Co. — homepage". Οι διακοσμητικές εικόνες έχουν κενό χαρακτηριστικό alt (alt=""), το οποίο τα αποκρύπτει σκόπιμα από τις τεχνολογίες υποβοήθησης. Οι ενημερωτικές εικόνες πρέπει να συνοδεύονται από περιγραφικό κείμενο εναλλακτικής περιγραφής. Αποφύγετε την αυτόματη δημιουργία κειμένου εναλλακτικής περιγραφής με βάση τα ονόματα αρχείων ή τη χρήση λεζάντων που δημιουργούνται από τεχνητή νοημοσύνη χωρίς ανθρώπινη επιμέλεια· στα αρχεία καταγγελιών αναφέρονται επανειλημμένα περιπτώσεις όπου εργαλεία επικάλυψης περιέγραψαν το λογότυπο μιας εταιρείας ως «μια μπλε και κίτρινη πινακίδα».

Τα προγράμματα ανάγνωσης οθόνης εμφανίζουν μια προβολή «λίστας συνδέσμων», την οποία χρησιμοποιούν εκτενώς οι έμπειροι χρήστες για να «σαρώσουν» μια σελίδα σε δευτερόλεπτα. Αυτή η προβολή εμφανίζει μόνο το κείμενο του συνδέσμου, χωριστά από την παράγραφο που τον περιβάλλει. Μια σελίδα όπου κάθε απόσπασμα blog τελειώνει με «Διαβάστε περισσότερα» εμφανίζεται σε αυτή την προβολή ως δεκαπέντε πανομοιότυπες καταχωρήσεις. Μια σελίδα με πέντε κενές συνδέσεις — <a href="..."></a>, κάτι που συμβαίνει συχνά όταν τα εικονίδια βρίσκονται μέσα σε ετικέτες συνδέσμων χωρίς εναλλακτικό κείμενο — εμφανίζει πέντε κενά.

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

Κάθε σύνδεσμος πρέπει να έχει ένα προσβάσιμο όνομα που να περιγράφει τον προορισμό ή τη δράση του. Αντικαταστήστε τις γενικές φράσεις με περιγραφικές — «Διαβάστε περισσότερα» γίνεται «Διαβάστε περισσότερα για τα αποτελέσματα του τρίτου τριμήνου». Για συνδέσμους που περιέχουν μόνο εικονίδια, προσθέστε κρυφό κείμενο ή ένα aria-label. Εκτελέστε έναν αυτοματοποιημένο έλεγχο (axe, Lighthouse κ.λπ.) για κενά <a> στοιχεία κατά τη διάρκεια της CI.

Τα βίντεο εμφανίζονται στις καταγγελίες με δύο τρόπους. Ο πρώτος είναι προφανής: ένα βίντεο μάρκετινγκ, μια επίδειξη προϊόντος ή ένα επεξηγηματικό βίντεο δημοσιεύεται χωρίς υπότιτλους, μεταγραφή ή οποιαδήποτε εναλλακτική μορφή κειμένου — με αποτέλεσμα ένας επισκέπτης που είναι κωφός ή βαρήκοος να μην μπορεί να έχει πρόσβαση στο περιεχόμενο. Το δεύτερο είναι πιο διακριτικό: ένα βίντεο που αναπαράγεται αυτόματα κατά το φόρτωμα της σελίδας, το οποίο παρεμβαίνει στην έξοδο του προγράμματος ανάγνωσης οθόνης και παραβιάζει τους ελέγχους παύσης/διακοπής που απαιτούνται στο επίπεδο WCAG 2.2 AA (σύμφωνα με το SC 2.2.2 Παύση, Διακοπή, Απόκρυψη για κινούμενο περιεχόμενο και το SC 1.4.2 για οποιοδήποτε ηχητικό υλικό).

Ορισμένες καταγγελίες σε αυτό το σύνολο δεδομένων υποστηρίζουν ότι «η απουσία κλειστών υπότιτλων στα βίντεο του ιστότοπου αποτελεί παραβίαση του ADA», παρουσιάζοντας το ως νομικό συμπέρασμα. Το κατά πόσον ισχύει αυτή η άποψη εξαρτάται από τη δικαιοδοσία και τις περιστάσεις· αυτό που είναι πιο σταθερό είναι ότι τα βίντεο αυτά δεν πληρούν σταθερά τις προδιαγραφές WCAG 2.2 AA, το πρότυπο που τα περισσότερα δικαστήρια και οι συμβιβαστικές συμφωνίες θεωρούν ως το ισχύον κριτήριο συμμόρφωσης.

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

Η διαδικασία σύνδεσης αποτελεί το σημείο ελέγχου για ολόκληρη την εμπειρία πιστοποίησης. Όταν η φόρμα παρουσιάζει σφάλμα, κάθε σελίδα που βρίσκεται πίσω από αυτήν καθίσταται απρόσιτη, και οι αναφορές προβλημάτων συχνά αντιμετωπίζουν αυτή την αλυσιδωτή αντίδραση ως ένα ενιαίο εμπόδιο. Το μοτίβο είναι η ίδια αποτυχία στην επισήμανση της φόρμας όπως στο E·01, συχνά σε συνδυασμό με τρεις συγκεκριμένες υπο-αποτυχίες: ένα κουμπί εναλλαγής «Εμφάνιση κωδικού πρόσβασης» που υλοποιείται ως κουμπί μόνο με εικονίδιο χωρίς όνομα και χωρίς ανακοίνωση αλλαγής κατάστασης, ένα CAPTCHA που εμποδίζει εντελώς τη χρήση του προγράμματος ανάγνωσης οθόνης και ενσωματωμένα σφάλματα («μη έγκυρα διαπιστευτήρια») που εμφανίζονται στην οθόνη αλλά δεν ανακοινώνονται.

Το πλαίσιο επιλογής «Να με θυμάσαι» αποτελεί ένα επιπλέον επαναλαμβανόμενο δευτερεύον σφάλμα: εμφανίζεται ως ένα διαμορφωμένο <div>, με το πραγματικό <input> Επειδή βρίσκεται εκτός οθόνης, το πλαίσιο επιλογής μπορεί να ενεργοποιηθεί με το ποντίκι, αλλά όχι με το πληκτρολόγιο ή με πρόγραμμα ανάγνωσης οθόνης. Ο χρήστης δεν έχει τη δυνατότητα να επιλέξει τη διατήρηση της συνεδρίας.

Χρησιμοποιήστε πραγματικά <input>, <label>, και <button> στοιχεία. Μετατρέψτε το κουμπί εναλλαγής εμφάνισης/απόκρυψης κωδικού πρόσβασης σε πραγματικό κουμπί με προσβάσιμο όνομα που ενημερώνεται ανάλογα με την κατάσταση ("Show password" / "Hide password") και να ανακοινώσετε την αλλαγή με aria-pressed. Να παρέχεται μια προσβάσιμη εναλλακτική λύση αντί των CAPTCHA που βασίζονται σε εικόνες (ηχητικό CAPTCHA ή — κατά προτίμηση — να αντικατασταθεί το CAPTCHA με έλεγχο ταυτότητας βάσει κινδύνου ή με τις προσβάσιμες παραλλαγές του hCaptcha).

Τα προγράμματα ανάγνωσης οθόνης παρουσιάζουν τη σελίδα μέσω τριών τρόπων πλοήγησης: ανά επικεφαλίδα, ανά σημείο αναφοράς και ανά σύνδεσμο. Μια σελίδα που διατίθεται χωρίς <h1>, χωρίς <main>, <nav>, και <footer> ορόσημα, και χωρίς lang="en" ιδιότητα στο <html> το στοιχείο αυτό έχει καταργήσει και τους τρεις τρόπους πλοήγησης ταυτόχρονα. Οι χρήστες δεν έχουν τη δυνατότητα να κάνουν σάρωση, να μεταβούν απευθείας στο περιεχόμενο, ούτε ο αναγνώστης οθόνης μπορεί να φορτώσει τον κατάλληλο μηχανισμό προφοράς.

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

Κάθε σελίδα έχει μία και μόνο μία <h1>, με υποκεφάλαια (<h2>, <h3>) να είναι λογικά ενσωματωμένες. Περιβάλλετε τις περιοχές με στοιχεία ορόσημων HTML5: <header>, <nav>, <main>, <aside>, <footer>. Ρύθμιση lang στη ρίζα <html> στοιχείο. Ελέγξτε την ορθότητα με ένα πρόγραμμα ελέγχου περιγράμματος ή εκτελέστε document.querySelectorAll('h1').length === 1 ως δοκιμή λειτουργίας στο CI.

Το μεγαλύτερο μέρος του ελέγχου ποιότητας για την προσβασιμότητα πραγματοποιείται σε προγράμματα περιήγησης για επιτραπέζιους υπολογιστές με χρήση των NVDA ή JAWS. Οι βοηθητικές τεχνολογίες για κινητά — το VoiceOver στο iOS, το TalkBack στο Android — παρουσιάζουν διαφορετική απόδοση του ίδιου DOM, συχνά με διαφορετικά σφάλματα. Στις καταγγελίες χρησιμοποιείται επανειλημμένα η συντομογραφία «mobile SRU» (χρήστης αναγνώστη οθόνης για κινητά) για να επισημανθούν σφάλματα που είναι μοναδικά στην προβολή για κινητά: ένα μενού τύπου «hamburger» που λειτουργεί με το NVDA σε επιτραπέζιο υπολογιστή αλλά δεν λειτουργεί με το VoiceOver, ένα κουμπί Apple Pay που είναι προσβάσιμο σε φορητό υπολογιστή αλλά όχι στην αντίστοιχη σελίδα για iPhone, μηνύματα σφάλματος που εμφανίζονται σε επιτραπέζιο υπολογιστή αλλά όχι σε κινητό.

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

Δοκιμάστε τουλάχιστον με το VoiceOver στο Safari για iOS και το TalkBack στο Chrome για Android, ακολουθώντας τις ίδιες ροές που καλύπτει ο έλεγχος ποιότητας για υπολογιστές. Δώστε ιδιαίτερη προσοχή στις αλληλεπιδράσεις που βασίζονται σε χειρονομίες, στα εγγενή κουμπιά πληρωμής και στην αναγγελία των πεδίων φόρμας όταν εστιάζετε σε αυτά. Εάν υπάρχει εγγενής εφαρμογή, υποβάλετέ την στον ίδιο έλεγχο — τα παράπονα συχνά αφορούν τόσο τον ιστό όσο και την εφαρμογή στο πλαίσιο της ίδιας υπόθεσης.

Το overlay προσβασιμότητας είναι το μοναδικό παράδειγμα σε αυτόν τον κατάλογο όπου το πρόβλημα δεν βρίσκεται καθόλου στον υποκείμενο ιστότοπο — βρίσκεται στο υποτιθέμενο επίπεδο διόρθωσης που προστέθηκε για να το επιλύσει. Οι καταγγελίες αυτής της κατηγορίας περιγράφουν δύο διακριτά προβλήματα. Το πρώτο είναι ότι τα overlays δεν επιλύουν στην πραγματικότητα τα υποκείμενα εμπόδια, με αποτέλεσμα ο χρήστης να αντιμετωπίζει τα ίδια προβληματικά αναδυόμενα παράθυρα, φόρμες με λανθασμένες ετικέτες και μη προειδοποιημένα σφάλματα, ανεξάρτητα από το αν το widget είναι ενεργό. Το δεύτερο είναι πιο συγκεκριμένο: οι επικαλύψεις μερικές φορές εισάγουν νέα σφάλματα εισάγοντας λανθασμένες ετικέτες, εφαρμόζοντας λανθασμένα ρόλους ARIA ή παρεμβαίνοντας στη διαμόρφωση της βοηθητικής τεχνολογίας του ίδιου του χρήστη.

Μια λεπτομέρεια που αξίζει να σημειωθεί: στις καταγγελίες του 2024 και του 2025 αναφέρεται όλο και πιο συχνά το όνομα του προμηθευτή του overlay. Σε δύο συγκεκριμένα αποσπάσματα καταγγελιών αναφέρονται ρητά οι εταιρείες UserWay και AccessiBe, ενώ οι πρόσφατες ενέργειες της FTC έχουν δημιουργήσει τον σαφή κίνδυνο ότι η προσθήκη ενός overlay αποτελεί από μόνη της απόδειξη αποτυχίας στην πραγματική εφαρμογή διορθωτικών μέτρων — και όχι μέσο άμυνας έναντι δικαστικών διεκδικήσεων.

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