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

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

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

Το κομμάτι που ξεχωρίζει είναι γνήσια μαθηματικά αντίθεσης, όχι ένα επιφανειακό ευρετικό «φαίνεται ευανάγνωστο». Για οποιοδήποτε στοιχείο που φέρει ενσωματωμένο χρώμα και χρώμα φόντου, το εργαλείο διαβάζει και τις δύο τιμές, τις επιλύει σε πραγματικούς αριθμούς RGB μέσω της μηχανής CSS του ίδιου του προγράμματος περιήγησης (έτσι hex, rgb(), hsl() και τα χρώματα όπως το "tomato" λειτουργούν όλα πανομοιότυπα) και υπολογίζει την ακριβή σχετική φωτεινότητα WCAG για το καθένα — L67R×521. 0,0722×B, με κάθε κανάλι να διορθώνεται πρώτα με γάμμα χρησιμοποιώντας την πραγματική καμπύλη μεταφοράς sRGB — πριν τα συνδυάσετε στην επίσημη φόρμουλα αναλογίας αντίθεσης, (ελαφρύτερο L + 0,05) / (πιο σκούρο L + 0,05). Το μέγεθος γραμματοσειράς και το βάρος γραμματοσειράς του ίδιου του στοιχείου αποφασίζουν εάν ισχύουν τα αυστηρότερα όρια «κανονικού κειμένου» ή τα πιο επιεικά όρια «μεγάλου κειμένου» (18 pt+ ή 14 pt+ έντονη γραφή) και το αποτέλεσμα ελέγχεται ταυτόχρονα με τους τέσσερις πραγματικούς αριθμούς WCAG: 4.5:1 και 3:1: AA για ποτέ για 3:1: κατέρρευσε σε μια ενιαία ψεύτικη καλή/κακή ετυμηγορία.

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