Αναχαιτίσαμε κάθε αίτημα από πέντε εργαλεία προσβασιμότητας. Δείτε τι κάνουν στην πραγματικότητα στον ιστότοπό σας.

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

Πώς το κάναμε: Η μεθοδολογία της έρευνας

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

Η τεχνική εγκατάσταση

Εγκαταστήσαμε το mitmproxy – έναν διακομιστή μεσολάβησης HTTPS ανοιχτού κώδικα – ρυθμισμένο ώστε να καταγράφει το πλήρες κείμενο των αιτήσεων και των απαντήσεων για όλη την κίνηση προς τους τομείς CDN και API των εργαλείων. Εγκαταστήσαμε το πιστοποιητικό ριζικής αρχής πιστοποίησης (root CA) του διακομιστή μεσολάβησης στον περιηγητή, ώστε να επιτρέψουμε τη διαφανή παρακολούθηση HTTPS, και στη συνέχεια ξεκινήσαμε μια ειδική εφαρμογή του Chrome που δρομολογείται αποκλειστικά μέσω του διακομιστή μεσολάβησης. Ρυθμίσαμε φίλτρα τομέων ώστε να καταγράφουν μόνο την κίνηση προς τους διακομιστές των εργαλείων προσβασιμότητας – διασφαλίζοντας ότι αναλύαμε μόνο τα στοιχεία που εισάγουν αυτά τα εργαλεία, και όχι την ίδια την κίνηση των ιστότοπων.

Στη συνέχεια, περιηγηθήκαμε σε 14 ενεργούς ιστότοπους ηλεκτρονικού εμπορίου όπως θα έκανε ένας κανονικός χρήστης: φορτώνοντας την αρχική σελίδα, μεταβαίνοντας σε σελίδες καταλόγου προϊόντων, προβάλλοντας σελίδες λεπτομερειών προϊόντων, προσθέτοντας προϊόντα στο καλάθι, προχωρώντας στο ταμείο, επισκεπτόμενοι σελίδες λογαριασμού και εγγραφής, και αλληλεπιδρώντας με αναδυόμενα παράθυρα, καρουζέλ και τη λειτουργία αναζήτησης. Κάθε συνεδρία περιήγησης καταγράφηκε ως αρχείο HTTP Archive (HAR) με πλήρη σώματα απόκρισης – την ίδια μορφή που χρησιμοποιούν εσωτερικά τα προγράμματα περιήγησης, αλλά εμπλουτισμένη με το πραγματικό περιεχόμενο κάθε αρχείου JavaScript, κάθε φύλλου στυλ CSS, κάθε διαμόρφωσης JSON και κάθε απόκρισης API που παρείχαν τα εργαλεία.

Μετά τη συλλογή των δεδομένων, δημιουργήσαμε σενάρια ανάλυσης σε Python που ανέλυαν το σώμα κάθε απόκρισης, ταξινόμησαν κάθε αρχείο ανά εργαλείο και λειτουργία, εξήγαγαν κάθε επιλογέα CSS από τους ορισμούς των διορθώσεων, μέτρησαν κάθε μοτίβο χειρισμού του DOM στον κώδικα JavaScript, εντόπισαν κάθε περίπτωση περιεχομένου που ήταν κρυμμένο από τις τεχνολογίες υποβοήθησης και αντιστοίχισαν κάθε διόρθωση με την περιοχή της σελίδας στην οποία επηρεάζει (ολοκλήρωση αγοράς, καλάθι, λίστα προϊόντων, πλοήγηση κ.λπ.).

Ο διακομιστής μεσολάβησης κατέγραψε 924 αιτήσεις HTTP με 579 πλήρη σώματα απαντήσεων σε τρεις περιόδους καταγραφής – συμπεριλαμβανομένων όλων των σεναρίων διόρθωσης ανά ιστότοπο, όλων των αρχείων JSON αποκατάστασης, όλων των αρχείων διαμόρφωσης και όλων των δεδομένων ανάλυσης. Αποθηκεύσαμε επίσης πλήρη στιγμιότυπα DOM σελίδων με εφαρμοσμένες τροποποιήσεις επικάλυψης, επιτρέποντάς μας να επιθεωρήσουμε τις ακριβείς τιμές aria-label και τα χαρακτηριστικά δεδομένων προμηθευτή που εισάγονται κατά την εκτέλεση. Στη συνέχεια, γράψαμε αυτοματοποιημένα σενάρια ανάλυσης για να αναλύσουμε το JavaScript, να μετρήσουμε κάθε μοτίβο τροποποίησης DOM, να εξαγάγουμε κάθε επιλογέα CSS, να ταξινομήσουμε κάθε διόρθωση ανά περιοχή σελίδας και να προσδιορίσουμε κάθε περίπτωση περιεχομένου που κρύβεται από την τεχνολογία υποβοήθησης.

Τι αναλύσαμε

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

Μια σημαντική παρατήρηση: Δεν υπάρχει οριοθέτηση σε επίπεδο σελίδας σε καμία επικάλυψη προσβασιμότητας

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

Αυτό σημαίνει ότι στον ιστότοπο του παρόχου τηλεπικοινωνιών, κάθε επισκέπτης σε κάθε σελίδα κατεβάζει ένα αρχείο JSON 1,25 MB που περιέχει 4.974 περιγραφές εικόνων και 2.000 καταχωρήσεις διόρθωσης PDF – ακόμη και σε σελίδες που δεν περιέχουν καμία εικόνα. Στον ιστότοπο του λιανοπωλητή τσαντών σχεδιαστών, 383 κανόνες διόρθωσης DOM εκτελούνται σε κάθε φόρτωση σελίδας, προσπαθώντας να αντιστοιχίσουν επιλογείς που υπάρχουν μόνο σε συγκεκριμένους τύπους σελίδων. Όταν ένας επιλογέας ειδικός για το ταμείο, όπως το #cardNumber, δεν αντιστοιχεί στην αρχική σελίδα, ο μηχανισμός διόρθωσης της επικάλυψης εξακολουθεί να καταναλώνει κύκλους CPU για την αξιολόγησή του – πολλαπλασιαζόμενο σε εκατοντάδες κανόνες, αυτό δημιουργεί μετρήσιμη σπατάλη απόδοσης σε κάθε προβολή σελίδας.

Η επικάλυψη Α καλύπτει μόνο το 4,5% των περιόδων σύνδεσης

Αναλύοντας τα δεδομένα POST του Overlay A, ανακαλύψαμε ένα πεδίο που αποκαλύπτει τον πραγματικό ρυθμό δειγματοληψίας σάρωσης:

