0

HTML-saavutettavuusauditoija

Liitä raakaa HTML:ää ja saat aidon WCAG-saavutettavuusauditoinnin: käsin rakennettu DOM-puun läpikäynti tarkistaa kuvat, lomakkeiden selitteet, otsikkotasojen järjestyksen ja linkkitekstit, minkä lisäksi aito suhteellisen luminanssin kontrastisuhdelaskuri pisteyttää tulokset oikeilla AA/AAA-kynnysarvoilla — ei ulkoisia kirjastoja, mitään ei lähetetä minnekään.

🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.

Erillinen kontrastin tarkistin

Tarkista mikä tahansa etu- ja taustaväri suoraan — hex, rgb(), hsl() ja nimetyt värit kuten 'tomato' toimivat kaikki.

Käsitellään... 0%
Jäsennetään HTML oikeaksi DOM-puuksi
Käydään DOM-puu läpi WCAG-tarkistuksia varten
Lasketaan kontrastisuhteita
Valmis

Tulos

Useimmat pikaiset saavutettavuustarkistukset ovat joko pinnallisia avainsanakartoituksia tai raskaita kirjastoja, joihin on luotettava mustina laatikoina. Tämä työkalu valitsee kolmannen tien: se jäsentää liittämäsi HTML:n selaimen omalla DOMParserilla — ei axe-core-ydintä, ei ulkoista saavutettavuuskirjastoa, ei mitään ladattavaa — ja käy sitten läpi tuloksena syntyvän DOM-puun joukolla käsin kirjoitettuja tarkistuksia, jotka vastaavat yleisiä, todellisia WCAG 2.1 -virheiden kaavoja. Näin logiikka on täysin tarkasteltavissa ja auditointi suoritetaan kokonaan selaimessasi: liittämääsi merkkausta ja testaamiasi väripareja ei koskaan ladata tai lähetetä minnekään.

Tarkistukset kattavat virheet, joita esiintyy eniten oikeilla sivuilla: <img>-elementit, joilla ei ole lainkaan alt-määritettä (aito WCAG-virhe toisin kuin tarkoituksellisesti tyhjä alt="", jota käytetään koristekuville ja jota ei aiheellisesti merkitä), lomakekentät, joiden tarkoitusta avustava teknologia ei pysty selvittämään (tarkistetaan jokainen todellinen polku selitteeseen — vastaava <label for>, <label>-elementin sisällä oleminen tai aria-label/aria-labelledby-määrite), otsikkotasot, jotka hyppäävät varoittamatta (suoraan <h1>:stä <h3>:een, sivu ilman <h1>-elementtiä tai useampi sellainen), linkit ilman href-määritettä tai epämääräisellä, kontekstista irrallisella tekstillä kuten "klikkaa tästä" tai "lue lisää", sekä puuttuva lang-määrite silloin, kun liitetään kokonainen HTML-dokumentti eikä pelkkä katkelma.

Kohokohta on aito kontrastilaskenta, ei pinnallinen "näyttää luettavalta" -heuristiikka. Jokaisesta elementistä, jolla on upotettu color- ja background-color-arvo, työkalu lukee molemmat arvot, selvittää ne oikeiksi RGB-numeroiksi selaimen oman CSS-moottorin kautta (joten hex, rgb(), hsl() ja nimetyt värit kuten 'tomato' toimivat samalla tavalla) ja laskee kullekin tarkan WCAG:n suhteellisen luminanssin — L = 0,2126×R + 0,7152×G + 0,0722×B, kun ensin jokainen kanava on gamma-korjattu käyttäen aitoa sRGB-siirtokäyrää — ennen kuin yhdistää ne viralliseen kontrastisuhdekaavaan (vaaleampi L + 0,05) / (tummempi L + 0,05). Elementin oma font-size ja font-weight ratkaisevat, sovelletaanko tiukempia "normaalin tekstin" kynnysarvoja vai sallivampia "ison tekstin" kynnysarvoja (18 pt+ tai 14 pt+ lihavoitu), ja tulos tarkistetaan kaikkia neljää aitoa WCAG-numeroa vasten samalla kertaa: 4,5:1 ja 3:1 AA-tasolle, 7:1 ja 4,5:1 AAA-tasolle — ei koskaan romauttaen yhteen keinoälyllisesti tuotettuun hyvä/huono-tuomioon.

Kyseessä on tarkoituksellisen rehellinen, käytännönläheinen osajoukko täydestä saavutettavuusauditoinnista, ei sertifiointityökalu: se ei arvioi JavaScript-pohjaista interaktiivisuutta, ARIA-widget-kaavoja perusselitteitä laajemmin, näppäimistön kohdistusjärjestystä eikä mitään, mikä edellyttää sivun todellista renderöintiä ja suorittamista. Pidä sitä nopeana ensitarkistuksena, joka nappaa kiinni eräät yleisimmistä ja vaikutuksiltaan suurimmista WCAG-virheistä — puuttuvat alt-tekstit, nimettömät kentät, rikkinäinen otsikkotasohierarkia, heikkokontrastinen teksti ja epämääräiset linkit — ennen sivun julkaisua, rinnakkain (eikä sijasta) täyden manuaalisen katselmoinnin tai tuotantoon menevän materiaalin vaatiman erikoistuneen auditointityökalun kanssa.