0

Одитор за достъпност на HTML

Поставете необработен HTML и получете истински одит на достъпност на WCAG: ръчно изграден DOM Walker проверява изображения, етикети на формуляри, ред на заглавия и текст на връзката, плюс истински калкулатор за съотношение на контраст на относителна яркост, оценяван спрямо реалните прагове AA/AAA — без външна библиотека, нищо изпратено никъде.

Самостоятелна проверка на контраста

Проверете директно всяка двойка цветове на преден план/фон — шестнадесетичен, rgb(), hsl() или наименуван цвят като „домат“ работят.

Buy Me a Coffee at ko-fi.com
Обработка... 0%
Разбор на HTML в истински DOM
Разходка по дървото за проверки на WCAG
Изчисляване на контрастни съотношения
Готово

Резултат

Повечето бързи проверки за достъпност са или повърхностно сканиране на ключови думи, или тежка библиотека, на която трябва да се доверите като на черна кутия. Този инструмент има трети път: той анализира всеки HTML, който поставите, като използва собствения вграден DOMParser на браузъра — без axe-core, без външна библиотека за достъпност, нищо изтеглено — и след това обхожда полученото DOM дърво с набор от ръчно написани проверки, които отразяват общи, реални WCAG 2.1 модели на отказ. Това означава, че логиката е напълно подлежаща на проверка и одитът се изпълнява изцяло във вашия браузър: маркировката, която поставяте, и всяка цветова двойка, която тествате, никога не се качват или изпращат никъде.

Проверките обхващат грешките, които се показват най-често в реални страници: <img> елементи без никакъв атрибут alt (истинска грешка на WCAG, различна от умишлено празния alt="" използван за декоративни изображения, който е правилно оставен немаркиран), контроли на формуляри без начин за помощна технология да разбере за какво служат (проверява се спрямо всеки реален път към етикет - съвпадащ <етикет за>, който е обвит в <label> или атрибут aria-label/aria-labelledby), нива на заглавия, които прескачат без предупреждение (<h1> направо към <h3> или документ без <h1> изобщо или повече от един), връзки без href или с неясен текст извън контекста като „щракнете тук“ или „прочетете повече“ и липсващ атрибут lang, когато е поставен цял HTML документ (а не само фрагмент).

Отличителното парче е истинска контрастна математика, а не повърхностна евристика „изглежда четимо“. За всеки елемент, носещ вграден цвят и цвят на фона, инструментът чете и двете стойности, разрешава ги в реални RGB числа чрез собствения CSS двигател на браузъра (така че hex, rgb(), hsl() и именувани цветове като „домат“ всички работят идентично) и изчислява точната WCAG относителна осветеност за всяка — L = 0,2126×R + 0,7152×G + 0,0722×B, като всеки канал първо се коригира гама-коригиран с помощта на реалната sRGB трансферна крива — преди да се комбинират в официалната формула за контрастно съотношение (по-светъл L + 0,05) / (по-тъмен L + 0,05). Собственият размер на шрифта и теглото на шрифта на елемента решават дали се прилагат по-строгите прагове за „нормален текст“ или по-меките прагове за „голям текст“ (18pt+ или 14pt+ получер) и резултатът се проверява спрямо четирите реални WCAG числа наведнъж: 4,5:1 и 3:1 за AA, 7:1 и 4,5:1 за AAA — никога не се свива в една фалшива добра/лоша присъда.

Това е умишлено честен, прагматичен подмножество на пълен одит на достъпността, а не инструмент за сертифициране: той не оценява интерактивността, управлявана от JavaScript, моделите на джаджи ARIA извън основното етикетиране, реда на фокусиране на клавиатурата или нещо, което изисква действително изобразяване и стартиране на страницата. Отнасяйте се към него като към бързо първо преминаване, което улавя някои от най-честите и най-последователни неизправности на WCAG — липсващ алтернативен текст, немаркирани полета, повредена йерархия на заглавия, текст с нисък контраст и неясни връзки — преди страницата да бъде изпратена, заедно (не вместо) с пълен ръчен преглед или специален инструмент за одитиране за всичко, което се доставя до производството.