Пример отчета о доступности
Этот статический пример показывает, каким может быть отчёт автоматического сканера: конкретные находки, ссылки на WCAG, затронутый контекст и рекомендации, которые команда адаптирует под свой код.
Понятные практические находки
Отчёты показывают затронутый селектор, серьёзность, связь с WCAG и страницы, чтобы разработчик мог выбрать приоритет исправлений.
Пример находки: нет alt-текста
HTML: <img src='logo.png'> Находка: у информативного изображения нет текстовой альтернативы. WCAG: 1.1.1 Нетекстовый контент.
Пример рекомендации
Отчёт может предложить добавить осмысленный alt-атрибут, например <img src='logo.png' alt='Логотип компании'>. Команда всё равно проверяет, точен ли текст в контексте.
За пределами автоматизации
Отчёт также отмечает проверки, которые требуют ручного просмотра: логичный порядок фокуса, смысл альтернативного текста и поведение в разных состояниях интерфейса.
Пример аннотированного контекста
Когда контекст доступен, отчёт может показать затронутый фрагмент интерфейса рядом с результатом правила, чтобы команда быстрее нашла место для проверки.
1.4.3 Contrast (Minimum)
Fix any of the following: Element has insufficient color contrast of 2.94 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Ensure that text has a contrast ratio of at least 4.5:1 against its background color to be legible for people with moderately low vision.
Технические детали
Проблемная разметка → пример исправления
<a href="/about" class="nav-link text-gray-400 bg-white">About Us</a><a href="/about" class="nav-link text-gray-700 bg-white">About Us</a>Пример исправления — подсказка для вашего кода, на сайт не применяется.