Перевірка доступності
Перевіряйте фрагменти HTML на поширені проблеми доступності WCAG та отримуйте практичні поради щодо виправлення
Ввід HTML
Що ми перевіряємо
Альтернативний текст зображень
Перевіряє, що всі елементи <img> мають атрибут alt, щоб програми зчитування з екрана могли описувати зображення користувачам.
Мітки форм
Перевіряє, що всі поля форм мають пов'язані мітки за допомогою <label for>, aria-label або aria-labelledby.
Ієрархія заголовків
Гарантує, що заголовки йдуть у логічному порядку (h1, h2, h3...) без пропуску рівнів.
Текст посилань
Виявляє порожні посилання та загальні тексти на кшталт «натисніть тут», які не несуть сенсу для користувачів програм зчитування з екрана.
Атрибут мови
Перевіряє наявність атрибута lang на елементі <html>, що допомагає програмам зчитування з екрана використовувати правильну вимову.
ARIA та інтерактивні елементи
Перевіряє, що інтерактивні елементи мають відповідні ролі та мітки ARIA для підтримки допоміжних технологій.
Перевірка доступності
Перевіряйте фрагменти HTML на поширені проблеми доступності WCAG та отримуйте практичні поради щодо виправлення
Можливості
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Як використовувати
- Вставте HTML-код у поле введення або завантажте один зі зразків, щоб побачити інструмент у дії.
- Натисніть «Перевірити доступність», щоб проаналізувати ваш HTML на поширені проблеми WCAG за понад 12 правилами доступності.
- Перегляньте результати, згруповані за рівнем важливості, прочитайте поради щодо виправлення та оновіть HTML, щоб усунути знайдені проблеми.
Поради та найкращі практики
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
Запитання та відповіді
Які проблеми доступності перевіряє цей інструмент?
Інструмент перевіряє понад 12 поширених проблем доступності WCAG, зокрема: відсутні атрибути alt у зображень, поля форм без пов'язаних міток, порушення ієрархії заголовків (пропущені рівні), порожні посилання та загальні тексти посилань, відсутній атрибут lang на елементі HTML, інтерактивні елементи без ролей або міток ARIA, порожні кнопки, застарілі елементи HTML, додатні значення tabindex, які порушують порядок табуляції, медіаелементи з autoplay та відсутні заголовки документів. Кожну проблему зіставлено з конкретними критеріями успіху WCAG.
Чи замінює це повний аудит WCAG?
Ні, цей інструмент перевіряє лише поширені проблеми рівня HTML, які можна виявити під час розбору розмітки. Повноцінний аудит WCAG 2.1 чи 2.2 передбачає тестування з реальними допоміжними технологіями, такими як програми зчитування з екрана, перевірку коефіцієнтів контрастності, підтвердження навігації з клавіатури, тестування динамічних оновлень вмісту та оцінку когнітивної доступності. Цей інструмент — чудовий перший крок, щоб виявити найпоширеніші проблеми перед повним ручним аудитом.
Яка різниця між помилками та попередженнями?
Помилки вказують на явні порушення доступності, які напевно вплинуть на користувачів допоміжних технологій. Наприклад, відсутній атрибут alt у зображення — це помилка, оскільки програми зчитування з екрана не можуть описати зображення. Попередження вказують на потенційні проблеми, що можуть бути або не бути проблемою залежно від контексту. Наприклад, порожній атрибут alt — це попередження, бо він коректний для декоративних зображень, але неправильний для інформативних. Успішні перевірки підтверджують, що певна вимога виконана.
Чи можна перевірити URL-адресу живого сайту замість вставки HTML?
Цей інструмент призначений для перевірки фрагментів HTML, які ви вставляєте безпосередньо. Щоб тестувати живі сайти, потрібно переглянути вихідний код сторінки або скористатися інструментами розробника браузера, щоб скопіювати HTML і вставити його сюди. Для тестування живих сайтів варто також розглянути браузерні розширення, як-от axe DevTools чи Lighthouse, які здатні аналізувати відмальований DOM, включно з динамічно згенерованим вмістом.
Чому атрибут lang на елементі HTML такий важливий?
Атрибут lang повідомляє програмам зчитування з екрана та іншим допоміжним технологіям, якою мовою написано вміст. Без нього програма зчитування з екрана може спробувати озвучити англійський текст за правилами французької вимови, що робить його незрозумілим. Він також впливає на те, як браузери обробляють перенесення, перевірку правопису та інші мовно-залежні функції. Встановлення lang — це одне з найпростіших, але найвпливовіших поліпшень доступності, які ви можете зробити.
Чи надсилається мій HTML-код на сервер для аналізу?
Ні, весь аналіз повністю відбувається у вашому браузері за допомогою JavaScript. Ваш HTML-код ніколи не залишає ваш пристрій. Інструмент розбирає HTML за допомогою вбудованого в браузер API DOMParser і виконує всі перевірки доступності локально. Завдяки цьому його безпечно використовувати з пропрієтарним кодом, внутрішніми проєктами чи будь-яким HTML із конфіденційним вмістом.