Ένα ποσοστό δειγματοληψ ίας 0,045 σημαίνει ότι μόνο το 4,5% των επισκέψεων ενεργοποιεί έλεγχο συμμόρφωσης σε αυτόν τον λιανοπωλητή μόδας. Σε έναν άλλο ιστότοπο – μια μάρκα πολυτελών σοκολατών – το ποσοστό ήταν ακόμη χαμηλότερο: μόλις 1,7%. Είναι πιθανό ο πάροχος της εφαρμογής overlay να πραγματοποιεί έναν πιο ολοκληρωμένο αρχικό έλεγχο κατά την ενσωμάτωση ή τη ρύθμιση και στη συνέχεια να μειώνει το ποσοστό δειγματοληψίας για τη συνεχή παρακολούθηση. Ωστόσο, οι επιπτώσεις στις καθημερινές λειτουργίες παραμένουν σημαντικές.

Ο κώδικας του πακέτου εκκίνησης της επικάλυψης προσβασιμότητας επιβεβαιώνει τρία επίπεδα λειτουργίας: ReleaseVersionReport (πλήρης σάρωση + αναφορά – το ποσοστό δειγματοληψίας), ShadowVersionReport (σάρωση «σκιά», χωρίς ορατή ενέργεια για τον χρήστη) και RunReleaseFixesNoReport (εφαρμογή όλων των κανόνων διόρθωσης χωρίς καμία σάρωση). Αυτό σημαίνει ότι κατά τη διάρκεια της κανονικής λειτουργίας, η συντριπτική πλειοψηφία των επισκεπτών σας λαμβάνει τροποποιήσεις στο DOM που δεν επικυρώνονται κατά τη διάρκεια της περιόδου σύνδεσής τους.

Ο πρακτικός κίνδυνος είναι ο εξής: αν μια ενημέρωση του ιστότοπου αλλάξει τη δομή του DOM και παραβιάσει έναν ή περισσότερους κανόνες διόρθωσης, ο χαμηλός ρυθμός δειγματοληψίας σημαίνει ότι η παλινδρόμηση ενδέχεται να παραμείνει απαρατήρητη για μεγάλο χρονικό διάστημα. Καθώς ελέγχεται μόνο το 1,7–4,5% των περιόδων σύνδεσης, μια ελαττωματική διόρθωση θα μπορούσε να επηρεάσει χιλιάδες επισκέπτες πριν η επόμενη δειγματοληπτική περίοδος σύνδεσης ενεργοποιηθεί τυχαία στη συγκεκριμένη σελίδα και επισημάνει το πρόβλημα. Κατά τη διάρκεια αυτού του χρονικού διαστήματος, κάθε επισκέπτης λαμβάνει παρωχημένες ή λανθασμένα στοχευμένες διορθώσεις – και ούτε ο διαχειριστής του ιστότοπου ούτε ο προμηθευτής της επικάλυψης ενδέχεται να έχουν επίγνωση του προβλήματος.

Τα ευρήματα: Διόρθωση κανόνων και τροποποιήσεων του DOM

Επίστρωμα Α: Αρχεία διόρθωσης JavaScript ανά ιστότοπο

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

Διαπιστώσαμε επίσης ότι 7 περιπτώσεις όπου η συμβολοσειρά "true" χορηγήθηκε ως aria-label – ένα σφάλμα στον κώδικα, όπου μεταβιβάστηκε μια λογική τιμή αντί για περιγραφικό κείμενο. Τα προγράμματα ανάγνωσης οθόνης αναγγέλλουν «κουμπί, true» – κάτι εντελώς ακατανόητο. Σε έναν άλλο ιστότοπο, η λέξη «Search» είχε γραφτεί λανθασμένα ως «Seacrh» σε μια ετικέτα που είχε εισαχθεί.

Επίστρωση Β: Εναλλακτικό κείμενο που δημιουργείται από τεχνητή νοημοσύνη σε μεγάλη κλίμακα

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

Πραγματικά παραδείγματα από τα δεδομένα αποκατάστασης:

323 περιγραφές ξεπέρασαν τους 125 χαρακτήρες – με αποτέλεσμα οι αναγνώστες οθόνης να αναλύουν λεπτομερώς το περιεχόμενο, με τον αναγνώστη να διαβάζει μονότονα για 10–15 δευτερόλεπτα ανά εικόνα. 156 ξεκινούσαν περιττά με τη φράση «εικόνα του» – κάτι που αποτελεί αντιπρότυπο σύμφωνα με τις WCAG, καθώς οι αναγνώστες οθόνης αναφέρουν ήδη τον τύπο του στοιχείου.

Εργαλείο παρακολούθησης: Καμία τροποποίηση – επαληθευμένο στον πηγαίο κώδικα

Τι σημαίνει η επιλογή «Απόκρυψη από το AT» για τους πραγματικούς χρήστες

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

Δεδομένα από πραγματικά αρχεία διόρθωσης active.js ανά ιστότοπο, τα οποία εξήχθησαν μέσω του mitmproxy. Κάθε αριθμός αντιπροσωπεύει έναν μοναδικό επιλογέα CSS στον οποίο στοχεύει η συνάρτηση hideFromAT().

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

Έτσι, τα εργαλεία επικάλυψης προσβασιμότητας δημιουργούν μια εμπειρία αγορών δύο επιπέδων: οι χρήστες με όραση βλέπουν όλες τις επιλογές πληρωμής και μπορούν να επιλέξουν μεταξύ πιστωτικής κάρτας, PayPal, Amazon Pay, Shop Pay και Klarna. Οι τυφλοί χρήστες μπορούν να βρουν μόνο τις μεθόδους πληρωμής που δεν έκρυψε η επικάλυψη. Σε έναν ιστότοπο λιανικής πώλησης ειδών μόδας, τόσο το πεδίο εισαγωγής της ποσότητας στο καλάθι όσο και το κουμπί ενημέρωσης ήταν κρυμμένα – ένας τυφλός χρήστης μπορούσε να προσθέσει προϊόντα, αλλά δεν μπορούσε να αλλάξει τις ποσότητες.

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

Επίδραση στην απόδοση

Τι συμβαίνει μετά την ανάπτυξη ενός ιστότοπου

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

Για να το καταλάβετε αυτό, σκεφτείτε πώς κάθε τύπος επικάλυψης συνδέεται με τη δομή DOM του ιστότοπού σας.

Διορθώσεις με βάση τον επιλογέα: Ο χρόνος τρέχει

Το Overlay A – όπως και οι περισσότερες λύσεις επικάλυψης για προσβασιμότητα – διατηρεί αρχεία διόρθωσης JavaScript για κάθε ιστότοπο, τα οποία περιέχουν κανόνες όπως ο παρακάτω (ανακατασκευασμένος από τον πραγματικό κώδικα που καταγράφηκε):

