Аудит доступності сайту по стандарту WCAG 2.1 (рівень AA)
WCAG 2.1 AA — міжнародний стандарт веб-доступності, обов'язковий для державних сайтів у ЄС (EN 301 549) та США (Section 508). Рівень AA включає 50+ критеріїв успіху, що охоплюють сприйнятність, керованість, розумність та надійність інтерфейсу.
Принципи POUR
Perceivable (сприйнятливий): інформація доступна через різні органи чуття. Operable (керована): усі функції доступні з клавіатури. Understandable (розумна): інтерфейс передбачувана та послідовний. Robust (надійна): працює з допоміжними технологіями.
Інструментарій аудиту
Автоматичні інструменти (знаходять ~30% проблем):
# axe DevTools — розширення Chrome/Firefox
# Запустити на кожній сторінці: F12 → Accessibility
# axe-core через Playwright
npm install -D @axe-core/playwright
# audit.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
const pagesToAudit = [
'/', '/about', '/contact', '/login', '/dashboard'
];
for (const path of pagesToAudit) {
test(`${path} has no WCAG 2.1 AA violations`, async ({ page }) => {
await page.goto(`https://staging.example.com${path}`);
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
.analyze();
expect(results.violations).toEqual([]);
});
}
# WAVE — онлайн або розширення
https://wave.webaim.org/
# Pa11y
pa11y --standard WCAG2AA https://example.com --reporter html > report.html
# Lighthouse
lighthouse https://example.com --only-categories=accessibility --output html
Ручне тестування (60-70% проблем):
- Навігація тільки з клавіатури — пройти весь user flow
- Перевірка з NVDA + Chrome / JAWS + IE / VoiceOver + Safari
- Тест з збільшенням 200% та 400% (SC 1.4.10 Reflow)
- Режим високого контрасту Windows
- Вимкнути CSS — структура повинна залишатися значимою
Контрольний список ключових критеріїв WCAG 2.1 AA
1.1.1 Non-text Content (A)
- Усі зображення мають alt
- Піктограмні кнопки мають aria-label
- Складні діаграми мають текстовий опис
1.3.1 Info and Relationships (A)
- Заголовки H1-H6 відображають структуру документа
- Списки використовують
<ul>/<ol>/<li> - Таблиці мають
<th>зscope - Форми: кожен input має
<label>
1.4.3 Contrast (Minimum) (AA)
- Текст: мінімум 4.5:1
- Крупний текст (18pt/14pt bold): мінімум 3:1
1.4.4 Resize Text (AA)
- Текст масштабується до 200% без втрати вмісту
1.4.10 Reflow (AA)
- На 320px немає горизонтального скролу
1.4.11 Non-text Contrast (AA)
- UI-компоненти та графіка: мінімум 3:1 до фону
2.1.1 Keyboard (A)
- Усі функції доступні з клавіатури
2.4.3 Focus Order (A)
- Порядок фокусу логічний
2.4.7 Focus Visible (AA)
- Видимий індикатор фокуса на всіх елементах
3.1.1 Language of Page (A)
-
<html lang="uk">встановлений
3.3.1 Error Identification (A)
- Помилки форми описані текстом, а не просто кольором
4.1.2 Name, Role, Value (A)
- Усі спеціальні компоненти мають коректні role, aria-label, aria-expanded
Формат звіту
## Звіт аудиту WCAG — example.com
Дата: 2024-11-15
Стандарт: WCAG 2.1 AA
Інструменти: axe DevTools, NVDA 2024.2, ручне тестування
### Резюме
| Рівень | Порушень | Статус |
|-------|-----------|--------|
| Критичні (Level A) | 8 | Fail |
| Значні (Level AA) | 12 | Fail |
| Попередження | 23 | Review |
### Критична проблема #1
**Критерій:** 1.1.1 Non-text Content
**Елементи:** 47 зображень без alt на сторінках /gallery, /products
**Вплив:** екранна читалка озвучує імена файлів
**Виправлення:** додати змістовний alt до всіх зображень
**Пріоритет:** P1 (Critical)
Типові знахідки на сайтах
- Відсутність атрибута
langна HTML-елементі - Погана контрастність сірого тексту на білому фоні
- Спеціальні селекти та dropdown без підтримки клавіатури
- Форми з placeholder замість label
- Слайдери та каруселі без кнопок керування
- Вимкнений zoom (
maximum-scale=1)
Часові рамки проведення аудиту
| Обсяг сайту | Термін |
|---|---|
| Лендинг (5–10 сторінок) | 2–3 дні |
| Корпоративний сайт (20–50 сторінок) | 4–7 днів |
| SaaS / веб-додаток | 7–14 днів |
| Виправлення за результатами | x1.5 часу аудиту |