⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

HTML-tilgjengelighetsrevisor

Lim inn rå HTML og få en ekte WCAG-tilgjengelighetsrevisjon: en håndbygd DOM-gjennomgang sjekker bilder, skjemaledetekster, overskriftsrekkefølge og lenketekst, pluss en ekte kalkulator for relativ luminans og kontrastforhold vurdert mot de reelle AA/AAA-terskelverdiene — intet eksternt bibliotek, ingenting sendt noe sted.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

Frittstående kontrastsjekker

Sjekk et hvilket som helst fargepar for forgrunn/bakgrunn direkte – hex, rgb(), hsl() eller en navngitt farge som 'tomato' fungerer alle.

Behandler … 0%
Tolker HTML til et ekte DOM
Går gjennom treet for WCAG-sjekker
Beregner kontrastforhold
Ferdig

Resultat

De fleste raske tilgjengelighetssjekker er enten en overfladisk nøkkelordskanning eller et tungt bibliotek du må stole på som en svart boks. Dette verktøyet tar en tredje vei: det tolker HTML-en du limer inn ved hjelp av nettleserens egen innebygde DOMParser – ingen axe-core, intet eksternt tilgjengelighetsbibliotek, ingenting nedlastet – og går deretter gjennom det resulterende DOM-treet med et sett håndskrevne sjekker som speiler vanlige, reelle WCAG 2.1-feilmønstre. Det betyr at logikken er fullt gjennomskuelig, og revisjonen kjøres fullstendig inne i nettleseren din: markup-en du limer inn, og ethvert fargepar du tester, blir aldri lastet opp eller sendt noe sted.

Sjekkene dekker feilene som dukker opp oftest på ekte sider: <img>-elementer uten alt-attributt i det hele tatt (en reell WCAG-feil, forskjellig fra det bevisst tomme alt="" som brukes for dekorative bilder, som korrekt ikke flagges), skjemaelementer uten noen måte for hjelpeteknologi å vite hva de er til (sjekket opp mot enhver reell vei til en ledetekst – en matchende <label for>, omsluttet av en <label> eller et aria-label/aria-labelledby-attributt), overskriftsnivåer som hopper uten forvarsel (en <h1> rett til en <h3>, eller et dokument uten <h1> i det hele tatt, eller mer enn én), lenker uten href eller med vag, utenfor kontekst tekst som 'klikk her' eller 'les mer', og et manglende lang-attributt når et fullstendig HTML-dokument (ikke bare et fragment) limes inn.

Det fremtredende stykket er ekte kontrastmatematikk, ikke en overfladisk 'ser lesbar ut'-heuristikk. For ethvert element som bærer en innebygd farge og bakgrunnsfarge, leser verktøyet begge verdiene, slår dem opp til ekte RGB-tall via nettleserens egen CSS-motor (slik at hex, rgb(), hsl() og navngitte farger som 'tomato' fungerer identisk), og beregner den eksakte WCAG relative luminansen for hver – L = 0,2126×R + 0,7152×G + 0,0722×B, med hver kanal gammakorrigert først ved bruk av den ekte sRGB-overføringskurven – før de kombineres til den offisielle formelen for kontrastforhold: (lysere L + 0,05) / (mørkere L + 0,05). Elementets egen skriftstørrelse og skriftvekt avgjør om de strengere tersklene for 'normal tekst' eller de mildere tersklene for 'stor tekst' (18pt+, eller 14pt+ fet) gjelder, og resultatet sjekkes mot alle fire reelle WCAG-tall samtidig: 4,5:1 og 3:1 for AA, 7:1 og 4,5:1 for AAA – aldri sammenslått til en enkelt falsk god/dårlig-vurdering.

Dette er et bevisst ærlig, pragmatisk delsett av en full tilgjengelighetsrevisjon, ikke et sertifiseringsverktøy: det evaluerer ikke JavaScript-drevet interaktivitet, ARIA-widgetmønstre utover grunnleggende etikettering, tastaturfokusrekkefølge eller noe som krever faktisk rendering og kjøring av siden. Betrakt det som en rask førstegjennomgang som fanger opp noen av de vanligste og mest konsekvenstunge WCAG-feilene – manglende alt-tekst, uetiketterte felter, ødelagt overskriftshierarki, tekst med lav kontrast og vage lenker – før en side sendes ut, ved siden av (ikke i stedet for) en full manuell gjennomgang eller et dedikert revisjonsverktøy for alt som sendes til produksjon.

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

  • Går gjennom et ekte DOM tolket med nettleserens innebygde DOMParser: flagger <img> som mangler et alt-attributt (samtidig som alt="" behandles korrekt som et bevisst, samsvarende dekorasjonsmerke), og <input>/<select>/<textarea> uten <label for>, uten omsluttende <label> og uten aria-label/aria-labelledby.
  • Sjekker overskriftsstrukturen for manglende eller duplisert <h1> og for oversprungne nivåer (en <h1> direkte etterfulgt av en <h3> uten en <h2> imellom) ved å bruke den faktiske overskriftsrekkefølgen i dokumentet.
  • Beregner ekte WCAG-kontrastforhold for ethvert element med en innebygd farge- og bakgrunnsfargestil, leser skriftstørrelsen/skriftvekten for å bruke riktig terskel for 'stor tekst', og vurderer resultatet mot alle fire reelle terskler: 4,5:1 (AA normal), 3:1 (AA stor), 7:1 (AAA normal) og 4,5:1 (AAA stor).
  • Inkluderer en frittstående sjekker for fargepar (forgrunn/bakgrunn) som håndterer enhver gyldig CSS-farge: hex, rgb(), hsl(), navngitte farger, slik at du kan teste en fargekombinasjon direkte uten å lime inn markup, pluss sjekker for lenke og <html lang>.

Viktigste fordeler

✓ En ekte kalkulator for relativ luminans som bruker den eksakte WCAG 2.x-formelen (gammakorrigerte sRGB-kanaler, deretter (L1+0,05)/(L2+0,05)) — ikke en omtrentlig 'ser mørkt nok ut'-gjetning.
✓ Hvert funn viser den nøyaktige HTML-snutten som bryter reglene, slik at du kan finne og rette den umiddelbart i stedet for å få en ren bestått/ikke bestått-telling.
✓ Håndbygde DOM-gjennomgangssjekker, ikke et ugjennomsiktig bibliotek: bilder uten alt, skjemafelter uten reell ledetekst, oversprungne overskriftsnivåer, lenker uten href eller med generisk tekst som 'klikk her'.
✓ 100 % offline – HTML-en du limer inn, og ethvert fargepar du sjekker, forlater aldri nettleseren din.

Bruksområder

  • • Lim inn en sideseksjon før den publiseres for å fange et manglende <img alt>, et <input> uten ledetekst, eller et overskriftsnivå som hopper fra h1 rett til h3.
  • • Lim inn et elements inline color- og background-color-style for å få det reelle WCAG-kontrastforholdet og se nøyaktig hvilke av AA/AAA- og normal/stor tekst-tersklene det består eller ikke består.
  • • Bruk den frittstående forgrunns-/bakgrunnsfargesjekkeren til å teste et merkevarefargepar mot WCAG 4,5:1 (AA) og 7:1 (AAA) før du låser det fast i et designsystem.