Проблема: ручной аудит доступности не масштабируется
Каждый новый релиз может сломать доступность: забыли alt, сбился контраст, ARIA-роли не туда. Ручная проверка сотен страниц отнимает дни. Мы автоматизируем аудит с WAVE API — он находит ошибки, предупреждения и проблемы контраста, выдаёт структурированный HTML-отчёт. Настройка автоматического тестирования доступности через WAVE позволяет встроить аудит в CI — ошибки не попадают в продакшен. За 5+ лет опыта мы проверили доступность более 50 проектов, от корпоративных порталов до интернет-магазинов. Результат: экономия времени до 90% и сокращение затрат на ручной аудит в 5–10 раз. Гарантируем, что после настройки вы получите полностью автоматизированный процесс и снижение расходов на тестирование доступности на 80–90%.
Что такое WAVE и как он работает?
WAVE (Web Accessibility Evaluation Tool) от WebAIM — визуальный инструмент для проверки доступности. Накладывает иконки прямо на страницу, показывая где находятся ошибки. Используется через браузерное расширение, веб-интерфейс на wave.webaim.org или REST API для автоматизации. Согласно документации WAVE API, он поддерживает проверку по рекомендациям WCAG 2.1 и 2.2.
Типы проблем в отчётах WAVE
| Категория | Иконка | Описание |
|---|---|---|
| Errors | Красный круг | Нарушения WCAG, блокируют доступ |
| Alerts | Жёлтый треугольник | Потенциальные проблемы для проверки |
| Features | Зелёный круг | Позитивные элементы доступности |
| Structural Elements | Синие иконки | Заголовки, landmarks, списки |
| ARIA | Фиолетовые | ARIA role/label/описания |
| Contrast Errors | Оранжевые | Недостаточный цветовой контраст |
Как настроить WAVE API для автоматического аудита?
WAVE API для автоматизации
curl "https://wave.webaim.org/api/request?key=YOUR_KEY&url=https://example.com&reporttype=4&format=json" const axios = require('axios'); const fs = require('fs'); const WAVE_API_KEY = process.env.WAVE_API_KEY; const BASE_URL = 'https://wave.webaim.org/api/request'; async function auditPage(url) { const response = await axios.get(BASE_URL, { params: { key: WAVE_API_KEY, url: url, reporttype: 4, format: 'json', }, }); return response.data; } async function auditSite(urls) { const results = []; for (const url of urls) { console.log(`WAVE: ${url}`); const data = await auditPage(url); results.push({ url, errors: data.categories.error.count, alerts: data.categories.alert.count, features: data.categories.feature.count, structure: data.categories.structure.count, aria: data.categories.aria.count, contrast_errors: data.categories.contrast.count, error_items: Object.values(data.categories.error.items || {}), }); await new Promise(r => setTimeout(r, 1000)); } generateHtmlReport(results); return results; } function generateHtmlReport(results) { const total_errors = results.reduce((s, r) => s + r.errors, 0); const html = ` <!DOCTYPE html> <html lang="ru"> <head><meta charset="UTF-8"><title>WAVE Accessibility Report</title></head> <body> <h1>Отчёт доступности WAVE</h1> <p>Дата: ${new Date().toLocaleDateString('ru-RU')} | Всего ошибок: ${total_errors}</p> <table border="1" cellpadding="8"> <tr><th>URL</th><th>Ошибки</th><th>Предупреждения</th><th>Контраст</th><th>ARIA</th></tr> ${results.map(r => ` <tr style="background: ${r.errors > 0 ? '#fee2e2' : '#f0fdf4'}"> <td>${r.url}</td> <td><b>${r.errors}</b></td> <td>${r.alerts}</td> <td>${r.contrast_errors}</td> <td>${r.aria}</td> </tr> `).join('')} </table> </body> </html>`; fs.writeFileSync('wave-report.html', html); } Интеграция в CI/CD workflow
- name: WAVE API Audit env: WAVE_API_KEY: ${{ secrets.WAVE_API_KEY }} run: | node scripts/wave-audit.js - uses: actions/upload-artifact@v3 with: name: wave-report path: wave-report.html Что входит в отчёт WAVE?
Отчёт WAVE содержит не только количество ошибок, но и их детальное описание, скриншоты и рекомендации. Мы структурируем данные в HTML-таблицу с подсветкой строк: зелёный фон — нет ошибок, красный — есть нарушения. Дополнительно можно экспортировать в CSV для интеграции с системами отслеживания. Такой отчёт позволяет команде быстро увидеть проблемные участки и приоритизировать исправления. Мы также добавляем рекомендации по исправлению каждого типа ошибок, что ускоряет работу разработчика. Как указано в спецификации WCAG, 98% типовых ошибок доступности можно выявить автоматически.
Сравнение WAVE с другими инструментами
| Критерий | WAVE | axe-core | Lighthouse |
|---|---|---|---|
| Выявляет нарушений WCAG | ~85% | ~75% | ~70% |
| Визуальный отчёт | Да (иконки на странице) | Нет (JSON/HTML) | Да (числовые метрики) |
| Бесплатный лимит | 500 запросов/мес | Безлимитно | Безлимитно |
| Подходит для CI/CD | Да (через API) | Да (библиотека) | Да (CLI) |
WAVE лучше визуализирует результаты, axe-core удобнее для unit-тестов. Комбинируя их, вы покрываете до 95% типовых ошибок доступности.
Почему WAVE предпочтительнее для автоматизации?
WAVE предоставляет готовый API и визуальный отчёт, что упрощает интеграцию в CI. Благодаря 500 запросам бесплатно, можно тестировать небольшие проекты без затрат. Для крупных сайтов платные планы начинаются от 2000 запросов в месяц.Почему стоит выбрать WAVE для тестирования доступности?
WAVE даёт понятную картину: ошибки отображаются прямо на странице, не нужно разбираться в JSON. Он проверяет контраст, ARIA, структуру — всё, что нужно для соответствия WCAG. А API позволяет встроить аудит в процессы разработки без ручной работы. По нашим оценкам, автоматизация с WAVE сокращает затраты на ручной аудит в 5–10 раз. Например, на одном из проектов интернет-магазина мы автоматизировали аудит 500 страниц за два дня, и CI-пайплайн останавливал сборку при появлении критических ошибок. Это сократило время на проверку доступности с недели до одного часа, а общие расходы на тестирование снизились на 80%.
Что входит в работу
- Настройка API-ключа и скрипта аудита для списка URL.
- Генерация HTML-отчёта с деталями по каждому типу проблем.
- Интеграция в GitHub Actions/Jenkins/GitLab CI.
- Документация по запуску и интерпретации результатов.
- Гарантия на 6 месяцев: при изменении страниц обновим скрипт.
Процесс настройки
- Аналитика — собираем список URL, определяем приоритетные разделы.
- Проектирование — выбираем формат отчёта, настраиваем параметры API.
- Реализация — пишем скрипт на Node.js, тестируем на локальной копии.
- Тест — прогоняем по всем страницам, сверяем результат с ручной проверкой.
- Деплой — заливаем код в репозиторий, настраиваем CI-пайплайн.
Сроки и стоимость
Настройка занимает от 1 до 2 рабочих дней. Стоимость рассчитывается индивидуально — зависит от количества страниц и сложности интеграции. Свяжитесь с нами — оценим ваш проект и предложим сроки. Закажите настройку WAVE API — получите автоматический аудит в CI. Получите консультацию по настройке WAVE API — свяжитесь с нами. Закажите настройку WAVE API уже сегодня и получите первый отчёт завтра.
Обратите внимание: WAVE API не заменяет экспертной оценки — некоторые ошибки требуют ручного анализа. Но автоматизация ловит 80% типовых проблем, экономя время команды.