Αυτός ο κανόνας στοχεύει το κουμπί «προηγούμενο» ενός καρουζέλ Slick χρησιμοποιώντας τρεις κλάσεις CSS: .js-recommendation_carousel, .slick-prev, και .slick-arrow. Κάθε στοιχείο αυτού του επιλογέα είναι ευάλωτο. Αν η ομάδα του ιστότοπου μετονομάσει την κλάση του κοντέινερ του καρουζέλ, αντικαταστήσει το Slick με το Splide ή το Swiper, ή απλώς ενημερώσει τη βιβλιοθήκη Slick σε μια έκδοση που αλλάζει τη σύμβαση ονοματολογίας των κλάσεων της – ο επιλογέας δεν θα αντιστοιχεί σε τίποτα. Το κουμπί χάνει την ετικέτα «Προηγούμενη διαφάνεια». Οι χρήστες προγραμμάτων ανάγνωσης οθόνης δεν μπορούν πλέον να το αναγνωρίσουν.

Στις πέντε τοποθεσίες που αναλύσαμε για την επικάλυψη Α, διαπιστώσαμε ότι Το 98% όλων των επιλογέων περιέχει ονόματα κλάσεων που αφορούν συγκεκριμένα πλαίσια – μαθήματα με πρόθεμα .js-, .b-, .chakra-, .splide__, ή κατακερματισμούς CSS-in-JS όπως .css-acuo7n. Αυτά δεν είναι σταθεροί, σημασιολογικοί προσδιοριστές – πρόκειται για λεπτομέρειες υλοποίησης που αλλάζουν με κάθε ενημέρωση του πλαισίου, αναδιαμόρφωση στοιχείου ή τροποποίηση του συστήματος κατασκευής.

Σε έναν συγκεκριμένο λιανοπωλητή σχεδιαστικών τσαντών, εντοπίσαμε επιλογείς που στοχεύουν στοιχεία του Chakra UI. Το Chakra UI κυκλοφορεί σημαντικές αλλαγές στις κύριες εκδόσεις του – τα ονόματα των κλάσεων, η δομή των στοιχείων και τα πρότυπα ARIA εξελίσσονται. Όταν ο ιστότοπος αυτός αναβαθμίσει το Chakra, ενδεχομένως εκατοντάδες κανόνες διόρθωσης επικάλυψης θα σταματήσουν να λειτουργούν χωρίς προειδοποίηση. Ο προμηθευτής του overlay πρέπει τότε να ελέγξει χειροκίνητα τη νέα δομή DOM, να ξαναγράψει κάθε επιλεκτή που επηρεάζεται και να αναπτύξει ενημερωμένα αρχεία διόρθωσης. Κατά τη διάρκεια του χρονικού διαστήματος μεταξύ της ανάπτυξης του ιστότοπου και της ενημέρωσης του προμηθευτή του overlay, ο ιστότοπος λειτουργεί με παλιά διορθωτικά μέτρα – μερικά από τα οποία δεν κάνουν τίποτα, ενώ άλλα ενδέχεται να εφαρμόζονται σε λάθος στοιχεία.

Διορθώσεις με βάση τη διεύθυνση URL: Ακόμα πιο ευάλωτες

Το Overlay B αντιστοιχίζει κάθε καταχώριση εναλλακτικού κειμένου με την ακριβή διεύθυνση URL της πηγής της εικόνας. Εντοπίσαμε καταχωρίσεις όπως:

Παρατηρήστε την ευπάθεια: η διεύθυνση URL περιέχει ένα αναγνωριστικό συσκευής (13555), μια διάσταση μικρογραφίας (86x86), καθώς και ένα όνομα αρχείου που περιλαμβάνει το όνομα του προϊόντος. Οποιοδήποτε από αυτά μπορεί να αλλάξει ανεξάρτητα. Εάν το CMS δημιουργήσει εκ νέου μικρογραφίες σε διαφορετικό μέγεθος, το thumb_86x86 ένα τμήμα της διεύθυνσης URL αλλάζει και η καταχώριση δεν αντιστοιχεί πλέον. Αν η ομάδα προϊόντων ανεβάσει μια νέα φωτογραφία με διαφορετικό όνομα αρχείου, η καταχώριση μένει «ορφανή». Αν ο ιστότοπος μεταφέρει τα πολυμέσα του σε ένα CDN με διαφορετικό domain, κάθε καταχώριση στο αρχείο JSON των 1,17 MB μετατρέπεται σε περιττό βάρος – και κάθε εικόνα στον ιστότοπο χάνει ταυτόχρονα το εναλλακτικό κείμενό της.

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

Διορθώσεις παγκόσμιας εμβέλειας: Το πρόβλημα της αλυσιδωτής αντίδρασης

Η προσέγγιση του Overlay C – η προσάρτηση ενός MutationObserver σε ολόκληρο το έγγραφο και η εφαρμογή γενικών διορθώσεων σε όλα τα στοιχεία συγκεκριμένων τύπων (a, button, input, img, h1) – δημιουργεί ένα διαφορετικό αλλά εξίσου επικίνδυνο σενάριο σφάλματος. Αντί να παρουσιάζει σφάλμα χωρίς προειδοποίηση όταν οι επιλογείς παλιώσουν, αυτή η επικάλυψη αντιμετωπίζει ενεργά με νέο κώδικα.

Ας εξετάσουμε ένα συνηθισμένο σενάριο: η ομάδα ανάπτυξης του ιστότοπου αναπτύσσει ένα νέο στοιχείο διαλόγου modal με δυνατότητα πρόσβασης, το οποίο εφαρμόζει σωστά τη δυνατότητα συγκράτησης εστίασης, το κλείσιμο με το πλήκτρο Escape και τα χαρακτηριστικά ARIA. Ο MutationObserver της επικάλυψης εντοπίζει τα νέα στοιχεία DOM, τα αξιολογεί με βάση τους γενικούς κανόνες του και – εντοπίζοντας στοιχεία που ταιριάζουν με τα πρότυπά του – εφαρμόζει τη δική του διαχείριση εστίασης, τους χειριστές πληκτρολογίου και τα χαρακτηριστικά ARIA πάνω από την υπάρχουσα, σωστή υλοποίηση του στοιχείου. Το αποτέλεσμα είναι διπλό focus trapping, διπλές χειριστές πληκτρολογίου και αντικρουόμενα χαρακτηριστικά ARIA. Το modal που λειτουργούσε τέλεια πριν φορτωθεί το overlay τώρα συμπεριφέρεται ακανόνιστα.

