0

HTML-i juurdepääsetavuse audiitor

Kleepige toores HTML ja saate tõelise WCAG-i juurdepääsetavuse auditi: käsitsi ehitatud DOM-i kõndija kontrollib pilte, vormisilte, pealkirjade järjekorda ja lingiteksti ning lisaks ehtsat suhtelise heleduse kontrastsuse kalkulaatorit, mis võrdub tegelike AA/AAA lävedega – välist teeki pole ega kuhugi ei saadeta.

Eraldiseisev kontrasti kontrollija

Kontrollige otse kõiki esiplaani/tausta värvipaare — hex, rgb(), hsl() või nimega värv, näiteks 'tomat', kõik töötab.

Buy Me a Coffee at ko-fi.com
Töötlemine... 0%
HTML-i sõelumine tõeliseks DOM-iks
WCAG-i kontrollimiseks puu otsas kõndimine
Kontrastsuse suhete arvutamine
Valmis

Tulemus

Enamik kiireid juurdepääsetavuse kontrolle on kas pealiskaudne märksõnade skannimine või raskekaaluline raamatukogu, mida peate usaldama kui musta kasti. See tööriist kasutab kolmandat teed: see parsib mis tahes HTML-i, mille te kleebite, kasutades brauseri sisseehitatud DOMParserit – ilma teljetuuma, välise juurdepääsetavuse teegita, midagi alla laadimata – ja seejärel läbib saadud DOM-puu koos käsitsi kirjutatud kontrollide komplektiga, mis peegeldavad tavalisi tõelisi WCAG 2.1 tõrkemustreid. See tähendab, et loogika on täielikult kontrollitav ja audit töötab täielikult teie brauseris: kleebitud märgistust ja testitavat värvipaari ei laadita kunagi üles ega saadeta kuhugi.

Kontrollid hõlmavad tõrkeid, mis ilmnevad kõige sagedamini pärislehtedel: <img> elemendid, millel puudub Alt-atribuut (ehtne WCAG-tõrge, mis erineb dekoratiivsete piltide jaoks kasutatavast tahtlikult tühjast alt=""-st, mis jäetakse õigesti märgistamata), vormi juhtelemendid, mille jaoks pole abitehnoloogial võimalik teada saada, mille jaoks need on mõeldud (kontrollitakse iga tõelise tee sildi juurde – vastavat <label>, seespool olevat silti) atribuut aria-label/aria-labelledby), päisetasemed, mis hüppavad ilma hoiatuseta (<h1> otse <h3>-le või dokument, millel puudub <h1> või rohkem kui üks), lingid, millel puudub href või on ebaselge, kontekstiväline tekst, nagu "klõpsake siin" või "loe rohkem", ja puuduv lang-atribuut, kui täielik HTML-dokument on kleebitud (mitte lihtsalt fragmendina).

Silmapaistev teos on ehtne kontrastmatemaatika, mitte pealiskaudne heuristiline „näeb välja loetav”. Iga elemendi puhul, millel on sisemine värv ja taustavärv, loeb tööriist mõlemad väärtused, lahendab need tegelikeks RGB-numbriteks brauseri enda CSS-mootori kaudu (nii et hex, rgb(), hsl() ja nimega värvid, nagu 'tomat', töötavad kõik identselt ning arvutab igaühe jaoks täpse WCAG suhtelise heleduse – L = 0,2126 × 7 × 1R +2126 G. 0,0722 × B, kusjuures iga kanali gammakorrigeerimine toimub esmalt tõelise sRGB ülekandekõvera abil – enne nende ühendamist ametliku kontrastsussuhte valemiga (heledam L + 0,05) / (tumedam L + 0,05). Elemendi enda fondi suurus ja fondi kaal otsustavad, kas kehtivad rangemad tavalise teksti läved või leebemad suure teksti läved (18 pt+ või 14 pt+ paksus kirjas) ning tulemust võrreldakse korraga kõigi nelja tegeliku WCAG numbriga: 4,5:1 ja 4,5:1 ja AA puhul 3:7:1:1. varises kokku üheks võltsitud hea/halb otsuseks.

See on sihilikult aus ja pragmaatiline täieliku juurdepääsetavuse auditi alamhulk, mitte sertifitseerimistööriist: see ei hinda JavaScripti juhitud interaktiivsust, ARIA vidinate mustreid peale põhimärgistuse, klaviatuuri fookusjärjestuse ega midagi, mis nõuab lehe tegelikku renderdamist ja käitamist. Käsitlege seda kui kiiret esmakäiku, mis tabab enne lehe tarnimist mõned levinumad ja kõige tagajärjetumad WCAG-tõrked – puuduv alternatiivtekst, sildita väljad, katkine pealkirjade hierarhia, madala kontrastsusega tekst ja ebamäärased lingid – koos täieliku käsitsi ülevaatusega (mitte selle asemel) või spetsiaalse auditeerimisvahendiga, mis on ette nähtud kõige tootmiseks tarnimiseks.