Коли новий реліз ламає 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="uk"> <head><meta charset="UTF-8"><title>WAVE Accessibility Report</title></head> <body> <h1>Звіт доступності WAVE</h1> <p>Дата: ${new Date().toLocaleDateString('uk-UA')} | Всього помилок: ${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 зручніший для юніт-тестів. Комбінуючи їх, ви покриваєте до 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% типових проблем, заощаджуючи час команди.