Δεν πρόκειται για ένα θεωρητικό ζήτημα. Βιβλιοθήκες στοιχείων πλαισίου όπως οι Radix UI, Headless UI και Chakra UI επενδύουν σημαντικές τεχνικές προσπάθειες στην ορθή εφαρμογή του ARIA. Μια επικάλυψη που εφαρμόζει γενικά τα δικά της χαρακτηριστικά ARIA σε όλα τα button και a τα στοιχεία ενδέχεται να έρχονται σε σύγκρουση με αυτές τις δοκιμασμένες υλοποιήσεις, με αποτέλεσμα τα στοιχεία να μην είναι πλήρως προσβάσιμα λιγότερο προσβάσιμο.

Το εργαλείο παρακολούθησης: Δεν υπάρχει κίνδυνος βλάβης

Το εργαλείο παρακολούθησης που αναλύσαμε δεν περιλαμβάνει διορθώσεις βάσει επιλογέων, καταχωρήσεις με βάση URL, MutationObserver ούτε γενική στόχευση στοιχείων. Όταν ο ιστότοπος ανανεώνει τον κώδικα του, η επόμενη σάρωση του εργαλείου παρακολούθησης αξιολογεί αυτόματα το νέο DOM σε σχέση με το τυποποιημένο σύνολο κανόνων του axe-core και αναφέρει τυχόν νέες παραβιάσεις – χωρίς να τροποποιεί τίποτα. Τα αποτελέσματα της σάρωσης εμφανίζονται στον πίνακα ελέγχου του εργαλείου με επίπεδα σοβαρότητας, αριθμό επηρεαζόμενων στοιχείων και τυποποιημένα αναγνωριστικά κανόνων WCAG. Οι προγραμματιστές εξετάζουν τα ευρήματα και εφαρμόζουν διορθώσεις στη δική τους βάση κώδικα, όπου οι διορθώσεις υποβάλλονται σε έλεγχο κώδικα, αυτοματοποιημένες δοκιμές, επικύρωση σε περιβάλλον staging και ελεγχόμενη ανάπτυξη.

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

Τι προβλήματα προκύπτουν κατά την επανεγκατάσταση

Κάθε διόρθωση της επικάλυψης προσβασιμότητας συνδέεται με την τρέχουσα δομή DOM του ιστότοπου. Διαπιστώσαμε ότι Το 98% των επιλογέων μιας επικάλυψης στοχεύουν ονόματα κλάσεων που είναι ειδικά για το πλαίσιο – μαθήματα όπως .chakra-, .splide__, .js-, .b-, καθώς και κατακερματισμούς CSS-in-JS όπως .css-acuo7n που αλλάζουν σε κάθε έκδοση.

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

Ο Γενικός Κανονισμός για την Προστασία Δεδομένων (GDPR), το απόρρητο και το ζήτημα της συγκατάθεσης

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

Σύμφωνα με την απόφαση του ΔΕΚ στην υπόθεση Planet49, η μη απαραίτητη παρακολούθηση απαιτεί προηγούμενη ρητή συγκατάθεση. Δύο παράθυρα αναδυόμενου περιεχομένου αποστέλλουν μόνιμους αναγνωριστικούς κωδικούς κατά την πρώτη αίτηση δικτύου – πριν ενεργοποιηθεί οποιοσδήποτε μηχανισμός συγκατάθεσης. Για ιστότοπους που απευθύνονται στην ΕΕ, αυτό συνιστά αυτόματη μη συμμόρφωση με τον ΓΚΠΔ.

Το νομικό πλαίσιο

Τον Απρίλιο του 2025, η Ομοσπονδιακή Επιτροπή Εμπορίου των ΗΠΑ (FTC) οριστικοποίησε μια συμφωνία ύψους 1 εκατομμυρίου δολαρίων εναντίον ενός από τους προμηθευτές εργαλείων προσβασιμότητας που συμμετείχαν στη μελέτη μας, λόγω ψευδούς ισχυρισμού ότι το εργαλείο του, το οποίο βασίζεται σε τεχνητή νοημοσύνη, μπορούσε να καταστήσει οποιονδήποτε ιστότοπο συμβατό με τις WCAG. Η FTC διαπίστωσε ότι το εργαλείο δεν κατάφερε να καταστήσει προσβάσιμα βασικά στοιχεία του ιστότοπου – μενού, επικεφαλίδες, πίνακες, εικόνες και ηχογραφήσεις. Σε ένα από τα παραδείγματα που αναφέρθηκαν, μια φωτογραφία φιλέ μινιόν έλαβε την περιγραφή που δημιουργήθηκε από την τεχνητή νοημοσύνη: «Ψωμί ολικής άλεσης σε λευκό κεραμικό πιάτο».

Σύμφωνα με στοιχεία παρακολούθησης του κλάδου, το 25% όλων των αγωγών σχετικά με την ψηφιακή προσβασιμότητα το 2024 ανέφερε ρητά τα widget επικάλυψης ως εμπόδια – και όχι ως λύσεις. Κατά το πρώτο εξάμηνο του 2025, οι αγωγές εναντίον εταιρειών που χρησιμοποιούν widget επικάλυψης συνέχισαν να ξεπερνούν τις 100 ανά μήνα. Δύο από τους προμηθευτές overlay της μελέτης μας έχουν εμπλακεί άμεσα σε δικαστικές διαμάχες: ο ένας σε τρεις ξεχωριστές υποθέσεις σχετικά με διπλώματα ευρεσιτεχνίας/εμπορικά μυστικά, και ο άλλος αντιμετωπίζει ομαδική αγωγή από έναν πελάτη μικρής επιχείρησης ο οποίος μηνύθηκε παρά τη χρήση του overlay.

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

Μια ματιά στον κώδικα: Τι αλλάζουν πραγματικά τα overlays

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

Το Overlay C αξίζει ιδιαίτερη προσοχή. Το μονολιθικό πακέτο του, μεγέθους 794 KB, επισυνάπτει ένα MutationObserver προς document.documentElement με τη διαμόρφωση {subtree: true, childList: true, attributes: true, attributeOldValue: true}. Αυτό σημαίνει κάθε αλλαγή στο DOM σε ολόκληρη τη σελίδα – είτε προέρχεται από τη διαδικασία εναρμόνισης του εικονικού DOM του React, ένα σενάριο δοκιμών A/B, ένα widget συνομιλίας ή το ίδιο το JavaScript του ιστότοπου – ενεργοποιεί τον παρατηρητή της επικάλυψης, ο οποίος στη συνέχεια επαναξιολογεί και ενδεχομένως εφαρμόζει εκ νέου τις διορθώσεις του. Μετά από μια ανανέωση του ιστότοπου, αυτό δημιουργεί μια αλυσιδωτή αντίδραση προσπαθειών επανόρθωσης σε στοιχεία που ενδεχομένως είναι ήδη σωστά προσβάσιμα, με αποτέλεσμα να αντικαθιστούν τα σωστά χαρακτηριστικά ARIA με λανθασμένα.

