Проверка доступности
Проверяйте фрагменты 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, содержащим конфиденциальные данные.