0

HTML Akadálymentességi Auditor

Illesszen be nyers HTML-t, és kapjon valódi WCAG akadálymentesítési auditot: egy kézzel írt DOM-bejáró ellenőrzi a képeket, űrlapcímkéket, címsorrendet és linkek szövegét, plusz egy valódi relativ fénysűrűség-alapú kontrasztarány-kalkulátor, ami a valós AA/AAA küszöbértékek alapján pontoz — külső könyvtár nélkül, semmi sem kerül elküldésre.

🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.

Önálló kontrasztellenőrző

Ellenőrizzen közvetlenül bármilyen előtér-/háttérszín-párost — hex, rgb(), hsl() vagy nevesített színek, mint a 'tomato' egyaránt működnek.

Feldolgozás... 0%
HTML feldolgozása valódi DOM-má
A DOM-fa bejárása a WCAG-ellenőrzésekhez
Kontrasztarányok kiszámítása
Kész

Eredmény

A legtöbb gyors akadálymentességi ellenőrzés vagy felszínes kulcsszó-keresés, vagy egy nehézsúlyú könyvtár, amiben fekete dobozként kell megbíznunk. Ez az eszköz egy harmadik utat választ: a beillesztett HTML-t a böngésző saját, beépített DOMParser-ével elemzi — nincs axe-core, nincs külső akadálymentességi könyvtár, semmi letöltés —, majd a létrejött DOM-fát egy sor kézzel írt ellenőrzéssel járja be, amelyek a gyakori, valós WCAG 2.1 hibamintákat tükrözik. Ez azt jelenti, hogy a logika teljes mértékben áttekinthető, és az audit teljes egészében a böngészőben fut: a beillesztett jelölés és a tesztelt színpárok soha nem kerülnek feltöltésre vagy elküldésre sehova.

Az ellenőrzések azokat a hibákat fedik le, amelyek a valódi oldalakon a leggyakrabban előfordulnak: alt attribútum nélküli <img> elemek (valódi WCAG-hiba, elkülönítve a szándékosan üres alt="" dekoratív képektől, amelyek helyesen nem kerülnek megjelölésre), olyan űrlapelemek, ahol a segítő technológia nem tudja, mire valók (minden valódi címke-útvonalat ellenőriz — megfelelő <label for>, <label>-be csomagolás, vagy aria-label/aria-labelledby attribútum), figyelmeztetés nélkül átugrott címsorszintek (egy <h1>-ből egyenesen <h3>-ba, vagy egyáltalán nincs <h1>, esetleg több is van), href nélküli vagy homályos, kontextus nélküli linkek, mint a „kattints ide” vagy „tovább”, valamint hiányzó lang attribútum, amikor egy teljes HTML dokumentumot (nem csak egy részletet) illesztettek be.

A kiemelkedő elem a valódi kontrasztszámítás, nem egy felszínes 'olvashatónak tűnik' heurisztika. Minden olyan elem esetében, amely inline color és background-color stílussal rendelkezik, az eszköz kiolvassa mindkét értéket, a böngésző saját CSS-motorján keresztül valódi RGB-számokká alakítja őket (így a hex, rgb(), hsl() és a nevesített színek, mint a 'tomato' egyformán működnek), és kiszámítja a pontos WCAG szerinti relativ fénysűrűséget mindegyikre — L = 0,2126×R + 0,7152×G + 0,0722×B, ahol minden csatornát először gamma-korrigál a valódi sRGB átviteli görbével —, mielőtt beillesztené őket a hivatalos kontrasztarány-képletbe, (világosabb L + 0,05) / (sötétebb L + 0,05). Az elem saját font-size és font-weight értéke dönti el, hogy a szigorúbb 'normál szöveg' vagy a megengedőbb 'nagy szöveg' küszöbértékek (18pt+, vagy 14pt+ félkövér) érvényesek-e, és az eredményt egyszerre mind a négy valódi WCAG-értékkel összeveti: 4,5:1 és 3:1 az AA-hoz, 7:1 és 4,5:1 az AAA-hoz — soha nem vonja össze egyetlen hamis jó/rossz ítéletté.

Ez tudatosan egy őszinte, pragmatikus részhalmaza a teljes akadálymentességi auditnak, nem egy tanúsító eszköz: nem értékeli a JavaScript-vezérelt interaktivitást, az alapvető címkézésen túli ARIA widget-mintákat, a billentyűzetes fókuszsorrendet, vagy bármit, amihez az oldal tényleges renderelése és futtatása szükséges. Tekintsen rá úgy, mint egy gyors első körre, ami elkap néhányat a leggyakoribb és legsúlyosabb WCAG-hibákból — hiányzó alt szöveg, címkézetlen mezők, törött címsorhierarchia, alacsony kontrasztú szöveg és homályos linkek — mielőtt egy oldal kikerül, a teljes körű manuális átvizsgálás vagy egy dedikált auditáló eszköz mellett (nem helyette), minden élesbe kerülő projekt esetében.