Категории

← View All Tools

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

Находит типовые проблемы WCAG 2.1 в HTML, страницах или макетах и возвращает рекомендации по исправлению

Примеры результатов

2 Примеры

Проверить фрагмент лендинга на отсутствие меток

Сканирует HTML-фрагмент и находит пустые кнопки, отсутствующий alt и поля без label

Accessibility report with critical issues for images, links, buttons, and forms.
Показать параметры ввода
{ "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />", "wcagLevel": "AA" }

Проверить макет на риск низкого контраста

Прогоняет дизайн-изображение через палитровый анализ контраста

Accessibility report with palette-based contrast warnings from a design image.
Показать параметры ввода
{ "designImage": "/public/samples/images/logo.png", "wcagLevel": "AAA" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/png, image/jpeg, image/webp, image/svg+xml

Ключевые факты

Категория
Validation
Типы входных данных
textarea, text, file, select
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

Инструмент «Проверка доступности» помогает разработчикам и дизайнерам находить нарушения стандарта WCAG 2.1 в HTML-коде, на веб-страницах и в графических макетах. Загрузите фрагмент кода, укажите URL или прикрепите изображение дизайна, чтобы получить подробный отчет об ошибках контрастности, отсутствующих атрибутах alt и проблемах с навигацией с клавиатуры, а также готовые рекомендации по их устранению.

Когда использовать

  • •Перед релизом новой веб-страницы для проверки соответствия стандартам a11y.
  • •На этапе дизайна для оценки цветового контраста в макетах (PNG, JPEG, WebP, SVG).
  • •При аудите существующего HTML-кода на наличие пустых ссылок, кнопок без подписей и полей без label.

Как это работает

  • •Вставьте HTML-код, укажите ссылку на страницу или загрузите изображение макета.
  • •Выберите требуемый уровень строгости проверки (WCAG AA или AAA).
  • •Инструмент проанализирует структуру, семантику или цветовую палитру на предмет типичных ошибок доступности.
  • •Получите HTML-отчет с указанием проблемных мест и конкретными советами по исправлению.

Сценарии использования

Аудит фрагментов HTML-кода на семантические ошибки перед добавлением в библиотеку UI-компонентов.
Проверка цветового контраста текста и фона на этапе согласования дизайн-макета.
Быстрое сканирование лендингов по URL для выявления критических багов доступности, мешающих использованию скринридеров.

Примеры

1. Проверка фрагмента лендинга на отсутствие меток

Фронтенд-разработчик
Контекст
Разработчик сверстал новый блок с кнопками-иконками и формой подписки, но не уверен, что они доступны для скринридеров.
Проблема
Убедиться, что интерактивные элементы имеют правильные текстовые метки и атрибуты.
Как использовать
Вставьте HTML-код блока в поле «HTML ввод» и выберите уровень «WCAG AA».
Пример конфигурации
<img src="/hero.png"><a href="/pricing"><svg></svg></a><button><svg></svg></button><input type="email" />
Результат
Инструмент сгенерирует отчет, указывающий на отсутствие alt у изображения, пустые теги a и button, а также input без связанного label.

2. Проверка макета на риск низкого контраста

UI/UX дизайнер
Контекст
Дизайнер подготовил новый визуальный стиль для сайта и хочет проверить, достаточно ли контрастны цвета текста и фона.
Проблема
Выявить нарушения контрастности до передачи макета в разработку.
Как использовать
Загрузите файл макета в поле «Изображение макета» и установите уровень проверки «WCAG AAA».
Результат
Отчет покажет предупреждения о недостаточном контрасте на основе анализа цветовой палитры загруженного изображения.

Проверить на примерах

xml, html, image
Примеры XML
Примеры формата XML (eXtensible Markup Language) от простых до сложных структур
preferred input family image
image
Примеры Обработки Изображений Windows C++
Примеры обработки изображений Windows C++ включая чтение/сохранение изображений, изменение размера и преобразование формата с использованием Windows Imaging Component
preferred input family image
image
SVG Примеры
Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG
preferred input family image
image
Примеры Обработки Изображений Web Rust
Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов
preferred input family image
image

Связанные хабы

Инструменты Image для Convert
Изучите 100 инструментов image для сценариев convert и быстро сравните близкие утилиты.
Инструменты Text для Convert
Изучите 80 инструментов text для сценариев convert и быстро сравните близкие утилиты.
Инструменты Image
Изучите 40 инструментов image для сценариев utility и быстро сравните близкие утилиты.
Инструменты Xml для Convert
Изучите 33 инструментов xml для сценариев convert и быстро сравните близкие утилиты.

FAQ

Какие форматы изображений поддерживаются для проверки макетов?

Вы можете загрузить макеты в форматах PNG, JPEG, WebP и SVG размером до 20 МБ.

В чем разница между уровнями WCAG AA и AAA?

Уровень AA является стандартным требованием для большинства сайтов, тогда как AAA предъявляет более строгие критерии, например, к минимальному коэффициенту контрастности текста.

Может ли инструмент проверить страницу по URL?

Да, достаточно вставить ссылку в поле «URL страницы», и система просканирует ее на наличие проблем доступности.

Какие ошибки в HTML находит этот чекер?

Он выявляет отсутствие атрибутов alt у изображений, пустые ссылки, кнопки без текстового описания и формы без связанных тегов label.

Нужно ли устанавливать дополнительное ПО?

Нет, проверка выполняется полностью онлайн прямо в вашем браузере.

Документация API

Конечная точка запроса

POST /ru/api/tools/accessibility-checker

Параметры запроса

Имя параметра Тип Обязательно Описание
htmlInput textarea Нет -
pageUrl text Нет -
designImage file (Требуется загрузка) Нет -
wcagLevel select Нет -

Параметры типа файл должны быть загружены сначала через POST /upload/accessibility-checker для получения filePath, затем filePath должен быть передан в соответствующее поле файла.

Формат ответа

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-checker": {
      "name": "accessibility-checker",
      "description": "Находит типовые проблемы WCAG 2.1 в HTML, страницах или макетах и возвращает рекомендации по исправлению",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Поддерживает ссылки на файлы URL или кодирование Base64 для параметров файла.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]