0

HTML Accessibility Auditor

Illesszen be nyers HTML-t, és kap egy valódi WCAG kisegítő auditot: egy kézzel épített DOM-járó ellenőrzi a képeket, az űrlapcímkéket, a fejlécek sorrendjét és a linkszöveget, valamint egy valódi relatív fénysűrűség kontrasztarány-kalkulátort, amely a valós AA/AAA küszöbértékekhez viszonyítva pontozható – nincs külső könyvtár, nem küldenek semmit sehova.

Önálló kontrasztellenőrző

Közvetlenül ellenőrizze az előtér/háttér színpárt – a hexa, rgb(), hsl() vagy egy elnevezett szín, például a „paradicsom”, minden működik.

Buy Me a Coffee at ko-fi.com
Feldolgozás... 0%
HTML elemzése valódi DOM-má
Séta a fán a WCAG ellenőrzésekért
Kontrasztarányok számítása
Kész

Eredmény

A legtöbb gyors hozzáférhetőség ellenőrzése vagy egy felületes kulcsszóvizsgálat, vagy egy nehézsúlyú könyvtár, amelyben fekete dobozként kell megbíznia. Ez az eszköz egy harmadik utat választ: elemzi a beillesztett HTML-kódot a böngésző saját beépített DOMParser használatával – nincs tengelymag, nincs külső akadálymentesítési könyvtár, nincs letöltve –, majd végigjárja az eredményül kapott DOM-fát egy sor kézzel írt ellenőrzéssel, amelyek tükrözik a gyakori, valódi WCAG 2.1 hibamintákat. Ez azt jelenti, hogy a logika teljesen ellenőrizhető, és az ellenőrzés teljes mértékben a böngészőben fut: a beillesztett jelölések és a tesztelt színpárok soha nem kerülnek feltöltésre vagy elküldésre.

Az ellenőrzések a valódi oldalakon leggyakrabban felbukkanó hibákat fedik le: <img> elemek, amelyek egyáltalán nem tartalmaznak alt attribútumot (valódi WCAG-hiba, amely különbözik a dekoratív képekhez használt szándékosan üres alt=""-tól, amely helyesen nincs megjelölve), olyan űrlapvezérlők, amelyeknél a segítő technológia nem tudja megtudni, hogy ezek mire valók (ellenőrizték a címke minden valós elérési útját – egy megfelelő <label> vagy egy wrap> aria-label/aria-labelledby attribútum), figyelmeztetés nélkül ugró fejlécszintek (egy <h1> egyenesen egy <h3>-ra, vagy egy olyan dokumentum, amelyben egyáltalán nincs <h1>, vagy egynél több), hivatkozások nem tartalmaznak href-et, vagy homályos, szövegkörnyezeten kívüli szöveget tartalmaznak, például „kattints ide” vagy „további információ”, valamint hiányzó lang attribútum, amikor egy teljes HTML-dokumentum bekerül (nem csak egy töredékbe).

A kiemelkedő darab valódi kontraszt matematika, nem egy felületes „olvashatónak tűnik” heurisztika. Bármely elemnél, amely beépített színt és háttérszínt hordoz, az eszköz mindkét értéket beolvassa, a böngésző saját CSS-motorján keresztül valós RGB-számokra oldja fel őket (tehát a hexa, rgb(), hsl() és az elnevezett színek, például a „paradicsom” mind azonosan működnek, és mindegyikre kiszámítja a pontos WCAG relatív fénysűrűséget – L = 0,2126G × 7×1R +2126G. 0,0722×B, minden csatorna gamma-korrekciójával először a valódi sRGB átviteli görbével – mielőtt a hivatalos kontrasztarány képletbe egyesítené őket (világosabb L + 0,05) / (sötétebb L + 0,05). Az elem saját betűmérete és betűsúlya dönti el, hogy a szigorúbb „normál szöveg” küszöbértékek vagy az enyhébb „nagy szöveg” küszöbértékek (18 pt+ vagy 14 pt+ félkövér) érvényesek-e, és az eredményt a rendszer mind a négy valódi WCAG számhoz hasonlítja egyszerre: 4,5:1 és 3:1 AA és 3:1 AA esetén 3:7:1. egyetlen hamis jó/rossz ítéletté omlott össze.

Ez a teljes akadálymentesítési audit szándékosan őszinte, pragmatikus részhalmaza, nem pedig tanúsítási eszköz: nem értékeli a JavaScript-vezérelt interaktivitást, az ARIA widgetek mintáit az alapvető címkézésen, a billentyűzetfókusz-renden túl, vagy bármit, ami az oldal tényleges megjelenítését és futtatását igényli. Kezelje gyors első lépésként, amely észleli a leggyakoribb és legkövetkezményesebb WCAG-hibák némelyikét – hiányzó alternatív szöveg, címkézetlen mezők, törött fejléc-hierarchia, alacsony kontrasztú szöveg és homályos hivatkozások – az oldal szállítása előtt, valamint (nem helyette) egy teljes kézi áttekintést vagy egy dedikált auditáló eszközt a gyártásba kerüléshez.