Επιβεβαιώσαμε ότι το Overlay C στέλνει USER-BEHAVIOR-ANALYTICS Αποστέλλει αιτήματα POST στον δικό του δέκτη καταγραφής, με δεδομένα που περιλαμβάνουν τον τομέα του ιστότοπου, την έκδοση του widget, τη γλώσσα του χρήστη και τα συμβάντα αλληλεπίδρασης. Σε συνδυασμό με localStorage ανίχνευση επίμονων στοιχείων και δακτυλικών αποτυπωμάτων συσκευών μέσω navigator.userAgent και navigator.maxTouchPoints, αυτό συνιστά μια πράξη επεξεργασίας δεδομένων της οποίας οι περισσότεροι διαχειριστές ιστότοπων δεν έχουν επίγνωση.

Το πρόβλημα με το JSON αποκατάστασης

Το Overlay B κατεβάζει ένα τεράστιο αρχείο JSON (μέχρι 1,17 MB για έναν ιστότοπο τηλεπικοινωνιών) που περιέχει όλους τους ορισμούς των διορθώσεων. Σε έναν ιστότοπο, παρατηρήσαμε ότι το αρχείο αυτό κατεβάστηκε τέσσερις φορές σε μία μόνο περίοδο περιήγησης – 4,7 MB εύρους ζώνης για ένα αρχείο που θα έπρεπε να είχε αποθηκευτεί στην προσωρινή μνήμη. Το JSON περιέχει 11 κατηγορίες, αλλά η συντριπτική πλειοψηφία αποτελείται από περιγραφές εικόνων που έχουν δημιουργηθεί από τεχνητή νοημοσύνη: 4.974 από τις 6.975 καταχωρήσεις για έναν ιστότοπο. Κάθε μία αντιστοιχεί σε μια συγκεκριμένη διεύθυνση URL εικόνας – όταν το CMS μετονομάζει ένα αρχείο, αλλάζει τις διαστάσεις των μικρογραφιών ή μεταφέρει τομείς CDN, οι καταχωρήσεις σταματούν αθόρυβα να ταιριάζουν. Οι εικόνες αντικατάστασης δεν λαμβάνουν καθόλου εναλλακτικό κείμενο, καθιστώντας τη σελίδα λιγότερο προσβάσιμη από ό,τι πριν την εγκατάσταση του overlay.

Αυτή η επικάλυψη εγκαθιστά επίσης ενότητες που λειτουργούν κατά την εκτέλεση και αναδιαμορφώνουν ενεργά τη σελίδα: έναν μηχανισμό διόρθωσης 110 KB, ένα βοηθητικό πρόγραμμα μενού πλοήγησης 23 KB που αναδιαρθρώνει τον τρόπο χειρισμού του μενού μέσω πληκτρολογίου, μια ενημερωμένη έκδοση για το καρουσέλ 5,8 KB, καθώς και έναν σαρωτή από την πλευρά του πελάτη 53 KB που χρησιμοποιεί ιδιόκτητη λογική αντί του μηχανισμού axe-core, ο οποίος αποτελεί το βιομηχανικό πρότυπο – πράγμα που σημαίνει ότι τα ευρήματά του δεν μπορούν να επαληθευτούν ανεξάρτητα.

Η πιο διαφανής επικάλυψη – εξακολουθεί να ενέχει κινδύνους

Το Overlay D διέθετε την πιο διαφανή αρχιτεκτονική: αρχεία διαμόρφωσης JSON κατανοητά από τον άνθρωπο, με ρητές επιλογές ενεργοποίησης/απενεργοποίησης. Επιλογές όπως addAriaHidden, overwriteAlt, και adjustMetaViewport είχαν οριστεί ρητά σε false. Ωστόσο, ο βασικός κινητήρας (649 KB) περιέχει 216 setAttribute κλήσεις, 47 aria-hidden βιβλιογραφικές αναφορές, 282 addEventListener εγγραφές, και 9 MutationObserver περιπτώσεις. Ο κινητήρας υποστηρίζει επιθετικές αλλαγές στο DOM ακόμη και αν η τρέχουσα διαμόρφωση είναι συντηρητική – μια αλλαγή στη διαμόρφωση από την πλευρά του προμηθευτή θα μπορούσε να ενεργοποιήσει επικίνδυνες λειτουργίες χωρίς να το γνωρίζει ο διαχειριστής του ιστότοπου.

Βρήκαμε επιλογείς ανά ιστότοπο που περιέχουν καταλήξεις hash που δημιουργούνται από JavaScript, όπως button.topHeader__infoButton.js-exclusions85ada2b86bb632424e3ad77c14 που αλλάζουν σε κάθε έκδοση, καθώς και οι επιλογείς URL κοινωνικών δικτύων που παύουν να ισχύουν όταν ο ιστότοπος ενημερώνει τους συνδέσμους του στο Facebook ή το Instagram.

Ο Ευρωπαϊκός Νόμος για την Προσβασιμότητα: Γιατί τα overlays δεν πληρούν τις απαιτήσεις του EAA

Από τις 28 Ιουνίου 2025, ο Ευρωπαϊκός Νόμος για την Προσβασιμότητα (EAA) απαιτεί τα ψηφιακά προϊόντα και οι υπηρεσίες που πωλούνται στην ΕΕ να πληρούν πρότυπα προσβασιμότητας σύμφωνα με το πρότυπο EN 301 549, το οποίο βασίζεται στις WCAG 2.1 AA. Σε αντίθεση με τον ADA – ο οποίος επιβάλλεται κυρίως μέσω ιδιωτικών αγωγών – ο EAA επιβάλλεται από τις εθνικές αρχές εποπτείας της αγοράς, οι οποίες έχουν την εξουσία να επιβάλλουν πρόστιμα, να διατάσσουν διορθωτικά μέτρα και να αποσύρουν από την αγορά τα προϊόντα που δεν συμμορφώνονται.

Η επίσημη απόρριψη των εργαλείων επικάλυψης από τη Γερμανία

