⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

HTML revizor pristupačnosti

Zalijepite sirovi HTML i dobit ćete stvarnu WCAG reviziju pristupačnosti: ručno izgrađen program za obilazak DOM stabla provjerava slike, oznake obrazaca, redoslijed naslova i tekst poveznica, zajedno s pravim kalkulatorom omjera kontrasta prema relativnoj luminanciji, koji se boduje prema stvarnim AA/AAA pragovima — bez vanjskih biblioteka, ništa se nigdje ne šalje.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Samostalni alat za provjeru kontrasta

Izravno provjerite bilo koji par boja prednjeg plana i pozadine — hex, rgb(), hsl() ili imenovana boja poput 'tomata', sve radi.

Obrada... 0%
Raščlanjujem HTML u stvarni DOM
Oblazim stablo radi WCAG provjera
Računam omjere kontrasta
Gotovo

Rezultat

Većina brzih provjera pristupačnosti predstavlja ili površno skeniranje ključnih riječi ili tešku biblioteku kojoj morate vjerovati kao crnoj kutiji. Ovaj alat ide trećim putem: parsira HTML koji zalijepite koristeći izvorni preglednikov DOMParser — bez axe-core biblioteke, bez vanjskih biblioteka za pristupačnost, ništa se ne preuzima — a zatim prolazi kroz nastalo DOM stablo skupom ručno napisanih provjera koje zrcale uobičajene, stvarne obrasce neuspjeha prema WCAG 2.1. To znači da je logika u potpunosti dostupna za uvid, a revizija se u cijelosti izvodi unutar vašeg preglednika: markup koji zalijepite, kao i bilo koji par boja koji testirate, nikada se ne učitavaju niti bilo kamo šalju.

Provjere pokrivaju neuspjehe koji se najčešće pojavljuju na stvarnim stranicama: <img> elemente bez ikakvog alt atributa (stvarni WCAG neuspjeh, različit od namjerno praznog alt="" koji se koristi za ukrasne slike i koji se ispravno ne označava), kontrole obrasca za koje pomoćna tehnologija ne može znati čemu služe (provjerava se svaki stvarni put do oznake — odgovarajući <label for>, omotavanje unutar <label> elementa, ili aria-label/aria-labelledby atribut), razine naslova koje preskaču bez upozorenja (izravan skok s <h1> na <h3>, ili dokument bez ikakvog <h1>, ili više od jednog <h1>), poveznice bez href atributa ili s nejasnim, kontekstno izdvojenim tekstom poput "klikni ovdje" ili "pročitaj više", te nedostajući lang atribut kada je zalijepljen cijeli HTML dokument (ne samo fragment).

Istaknuti dio je pravi kontrastni izračun, a ne površna heuristika 'izgleda čitljivo'. Za svaki element koji nosi inline color i background-color svojstvo, alat čita obje vrijednosti, razrješuje ih do stvarnih RGB brojeva putem vlastitog CSS mehanizma preglednika (tako da hex, rgb(), hsl() i imenovane boje poput 'tomata' rade identično) i izračunava točnu WCAG relativnu luminanciju za svaku — L = 0,2126×R + 0,7152×G + 0,0722×B, pri čemu je svaki kanal prvo gama-korigiran stvarnom sRGB prijenosnom krivuljom — prije nego što se spoje u službenu formulu omjera kontrasta, (svjetliji L + 0,05) / (tamniji L + 0,05). Vlastiti font-size i font-weight elementa određuju primjenjuju li se stroži pragovi za 'normalan tekst' ili blaži pragovi za 'veliki tekst' (18pt+ ili 14pt+ podebljano), a rezultat se istovremeno provjerava prema sva četiri stvarna WCAG broja: 4,5:1 i 3:1 za AA, 7:1 i 4,5:1 za AAA — nikada svedeno na jedinstvenu lažnu presudu dobro/loše.

Ovo je namjerno iskren, pragmatičan podskup cjelovite revizije pristupačnosti, a ne alat za certifikaciju: ne ocjenjuje interaktivnost temeljenu na JavaScriptu, ARIA widget obrasce izvan osnovnog označavanja, redoslijed fokusa tipkovnice, niti bilo što što zahtijeva stvarno iscrtavanje i izvršavanje stranice. Tretirajte ga kao brzi prvi prolazak koji hvata neke od najčešćih i najznačajnijih WCAG neuspjeha — nedostajući alt tekst, neoznačena polja, narušenu hijerarhiju naslova, tekst niskog kontrasta i nejasne poveznice — prije objave stranice, uz (a ne umjesto) potpuni ručni pregled ili namjenski alat za reviziju za sve što se šalje u produkciju.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Prolazi kroz stvarni DOM parsiran izvornim preglednikovim DOMParser-om: označava <img> elemente kojima nedostaje alt atribut (ispravno tretirajući alt="" kao namjeran, sukladan ukrasni biljeg), te <input>/<select>/<textarea> elemente bez odgovarajućeg <label for>, bez omatajućeg <label> elementa i bez aria-label/aria-labelledby atributa.
  • Provjerava strukturu naslova za nedostajući ili duplicirani <h1> te za preskočene razine (<h1> izravno slijedi <h3>, bez <h2> između) koristeći stvarni redoslijed naslova u dokumentu.
  • Računa stvarne WCAG omjere kontrasta za bilo koji element s inline color i background-color svojstvom, čitajući njegov font-size i font-weight kako bi primijenio ispravan prag za 'veliki tekst' te boduje rezultat prema sva četiri stvarna praga: 4,5:1 (AA normalan), 3:1 (AA velik), 7:1 (AAA normalan) i 4,5:1 (AAA velik).
  • Uključuje samostalni alat za provjeru parova boja prednjeg plana i pozadine (bilo koja valjana CSS boja: hex, rgb(), hsl(), imenovana boja) tako da možete izravno testirati kombinaciju boja bez umetanja ijednog markupa, uz provjere poveznica i <html lang> atributa.

Ključne prednosti

✓ Pravi kalkulator kontrasta relativne luminancije prema egzaktnoj WCAG 2.x formuli (gama-korigirani sRGB kanali, zatim (L1+0,05)/(L2+0,05)) — a ne gruba procjena 'dovoljno je tamno'.
✓ Svaki nalaz prikazuje točno onaj problematični HTML isječak, tako da ga odmah možete pronaći i ispraviti, umjesto da dobijete samo ogoljeni broj prolaza/padova.
✓ Ručno izgrađene provjere obilaskom DOM stabla, a ne gotova biblioteka: slike bez alt tekstova, polja obrasca bez stvarne oznake, preskočene razine naslova, poveznice bez href atributa ili s generičkim tekstom poput 'klikni ovdje'.
✓ 100 % izvanmrežno — HTML koji zalijepite, kao i bilo koji par boja koji provjerite, nikada ne napuštaju vaš preglednik.

Slučajevi upotrebe

  • • Zalijepite dio stranice prije objave kako biste uhvatili nedostajući <img alt>, neoznačeni <input> ili razinu naslova koja preskače s h1 ravno na h3.
  • • Zalijepite inline boju i boju pozadine elementa kako biste dobili stvarni WCAG omjer kontrasta i točno vidjeli koje pragove AA/AAA, normalnog/velikog teksta zadovoljava, a koje ne.
  • • Koristite samostalni alata za provjeru boje prednjeg plana i pozadine za testiranje para boja brenda prema WCAG 4,5:1 (AA) i 7:1 (AAA) prije nego što ga zaključate u dizajnerskom sustavu.