Тестирование доступности с WAVE
WAVE (Web Accessibility Evaluation Tool) от WebAIM — визуальный инструмент для проверки доступности. Накладывает иконки прямо на страницу, показывая где находятся ошибки. Используется через браузерное расширение, веб-интерфейс на wave.webaim.org или REST API для автоматизации.
WAVE API для автоматизации
# Базовый запрос
curl "https://wave.webaim.org/api/request?key=YOUR_KEY&url=https://example.com&reporttype=4&format=json"
// scripts/wave-audit.js
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, // 1=summary, 2=summary+items, 3=+structure, 4=+screenshots
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 || {}),
});
// WAVE API: 500 запросов/месяц на бесплатном, делаем паузу
await new Promise(r => setTimeout(r, 1000));
}
// Генерируем HTML-отчёт
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);
}
Типы проблем в отчётах WAVE
| Категория | Иконка | Описание |
|---|---|---|
| Errors | Красный круг | Нарушения WCAG, блокируют доступ |
| Alerts | Жёлтый треугольник | Потенциальные проблемы для проверки |
| Features | Зелёный круг | Позитивные элементы доступности |
| Structural Elements | Синие иконки | Заголовки, landmarks, списки |
| ARIA | Фиолетовые | ARIA role/label/описания |
| Contrast Errors | Оранжевые | Недостаточный цветовой контраст |
Браузерное расширение
WAVE Extension для Chrome/Firefox не требует API-ключа и хорошо подходит для ручной проверки страниц с авторизацией — расширение работает в текущей сессии браузера с куками пользователя.
// Нельзя автоматизировать расширение напрямую,
// но можно комбинировать: Pa11y/axe для CI, WAVE Extension для ручного аудита
Интеграция в workflow
# .github/workflows/accessibility.yml
- name: WAVE API Audit
env:
WAVE_API_KEY: ${{ secrets.WAVE_API_KEY }}
run: |
node scripts/wave-audit.js
# Публикуем отчёт как artifact
- uses: actions/upload-artifact@v3
with:
name: wave-report
path: wave-report.html
Сроки
Настройка WAVE API аудита с HTML-отчётом и CI-интеграцией: 1–2 рабочих дня.