Перейти до вмісту
100% локально

Перевірка доступності HTML

Сканіруйте HTML-фрагмент на наявність проблем, які перешкоджають екранним дикторам і користувачам клавіатури.

Введення
Вихід

Перевірка доступності HTML

Вставте HTML-фрагмент, і цей інструмент відсканує його на наявність проблем, які найчастіше перешкоджають екранним дикторам, користувачам клавіатури та іншим допоміжним технологіям. Кожна виявлена проблема повідомляється з номером рядка та зрозумілим поясненням, тому ви можете виправити її без звернення до окремого документу WCAG. Інструмент сканує фрагмент, який у вас є під рукою — компонент, шаблон листа, блок CMS — а не повноцінну завантажену сторінку.

Перевірки — це параметри, які можна включати та відключати окремо: відсутній альтернативний текст на зображеннях (і порожнечний alt на зображеннях, які є єдиним вмістом посилання або кнопки), рівні заголовків, які пропускають рівень або не починаються з h1, кнопки та посилання без видимого тексту або aria-label, поля форми без пов'язаної мітки, допоміжний текст посилання, таблиці без комірок заголовків, документ без атрибута lang та дублюючі атрибути id. Фільтр серйозності звужує список до попережень та помилок або тільки помилок.

Перевірка читає лише вихідну розмітку — теги та атрибути, а не обчислені стилі або відображений макет — тому не буде виявляти проблеми контрастності або порядок фокуса, які проявляються лише після застосування CSS (для цього використовуйте перевірку контрастності). Аналіз — це найкращий результат: він допускає неправильний або неповний HTML замість відмови в роботі, оскільки вставлений фрагмент рідко має закриваючу мітку для всього.

Все відбувається локально у вашому браузері. Фрагмент, який ви вставляєте — який може надходити з невипущеної сторінки, внутрішнього інструменту або проекту клієнта — ніколи не завантажується і не відправляється на сервер. Скопіюйте звіт, завантажте його як файл .txt або відправте фрагмент назад у введення після внесення змін, щоб повторно відсканувати його.

FAQ

Це замінює повну перевірку доступності?
Ні. Це виявляє поширені механічно виявляємі проблеми в розмітці, яку ви вставляєте — відсутній альтернативний текст, порядок заголовків, непідписані поля тощо — але повна перевірка також включає контрастність кольору, порядок фокуса клавіатури, тестування екранного диктора та відображений макет, що вимагає реальної сторінки для перевірки.
Чому зображення з alt="" все ще іноді позначається як проблема?
Порожнечний alt правильно використовувати для суто декоративного зображення. Воно позначається як проблема тільки коли зображення є єдиним вмістом посилання або кнопки (залишаючи цей елемент управління без доступного імені) або коли воно має непорожній атрибут title, що вказує, що воно все ж містить інформацію.
Що вважається "дублюючим id"?
Будь-яке значення атрибута id, яке з'являється в більш ніж одному елементі у фрагменті. Дублюючі id порушують асоціації міток, посилання aria-labelledby та посилання на сторінці, оскільки використовується лише перший матч.
Можна перевірити тільки одну категорію проблем?
Так. Кожна перевірка — зображення, заголовки, інтерактивні елементи, форми, текст посилання, таблиці, мова та дублюючі id — має власний перемикач, і фільтр серйозності додатково звужує результати.
Мій HTML завантажується де-небудь?
Ні. Фрагмент аналізується та перевіряється повністю у вашому браузері за допомогою JavaScript; він ніколи не відправляється на сервер.