Перевірка доступності HTML (WCAG 2.2)

Вставте фрагмент HTML або всю сторінку. Перевірка показує її в ізольованому фреймі, запускає у вашому браузері відкритий рушій axe-core і виводить проблеми за рівнем впливу: кожна з кодом, що не пройшов перевірку, критерієм успіху WCAG і порадою, як виправити. Нічого не надсилається на наш сервер.

Що ви бачите в результаті

• Проблеми за впливом: критичні, серйозні, помірні й незначні; спочатку правило, яке трапляється найчастіше.
• Критерій успіху кожної проблеми як посилання, наприклад 1.1.1 Нетекстовий вміст, із рівнем (A або AA).
• Елементи з помилкою: CSS-селектор і HTML кожного, щоб знайти його в коді.
• Як виправити з нашої бібліотеки правил мовою цієї сторінки та посилання на повне пояснення.
• «Потрібен погляд людини»: випадки, у яких правило не змогло вирішити, наприклад колір на фоновому зображенні. Перевірте їх вручну.

Що залишається на вашому комп'ютері

Браузер розбирає ваш HTML і показує його в iframe з sandbox="allow-same-origin" та суворою політикою безпеки вмісту: жоден скрипт вашого фрагмента не виконується, форми не надсилаються, а посилання відкриваються в новій вкладці. За замовчуванням попередній перегляд не завантажує зображення й стилі з інших сайтів; увімкніть опцію, якщо фрагменту потрібна зовнішня таблиця стилів. axe-core завантажується з нашого сервера під час першого натискання кнопки, а перевірка йде у вашому браузері. Ваш код до нас не потрапляє.

Фрагмент чи вся сторінка

Фрагмент не є сторінкою, тому правила про сторінку загалом (заголовок сторінки, атрибут lang, орієнтири, заголовок першого рівня, посилання «перейти до вмісту») для фрагментів вимкнено. Вставте повний документ, що починається з <!doctype html> або <html>, і вони теж перевірятимуться. Опція «додати правила найкращих практик» додає поради, яких WCAG не вимагає; зніміть її, щоб бачити лише проблеми WCAG.

Чого перевірка вставленого HTML не знайде

• Те, що сторінка додає пізніше. У коді сторінки немає того, що скрипти будують згодом. Скопіюйте готовий HTML з інструментів розробника («Copy outerHTML») або перевірте живу адресу в WCAG-перевірці.
• Стилі, яких ви не вставили. Контраст кольорів, рамки фокусу й міжрядкові відступи залежать від CSS. Кольори перевіряйте в перевірці контрасту.
• Усе, що потребує людини. Чи опис зображення відповідає змісту, чи логічний порядок читання, чи може користувач клавіатури оформити замовлення, як звучить сторінка у програмі читання з екрана. Див. як тестувати WCAG.

Це автоматична перевірка, а не повний аудит, і не юридична консультація. Відсутність знахідок не означає, що HTML доступний.

Це не валідатор у розумінні W3C

«Валідатор» синтаксису HTML перевіряє, чи розмітка відповідає специфікації HTML. Цей інструмент перевіряє правила доступності: кнопки без назви, зображення без альтернативного тексту, поля форм без підписів, хибні атрибути ARIA. Це різні питання: сторінка може бути валідним HTML і не пройти WCAG, і навпаки. У WCAG 2.2 критерію 4.1.1 «Розбір» більше немає; зламана розмітка важлива тоді, коли ламає назви, ролі чи зв'язки (4.1.2, 1.3.1).

Де це доречно

Використовуйте під час написання компонента або перегляду шаблону від клієнта. Для живої сторінки є WCAG-перевірка, для сторінок за логіном — розширення для браузера. Інші інструменти порівняно в огляді інструментів тестування доступності. Pandus запускає такі перевірки на кожній сторінці вашого сайту щотижня й пояснює кожну проблему мовою власника.

Відповіді на часті питання

Чи надсилається мій код на сервер?

Ні. HTML показується й перевіряється у вашому браузері. З нашого сервера завантажуються лише сама сторінка та скрипт перевірки; код, який ви вставляєте, нікуди не надсилається.

Чи виконує перевірка скрипти з мого HTML?

Ні. Попередній перегляд працює в ізольованому фреймі без дозволу на скрипти, тому вбудовані скрипти, обробники подій і теги script нічого не роблять. Вміст, який додали б скрипти, не перевіряється.

За якими правилами працює перевірка?

За правилами axe-core для WCAG 2.0, 2.1 і 2.2 рівнів A та AA, а також за правилами найкращих практик, якщо залишити цю опцію. Знахідки пояснено нашими картками правил.

Це валідатор W3C?

Ні. Він не перевіряє синтаксис HTML. Він перевіряє правила доступності, а це інше питання.

Чи може інструмент підтвердити, що мій HTML відповідає WCAG або EAA?

Ні. Автоматичні правила знаходять лише частину проблем. Потрібна ще ручна перевірка з клавіатурою та програмою читання з екрана, а цей інструмент не є юридичною консультацією.