Ελεγκτής Προσβασιμότητας HTML

Οι περισσότεροι γρήγοροι έλεγχοι προσβασιμότητας είναι είτε μια επιφανειακή σάρωση λέξεων-κλειδιών είτε ένα βαρύ library που πρέπει να εμπιστευτείτε ως αδιαφανές κουτί. Αυτό το εργαλείο ακολουθεί μια τρίτη οδό: αναλύει οποιαδήποτε HTML επικολλάτε χρησιμοποιώντας τον ενσωματωμένο DOMParser του browser — χωρίς axe-core, χωρίς εξωτερικά libraries προσβασιμότητας, τίποτα που να κατεβάζεται — και στη συνέχεια διασχίζει το προκύπτον δέντρο DOM με μια σειρά από χειροποίητους ελέγχους που αντικατοπτρίζουν κοινά, πραγματικά μοτίβα αποτυχίας του WCAG 2.1. Αυτό σημαίνει ότι η λογική είναι πλήρως επιθεωρήσιμη και ο έλεγχος εκτελείται εξ ολοκλήρου μέσα στον browser σας: ο κώδικας που επικολλάτε, και οποιοδήποτε ζεύγος χρωμάτων δοκιμάζετε, δεν μεταφορτώνονται ούτε αποστέλλονται πουθενά.

Οι έλεγχοι καλύπτουν τις αποτυχίες που εμφανίζονται πιο συχνά σε πραγματικές σελίδες: στοιχεία <img> χωρίς καθόλου alt (μια γνήσια αποτυχία WCAG, διακριτή από το σκόπιμα κενό alt="" που χρησιμοποιείται για διακοσμητικές εικόνες, το οποίο σωστά δεν επισημαίνεται), πεδία φόρμας χωρίς τρόπο για την υποστηρικτική τεχνολογία να γνωρίζει τη λειτουργία τους (ελέγχεται κάθε πραγματική διαδρομή προς μια ετικέτα — αντίστοιχο <label for>, εσωκλεισμός σε <label>, ή ιδιότητα aria-label/aria-labelledby), επίπεδα επικεφαλίδων που αλλάζουν χωρίς προειδοποίηση (ένα <h1> κατευθείαν σε <h3>, ή ένα έγγραφο χωρίς καθόλου <h1>, ή περισσότερα από ένα), σύνδεσμοι χωρίς href ή με γενικό, εκτός συμφραζομένων κείμενο όπως «κάντε κλικ εδώ» ή «διαβάστε περισσότερα», και ελλιπές lang όταν επικολλάται ένα πλήρες έγγραφο HTML (όχι απλώς ένα απόσπασμα).

Το ξεχωριστό στοιχείο είναι τα γνήσια μαθηματικά της αντίθεσης, όχι ένας επιφανειακός ευρετικός κανόνας «φαίνεται ευανάγνωστο». Για οποιοδήποτε στοιχείο φέρει ενσωματωμένα color και background-color, το εργαλείο διαβάζει και τις δύο τιμές, τις αναλύει σε πραγματικούς αριθμούς RGB μέσω της εγγενούς μηχανής CSS του browser (ώστε hex, rgb(), hsl() και ονοματισμένα χρώματα όπως 'tomato' να λειτουργούν πανομοιότυπα) και υπολογίζει την ακριβή σχετική φωτεινότητα WCAG για καθεμία — L = 0,2126×R + 0,7152×G + 0,0722×B, με κάθε κανάλι γαμμα-διορθωμένο πρώτα χρησιμοποιώντας την πραγματική καμπύλη μεταφοράς sRGB — πριν τις συνδυάσει στον επίσημο τύπο του λόγου αντίθεσης, (φωτεινότερο L + 0,05) / (σκουρότερο L + 0,05). Το ίδιο το font-size και το font-weight του στοιχείου καθορίζουν εάν ισχύουν τα αυστηρότερα όρια «κανονικού κειμένου» ή τα πιο επιεική όρια «μεγάλου κειμένου» (18pt+ ή 14pt+ bold) και το αποτέλεσμα ελέγχεται ταυτόχρονα και με τα τέσσερα πραγματικά όρια WCAG: 4,5:1 και 3:1 για AA, 7:1 και 4,5:1 για AAA — ποτέ δεν συμπτύσσεται σε ένα μόνο πλασματικό αποτέλεσμα «καλό/κακό».

Πρόκειται για ένα εσκεμμένα ειλικρινές, ρεαλιστικό υποσύνολο ενός πλήρους ελέγχου προσβασιμότητας, όχι για εργαλείο πιστοποίησης: δεν αξιολογεί τη διαδραστικότητα που βασίζεται σε JavaScript, μοτίβα ARIA widgets πέραν της βασικής επισήμανσης, τη σειρά εστίασης πληκτρολογίου ή οτιδήποτε απαιτεί πραγματική απόδοση και εκτέλεση της σελίδας. Αντιμετωπίστε το ως ένα γρήγορο πρώτο πέρασμα που εντοπίζει μερικές από τις πιο συνηθισμένες και σημαντικότερες αποτυχίες WCAG — ελλιπές εναλλακτικό κείμενο, πεδία χωρίς ετικέτα, σπασμένη ιεραρχία επικεφαλίδων, κείμενο χαμηλής αντίθεσης και ασαφείς συνδέσμους — πριν από την παράδοση μιας σελίδας, παράλληλα (και όχι αντί) με έναν πλήρη χειροκίνητο έλεγχο ή ένα ειδικό εργαλείο ελέγχου για οτιδήποτε προορίζεται για παραγωγή.