Η Γερμανία έχει υιοθετήσει τη σαφέστερη ρυθμιστική θέση από οποιαδήποτε άλλη χώρα όσον αφορά τα εργαλεία επικάλυψης για την προσβασιμότητα. Ο BFIT-Bund (Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik) – ο ομοσπονδιακός φορέας εποπτείας της Γερμανίας για την προσβασιμότητα της τεχνολογίας των πληροφοριών – σε συνεργασία με όλους τους φορείς εποπτείας σε επίπεδο ομόσπονδων κρατιδίων, εξέδωσε κοινή αξιολόγηση στην οποία απορρίπτει ρητά τα εργαλεία επικάλυψης ως μέσο συμμόρφωσης με τις απαιτήσεις προσβασιμότητας:

Στις 12 Μαρτίου 2025, η Επιτροπή για την Προσβάσιμη Τεχνολογία Πληροφοριών (Ausschuss für barrierefreie Informationstechnik, η οποία συστάθηκε βάσει του άρθρου 5 του BITV 2.0) επιβεβαίωσε εκ νέου τη θέση αυτή κατά τη συνεδρίασή της, εκφράζοντας την ανησυχία της για το γεγονός ότι οι δημόσιοι φορείς εξακολουθούν να προσπαθούν να εκπληρώσουν τις υποχρεώσεις τους όσον αφορά την προσβασιμότητα ενσωματώνοντας εργαλεία επικάλυψης. Η επιτροπή κατέληξε στο συμπέρασμα ότι «η προσωρινή προσβάσιμη απεικόνιση ενός ιστότοπου μέσω λογισμικού – ενδεχομένως μόνο μετά τη ρύθμιση των παραμέτρων από τον χρήστη – για τη διάρκεια της επίσκεψής του δεν πληροί τις απαιτήσεις των εφαρμοστέων νομικών διατάξεων».

Η επιτροπή προειδοποίησε ρητά ότι οι δημόσιοι φορείς που χρησιμοποιούν εργαλεία επικάλυψης διακινδυνεύουν να καταστήσουν τους ιστότοπούς τους λιγότερο προσβάσιμους, και όχι περισσότερο – με αποτέλεσμα την επιδείνωση της προσβασιμότητας («Verschlechterung der Barrierefreiheit»). Αυτό αντανακλά άμεσα το τεχνικό μας πόρισμα ότι το 26% των κανόνων διόρθωσης επικάλυψης εισάγουν νέες παραβιάσεις των WCAG.

Σφραγίδα πιστοποίησης BIK: Απορρίφθηκε για ιστότοπους που χρησιμοποιούν επικάλυψη

Το δίκτυο ελέγχου BIK της Γερμανίας – οι διαπιστευμένοι φορείς που αξιολογούν ιστότοπους με βάση τα πρότυπα BITV 2.0, EN 301 549 και WCAG 2.1 AA – έλαβε ένα λειτουργικό μέτρο: οι ιστότοποι που χρησιμοποιούν εργαλεία επικάλυψης δεν μπορούν να λάβουν τη σφραγίδα ελέγχου BIK. Οι φορείς δοκιμών δήλωσαν ότι δεν μπορούν να πραγματοποιήσουν αξιόπιστη αξιολόγηση συμμόρφωσης όταν υπάρχει επικάλυψη, επειδή η επικάλυψη τροποποιεί το DOM κατά την εκτέλεση με τρόπους που καθιστούν τα αποτελέσματα των δοκιμών αναξιόπιστα. Η σφραγίδα BIK χρησιμοποιείται ευρέως σε όλη τη Γερμανία ως απόδειξη συμμόρφωσης με το BITV 2.0 – και πλέον δεν είναι διαθέσιμη σε κανέναν ιστότοπο που χρησιμοποιεί επικάλυψη.

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

Επιβεβαίωση σε ευρωπαϊκό επίπεδο

Η θέση αυτή δεν περιορίζεται μόνο στη Γερμανία. Το Ευρωπαϊκό Φόρουμ για την Αναπηρία και ο Διεθνής Σύλλογος Επαγγελματιών Προσβασιμότητας εξέδωσαν το 2023 κοινή δήλωση στην οποία προειδοποιούν ότι τα εργαλεία επικάλυψης (overlays) δεν καθιστούν τους ιστότοπους προσβάσιμους ούτε συμμορφωμένους με την ευρωπαϊκή νομοθεσία για την προσβασιμότητα, συμπεριλαμβανομένου του Ευρωπαϊκού Νόμου για την Προσβασιμότητα. Η Ευρωπαϊκή Επιτροπή έχει επίσης σχολιάσει τους ισχυρισμούς περί συμμόρφωσης που βασίζονται σε εργαλεία επικάλυψης, καταλήγοντας στο συμπέρασμα ότι τα εργαλεία αυτά δεν μπορούν να διασφαλίσουν τη συμμόρφωση με τα ισχύοντα πρότυπα.

Σύμφωνα με τον γερμανικό νόμο BFSG (Barrierefreiheitsstärkungsgesetz – η γερμανική μεταφορά της EAA, που ισχύει από τις 28 Ιουνίου 2025), οι αρχές εποπτείας της αγοράς μπορούν να επιβάλλουν πρόστιμα ύψους 10.000 έως 100.000 ευρώ ανά παράβαση. Η αξιολόγηση του BFIT-Bund και η άρνηση του δικτύου δοκιμών BIK να πιστοποιήσει ιστότοπους που χρησιμοποιούν επικάλυψη σημαίνουν ουσιαστικά ότι τα εργαλεία επικάλυψης δεν παρέχουν καμία κανονιστική κάλυψη στη Γερμανία – και ενδέχεται να αυξήσουν ενεργά τον κίνδυνο λήψης μέτρων επιβολής.

Κίνδυνοι ασφάλειας και εφοδιαστικής αλυσίδας

Κάθε εργαλείο επικάλυψης λειτουργεί εισάγοντας κώδικα JavaScript τρίτων στο παγκόσμιο πεδίο εφαρμογής των σελίδων παραγωγής σας. Αυτός ο κώδικας JavaScript εκτελείται με τα ίδια δικαιώματα με τον δικό σας κώδικα – μπορεί να διαβάσει και να τροποποιήσει οποιοδήποτε στοιχείο DOM, να υποκλέψει υποβολές φορμών, να έχει πρόσβαση σε cookies, να ανακατευθύνει χρήστες και να υποκλέψει δεδομένα. Οι επιπτώσεις αυτής της πρακτικής στην ασφάλεια είναι σημαντικές και συχνά παραβλέπονται.

Η επιφάνεια επίθεσης

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

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

Η έκταση αυτού του κινδύνου σχετίζεται άμεσα με το μέγεθος του DOM της επικάλυψης:

