0

HTML-tilgjengelighetsrevisor

Lim inn rå HTML og få en ekte WCAG-tilgjengelighetsrevisjon: en håndbygget DOM-walker sjekker bilder, skjemaetiketter, overskriftsrekkefølge og lenketekst, pluss en ekte relativ luminans-kontrastforholdskalkulator som scores mot de virkelige AA/AAA-terskelverdiene – ingen eksternt bibliotek, ingenting sendt noe sted.

Frittstående kontrastkontroller

Sjekk et hvilket som helst forgrunns-/bakgrunnsfargepar direkte - hex, rgb(), hsl() eller en navngitt farge som 'tomat' fungerer alt.

Buy Me a Coffee at ko-fi.com
Behandler... 0%
Parsing HTML til en ekte DOM
Går i treet for WCAG-sjekker
Beregning av kontrastforhold
Ferdig

Resultat

De fleste raske tilgjengelighetskontrollene er enten en overfladisk søkeordskanning eller et tungvektsbibliotek du må stole på som en svart boks. Dette verktøyet tar en tredje vei: det analyserer den HTML-en du limer inn ved hjelp av nettleserens egen innebygde DOMParser – ingen øksekjerne, ingen eksternt tilgjengelighetsbibliotek, ingenting nedlastet – og går deretter det resulterende DOM-treet med et sett med håndskrevne sjekker som gjenspeiler vanlige, ekte WCAG 2.1-feilmønstre. Det betyr at logikken er fullt inspiserbar og revisjonen kjører helt i nettleseren din: markeringen du limer inn, og et hvilket som helst fargepar du tester, blir aldri lastet opp eller sendt hvor som helst.

Kontrollene dekker feilene som dukker opp oftest på virkelige sider: <img>-elementer uten alt-attributt i det hele tatt (en ekte WCAG-feil, forskjellig fra den bevisst tomme alt="" som brukes for dekorative bilder, som er korrekt ikke flagget), danner kontroller uten mulighet for hjelpeteknologi til å vite hva de er til for (kontrollert mot hver ekte bane til en etikett, å være <markert i en ekte bane til en etikett). <label>, eller et aria-label/aria-merket av-attributt), overskriftsnivåer som hopper uten varsel (en <h1> rett til en <h3>, eller et dokument uten <h1> i det hele tatt, eller mer enn ett), koblinger uten href eller med vag, tekst utenfor kontekst som "klikk her" eller "les mer", og et dokument mangler bare et tidligere lang-fragment.

Det enestående stykket er ekte kontrastmatematikk, ikke en overfladisk heuristikk som ser lesbar ut. For ethvert element som har en innebygd farge og bakgrunnsfarge, leser verktøyet begge verdiene, løser dem til reelle RGB-tall via nettleserens egen CSS-motor (så hex, rgb(), hsl() og navngitte farger som 'tomat' fungerer alle identisk), og beregner den eksakte WCAG-relative luminansen for hver — L = 7×152×1202. 0,0722×B, med hver kanal gammakorrigert først ved å bruke den virkelige sRGB-overføringskurven — før de kombineres til den offisielle kontrastforholdsformelen, (lysere L + 0,05) / (mørkere L + 0,05). Elementets egen skriftstørrelse og skriftvekt avgjør om de strengere 'normaltekst'-terskelverdiene eller de mildere 'stor tekst'-terskelverdiene (18pt+, eller 14pt+ fet skrift) gjelder, og resultatet sjekkes mot alle fire reelle WCAG-tall på en gang: 4,5:1 og 3:1 for AA1 og AA: 47, aldri i kol. enkelt falsk god/dårlig dom.

Dette er en bevisst ærlig, pragmatisk undergruppe av en fullstendig tilgjengelighetsrevisjon, ikke et sertifiseringsverktøy: det evaluerer ikke JavaScript-drevet interaktivitet, ARIA-widgetmønstre utover grunnleggende merking, tastaturfokusrekkefølge eller noe som krever faktisk gjengivelse og kjøring av siden. Behandle det som et raskt førstepass som fanger opp noen av de vanligste og mest påfølgende WCAG-feilene – manglende alt-tekst, umerkede felt, brutt overskriftshierarki, tekst med lav kontrast og vage lenker – før en side sendes, sammen med (ikke i stedet for) en fullstendig manuell gjennomgang eller et dedikert revisjonsverktøy for alt som sendes til produksjon.