Аудитор доступності HTML
Вставте вихідний HTML і отримайте справжній аудит доступності за WCAG: власноруч реалізований обхід DOM перевіряє зображення, мітки полів, порядок заголовків і текст посилань, плюс справжній калькулятор відносної яскравості та коефіцієнта контрастності, оцінений за реальними порогами AA/AAA — жодних зовнішніх бібліотек, нічого нікуди не надсилається.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Більшість швидких перевірок доступності — це або поверхневе сканування за ключовими словами, або важка бібліотека, якій ви змушені довіряти, як «чорному ящику». Цей інструмент іде третім шляхом: він розбирає будь-який вставлений вами HTML за допомогою вбудованого в браузер DOMParser — без axe-core, без зовнішніх бібліотек доступності, без жодних завантажень — а потім обходить отримане дерево DOM із набором власноруч написаних перевірок, що відтворюють поширені реальні патерни помилок WCAG 2.1. Це означає, що логіку можна повністю перевірити, а аудит виконується цілком у вашому браузері: розмітка, яку ви вставляєте, і будь-яка перевірена колірна пара ніколи не вивантажуються й нікуди не надсилаються.
Перевірки охоплюють помилки, що найчастіше трапляються на реальних сторінках: елементи <img> без жодного атрибута alt (справжня помилка WCAG, на відміну від свідомо порожнього alt="" для декоративних зображень, який коректно не позначається); елементи керування форм, для яких допоміжні технології не можуть визначити їхнє призначення (перевіряється кожен реальний шлях до мітки — відповідний <label for>, перебування всередині <label> або атрибут aria-label/aria-labelledby); рівні заголовків, які несподівано перескакують (<h1> одразу до <h3>, або документ узагалі без <h1>, або більше одного); посилання без href або з неконкретним, позаконтекстним текстом на кшталт «натисніть тут» чи «читати далі»; а також відсутність атрибута lang, коли вставлено повний HTML-документ (а не просто фрагмент).
Найвизначніша частина — це справжня математика контрастності, а не поверхнева евристика «виглядає читабельним». Для будь-якого елемента, що має рядковий стиль color і background-color, інструмент зчитує обидва значення, перетворює їх на реальні числа RGB через власний рушій CSS браузера (тож hex, rgb(), hsl() та іменовані кольори на кшталт «tomato» працюють однаково) і обчислює точну відносну яскравість WCAG для кожного — L = 0.2126×R + 0.7152×G + 0.0722×B, причому кожен канал попередньо гамма-коригується за справжньою передавальною кривою sRGB — після чого підставляє їх в офіційну формулу коефіцієнта контрастності: (світліша L + 0.05) / (темніша L + 0.05). Власний font-size та font-weight елемента визначають, чи застосовувати суворіші пороги для «звичайного тексту» чи м’якші для «великого тексту» (18pt+ або 14pt+ жирний), а результат одразу перевіряється за всіма чотирма реальними числами WCAG: 4.5:1 і 3:1 для AA, 7:1 і 4.5:1 для AAA — ніколи не зводиться до єдиного фальшивого вердикту «добре/погано».
Це свідомо чесна, прагматична підмножина повного аудиту доступності, а не інструмент сертифікації: він не оцінює інтерактивність, що керується JavaScript, патерни ARIA-віджетів поза базовим позначенням, порядок фокусу клавіатури чи будь-що, що потребує фактичного рендерингу й виконання сторінки. Сприймайте це як швидку першу перевірку, що виявляє деякі з найпоширеніших і найвагоміших помилок WCAG — відсутній alt-текст, непозначені поля, порушену ієрархію заголовків, низькоконтрастний текст і неконкретні посилання — перед випуском сторінки, разом із (а не замість) повним ручним оглядом або спеціалізованим засобом аудиту для всього, що йде у виробництво.