Το Overlay B παρουσιάζει τη μεγαλύτερη επιφάνεια κινδύνου στην αλυσίδα εφοδιασμού: 228 κλήσεις API ανά συνεδρία σε 3 εξωτερικούς τομείς, με ένα φορτίο JSON 1,17 MB που καθορίζει τον τρόπο τροποποίησης του DOM. Μια παραβιασμένη απόκριση API θα μπορούσε να δώσει εντολή στον μηχανισμό αποκατάστασης να εισάγει αυθαίρετο περιεχόμενο σε οποιοδήποτε στοιχείο της σελίδας. Το μονολιθικό πακέτο 1.285 KB του Overlay C είναι το μεγαλύτερο μεμονωμένο ωφέλιμο φορτίο JavaScript – και επειδή είναι ελαχιστοποιημένο και συγκεκαλυμμένο, ούτε ο διαχειριστής του ιστότοπου ούτε ένας ελεγκτής ασφάλειας μπορούν να εξετάσουν ουσιαστικά τι εκτελεί κατά την εκτέλεση.

Συμμόρφωση με το PCI DSS: Μια άμεση σύγκρουση

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

Η απαίτηση 6.4.3 του PCI DSS (η οποία εισήχθη στο PCI DSS v4.0 και θα καταστεί υποχρεωτική από τις 31 Μαρτίου 2025) απαιτεί ώστε όλα τα σενάρια (scripts) των σελίδων πληρωμής που φορτώνονται και εκτελούνται στον περιηγητή του καταναλωτή να διαχειρίζονται ως εξής: πρέπει να εφαρμοστεί μια μέθοδος για την επιβεβαίωση της εξουσιοδότησης κάθε σεναρίου, πρέπει να διασφαλίζεται η ακεραιότητα κάθε σεναρίου και πρέπει να τηρείται κατάλογος όλων των σεναρίων, συνοδευόμενος από γραπτή αιτιολόγηση της αναγκαιότητας του καθενός.

Η ανάλυσή μας επιβεβαίωσε ότι οι κανόνες διόρθωσης επικάλυψης στοχεύουν ενεργά στοιχεία DOM σελίδων πληρωμής σε πολλούς ιστότοπους:

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

Σκεφτείτε τι μπορεί να κάνει το σενάριο ενός παρόχου υπηρεσιών επικάλυψης στη σελίδα ολοκλήρωσης της παραγγελίας σας:

Αντίθετα, το εργαλείο παρακολούθησης δεν διαθέτει καμία δυνατότητα εγγραφής στο DOM. Το σενάριό του, μεγέθους 4,2 KB, δεν μπορεί να τροποποιήσει πεδία φορμών, να υποκλέψει συμβάντα εισαγωγής δεδομένων, ούτε να έχει πρόσβαση ή να αλλάξει στοιχεία της διαδικασίας ολοκλήρωσης αγοράς. Ακόμη και αν το CDN του παρόχου παρακολούθησης παραβιαζόταν, ο εισβολέας θα αποκτούσε πρόσβαση σε ένα σενάριο που μπορεί μόνο να διαβάσει τη διεύθυνση URL της σελίδας και τον τύπο της συσκευής – όχι σε ένα σενάριο ικανό να τροποποιήσει τη φόρμα ολοκλήρωσης αγοράς. Για τους σκοπούς καθορισμού του πεδίου εφαρμογής του PCI DSS, το εργαλείο παρακολούθησης δεν δημιουργεί επιπλέον επιφάνεια κινδύνου στις σελίδες πληρωμών.

Το ζήτημα των διακρίσεων

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

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

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

Η κοινότητα των ατόμων με αναπηρία εκφράζει δυναμικά την ανησυχία της για το θέμα αυτό εδώ και χρόνια. Το ενημερωτικό δελτίο για τα overlay – το οποίο έχουν υπογράψει εκατοντάδες επαγγελματίες στον τομέα της προσβασιμότητας – προειδοποιεί ότι τα overlay προσβασιμότητας «δεν διορθώνουν τον υποκείμενο κώδικα HTML» και «συχνά εμποδίζουν ενεργά τα άτομα με αναπηρία». Η τεχνική μας ανάλυση παρέχει τα αποδεικτικά στοιχεία: 141 λειτουργικά στοιχεία κρυμμένα από τα προγράμματα ανάγνωσης οθόνης, 7 ετικέτες χωρίς νόημα που έχουν εισαχθεί και 5.066 περιγραφές AI που δεν έχουν ελεγχθεί και έχουν τεθεί σε παραγωγή – σε μόλις 14 ιστότοπους.

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

Επίδραση στη συμμόρφωση με τον νόμο ADA: Βοηθούν πραγματικά αυτές οι διορθώσεις;

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

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

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

Πώς κάθε επικίνδυνο πρότυπο παραβιάζει τις WCAG

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

Επίστρωμα Β: Εναλλακτικό κείμενο με χρήση τεχνητής νοημοσύνης και WCAG 1.1.1

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

Από τα 5.068 εναλλακτικά κείμενα που δημιουργήθηκαν από τεχνητή νοημοσύνη και τα οποία συλλέξαμε από το Overlay B, τα 241 είχαν λιγότερους από 15 χαρακτήρες (πολύ ασαφή για να είναι χρήσιμα), τα 323 ξεπερνούσαν τους 125 χαρακτήρες (παραβιάζοντας τις βέλτιστες πρακτικές για τη χρηστικότητα των προγραμμάτων ανάγνωσης οθόνης) και τα 156 ξεκινούσαν με τις φράσεις «εικόνα του» ή «φωτογραφία του» (περιττές, καθώς τα προγράμματα ανάγνωσης οθόνης ανακοινώνουν ήδη τον τύπο του στοιχείου). Μόνο 2 είχαν εγκριθεί από ανθρώπινο ελεγκτή.

Σύμφωνα με τα πρότυπα των δικαστικών διαδικασιών βάσει του ADA, ένας εμπειρογνώμονας προσβασιμότητας που εκπροσωπεί τον ενάγοντα θα χαρακτήριζε τα παραπάνω ως παραβάσεις του WCAG 1.1.1 – το κριτήριο που αναφέρεται πιο συχνά στις αγωγές σχετικά με την προσβασιμότητα ιστοσελίδων βάσει του ADA. Η επικάλυψη δεν επιλύει την παραβίαση· απλώς αντικαθιστά μια μορφή μη συμμόρφωσης (απουσία εναλλακτικού κειμένου) με μια άλλη (ανακριβές ή ασαφές εναλλακτικό κείμενο), δημιουργώντας παράλληλα μια ψευδή αίσθηση συμμόρφωσης στον διαχειριστή του ιστότοπου.

