Тестування доступності з 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="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);
}
Категорії проблем у звітах WAVE
| Категорія | Іконка | Опис |
|---|---|---|
| Errors | Червоний круг | Нарушення WCAG, блокують доступ |
| Alerts | Жовтий трикутник | Потенційні проблеми для перевірки |
| Features | Зелений круг | Позитивні елементи доступності |
| Structural Elements | Сині іконки | Заголовки, landmarks, списки |
| ARIA | Фіолетові | ARIA role/label/описи |
| Contrast Errors | Оранжеві | Недостатній колірний контраст |
Розширення браузера
WAVE Extension для Chrome/Firefox не потребує API-ключа і добре підходить для ручної перевірки сторінок із аутентифікацією — розширення працює в поточній сесії браузера з файлами cookie користувача.
// Неможливо автоматизувати розширення напрямку,
// але можна комбінувати: 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
# Публікуємо звіт як артефакт
- uses: actions/upload-artifact@v3
with:
name: wave-report
path: wave-report.html
Терміни
Настройка WAVE API аудиту з HTML-звітом та CI-інтеграцією: 1–2 робочих дні.