Επίθεμα Β: Εισαγωγή ετικετών φόρμας κατά την εκτέλεση – όταν η «διόρθωση» επιδεινώνει την κατάσταση

Beyond the consolidated JSON, Overlay B runs a 110 KB remediation engine (remediation-tool.js) that performs 24 distinct DOM mutation rules at runtime on every page load. One of these rules – the EmptyControls handler – targets unlabeled form fields and attempts to inject accessible names by finding nearby <label> elements.

The mechanism works as follows: for each form control without an accessible name, the engine calls a label-finder function that searches for <label for=”id”> elements matching the input’s ID. If found, it injects the label’s text content as an aria-label:

We verified this behavior on a live site – a web agency’s contact page with six form fields. The original HTML had visible labels (“First Name”, “Company Name”, “Last Name”, “Work Email”, “Phone Number”, “Message”) but they were not programmatically associated with their inputs via <label for> or aria-label. Without the overlay, a screen reader would announce each field with no name at all.

Με τον μηχανισμό διόρθωσης του Overlay B ενεργοποιημένο, ένα πρόγραμμα ανάγνωσης οθόνης ανακοίνωσε:

We verified this by examining the saved HTML source with the overlay’s modifications baked in. Every modified element carries a vendor-specific data-*-form=”fx” attribute – the overlay’s own marker confirming it injected the aria-label. The original HTML has <label> elements with correct text (“First Name”, “Last Name”, “Work Email”, etc.) but they have no for attribute and the inputs are not nested inside the labels – so there is no programmatic association. The overlay’s label-finder function only looks for label[for=id], and since the inputs have no id attribute at all, it returns null for every field. The engine then falls back to constructing labels from the name attribute (“first-name” → “Name”, “last-name” → “Name”), input validation type (“email” → “Please enter email address”), or the raw element type (“text” → “Text field”, “select” → “Single select”, “textarea” → “Text area”).

Το αποτέλεσμα είναι χειρότερο από την αρχική φόρμα χωρίς ετικέτες. Πριν από την επικάλυψη, ένας χρήστης προγράμματος ανάγνωσης οθόνης θα συναντούσε επτά πεδία χωρίς ετικέτες – κάτι που προκαλούσε σύγχυση, αλλά τουλάχιστον ήταν συνεπές. Θα μπορούσε να χρησιμοποιήσει τη σειρά πλοήγησης με το πλήκτρο Tab και το συγκείμενο για να μαντέψει ποιο πεδίο είναι ποιο. Μετά την παρέμβαση της επικάλυψης, ο χρήστης συναντά δύο πεδία με την ίδια ετικέτα («Όνομα» τόσο για το Όνομα όσο και για το Επώνυμο), δύο πεδία με εικονικές ετικέτες τύπου επικύρωσης που δεν ταιριάζουν με το ορατό κείμενο και τρία πεδία με ονόματα χωρίς νόημα που βασίζονται στον τύπο. Η μερική, λανθασμένη επισήμανση προκαλεί μεγαλύτερη σύγχυση από την πλήρη απουσία επισήμανσης, επειδή δημιουργεί την ψευδή εντύπωση ότι η φόρμα έχει καταστεί προσβάσιμη, ενώ κρίσιμα πεδία παραμένουν χωρίς ετικέτα ή με λανθασμένη ετικέτα.

Αυτό το εύρημα αποκαλύπτει επίσης ένα κενό στην αναφορά JSON της διόρθωσης του Overlay B. Το JSON περιείχε 87 καταχωρήσεις εναλλακτικού κειμένου που δημιουργήθηκαν από τεχνητή νοημοσύνη και καμία καταχώρηση διόρθωσης φόρμας για αυτόν τον ιστότοπο. Η εισαγωγή ετικετών φόρμας πραγματοποιείται εξ ολοκλήρου κατά την εκτέλεση μέσω του χειριστή κανόνων EmptyControls – δεν είναι ορατή στο ενοποιημένο JSON διόρθωσης, δεν παρακολουθείται σε κανένα ταμπλό που μπορεί να ελέγξει ο διαχειριστής του ιστότοπου και δεν υπόκειται σε ανθρώπινη έγκριση. Ο διαχειριστής του ιστότοπου δεν έχει κανέναν τρόπο να γνωρίζει ότι η φόρμα επικοινωνίας του έχει λανθασμένη ετικέτα, εκτός αν την δοκιμάσει ο ίδιος με ένα πρόγραμμα ανάγνωσης οθόνης.

The remediation engine’s 24 rule handlers collectively perform: aria-label injection on form fields, links, images, and dialogs; aria-hidden toggling; role modification (heading, presentation, menuitem, button, img); tabindex injection to make non-interactive elements focusable; alt text from the AI JSON; style overrides to make hidden elements visible; aria-required injection; aria-describedby associations between fields and error messages; heading text rewrites; broken link URL corrections; <meta viewport> modification; and <html lang> changes. All of this executes at runtime in the visitor’s browser on every page load – none of it is visible in the consolidated remediation JSON.

Το καθαρό αποτέλεσμα της συμμόρφωσης με τον νόμο ADA

Το βασικό πρόβλημα είναι ότι τα εργαλεία επικάλυψης συγχέουν την κάλυψη με τη συμμόρφωση. Μια επικάλυψη μπορεί να παραπέμπει σε 1.058 κανόνες διόρθωσης και να ισχυρίζεται ότι καλύπτει πάνω από 40 κριτήρια επιτυχίας των WCAG. Ωστόσο, όταν το 26% αυτών των διορθώσεων δημιουργεί νέες παραβάσεις – συμπεριλαμβανομένων παραβάσεων επιπέδου Α που προκύπτουν από την απόκρυψη λειτουργικών στοιχείων – η τελική κατάσταση συμμόρφωσης μπορεί να είναι χειρότερη από εκείνη του ιστότοπου χωρίς τροποποιήσεις.

Ένας ιστότοπος χωρίς επικάλυψη που παρουσιάζει 50 παραβάσεις των WCAG βρίσκεται σε σαφέστερη νομική θέση από έναν ιστότοπο με επικάλυψη που παρουσιάζει 30 αρχικές παραβάσεις συν 203 παραβάσεις που προκλήθηκαν από την επικάλυψη – διότι οι παραβάσεις που προκλήθηκαν από την επικάλυψη αποδεικνύουν ότι ο διαχειριστής του ιστότοπου χρησιμοποίησε ένα εργαλείο που εισάγει ενεργά διακρίσεις εις βάρος των χρηστών με αναπηρία, γεγονός που υπονομεύει οποιαδήποτε υπεράσπιση καλής πίστης.

Συμπέρασμα