Аудит веб-доступності: перевірка сайту на WCAG 2.1 AA

Типова ситуація: після запуску сайту виявляється, що 20% користувачів не можуть оформити замовлення через відсутність alt-текстів та неправильного фокусування. Або приходить припис від регулятора — забезпечити доступність згідно з WCAG 2.1 AA. Ми проводимо аудит доступності сайту: автоматизоване та ручне тестування, детальний звіт та план усунення порушень.

WCAG 2.1 AA — міжнародний стандарт, обов'язковий для держсайтів у ЄС (EN 301 549) та США (Section 508). Рівень AA включає 50+ критеріїв, що охоплюють сприйняття, керованість, зрозумілість та надійність. Наш досвід показує: ручне тестування виявляє в 2 рази більше проблем, ніж автоматичні інструменти, тому ми використовуємо обидва підходи.

Що таке WCAG 2.1 AA?

WCAG 2.1 AA — міжнародний стандарт веб-доступності, що включає 50+ критеріїв успіху. Рівень AA обов'язковий для державних сайтів у ЄС та США. Він охоплює сприйнятливість, керованість, зрозумілість та надійність інтерфейсу.

Які інструменти використовуються для аудиту?

Ми комбінуємо автоматизовані інструменти (axe DevTools, Lighthouse, Pa11y) та ручне тестування. Автоматика знаходить ~30% проблем, ручне тестування — 60-70% (навігація з клавіатури, screen reader, тести масштабування).

Скільки часу займає аудит?

Термін залежить від обсягу сайту: лендинг (5-10 сторінок) — 2-3 дні, корпоративний сайт (20-50 сторінок) — 4-7 днів, SaaS або веб-застосунок — 7-14 днів. Виправлення за результатами займає в 1.5 рази довше.

Що входить у звіт?

Звіт містить перелік порушень із зазначенням критерію WCAG, пріоритету (критичний, значний, попередження), скріншоти та рекомендації щодо виправлення. Також додається план усунення з оцінкою трудозатрат.

Як виправити порушення?

Ми надаємо детальний план із технічними рекомендаціями для кожного порушення. За бажанням можемо взяти виправлення на себе — від додавання alt-текстів до рефакторингу компонентів. Ціна розраховується індивідуально.

Для чого потрібен аудит доступності сайту?

Юридичні вимоги — не єдина причина. Доступний сайт охоплює аудиторію з обмеженими можливостями (близько 15% населення). Це покращує SEO: пошукові системи враховують семантику page structure та alt-тексти. Крім того, це доказ compliance при перевірках.

Які проблеми ми вирішуємо?

• Недостатня контрастність тексту (SC 1.4.3) — сірий текст на білому фоні часто нижче 4.5:1. Помилка типова для кнопок та підказок.
• Відсутність alt у зображень — особливо на сторінках продуктів, де screen reader не може передати візуальну інформацію.
• Кастомні UI-компоненти (селекти, слайдери) без підтримки клавіатури та ARIA-атрибутів. Наприклад, datepicker без ARIA label або неправильного role.
• Форми з placeholder замість label — screen reader не ідентифікує поля, а текст зникає при вводі.
• Порядок фокусу (Focus Order) не відповідає візуальному потоку — користувач губиться при табуляції.

Ось реальний кейс: на лендингу фінтех-стартапу кастомний випадаючий список не виводив опції при кліку, якщо використовуються клавіші. Наш аудит показав відсутність aria-expanded та обробників keydown. Виправлення зайняло 2 години, але до цього 30% користувачів з моторними порушеннями не могли вибрати тариф.

Інструментарій аудиту

Автоматичні інструменти (знаходять ~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(`/`); // тестування на локальному або власному домені const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .analyze(); expect(results.violations).toEqual([]); }); } 

# WAVE https://wave.webaim.org/ # Pa11y pa11y --standard WCAG2AA [URL вашого сайту] --reporter html > report.html # Lighthouse lighthouse [URL вашого сайту] --only-categories=accessibility --output html 

Ручне тестування (60-70% проблем):

• Навігація тільки з клавіатури — пройти весь user flow
• Перевірка з NVDA + Chrome / JAWS + IE / VoiceOver + Safari
• Тест зі збільшенням 200% та 400% (SC 1.4.10 Reflow)
• Тест у режимі високого контрасту Windows
• Вимкнути CSS — структура повинна залишатися осмисленою

Чому ручне тестування незамінне?

Автоматика знаходить синтаксичні помилки: відсутність alt, низьку контрастність, пропущені roles. Але вона не здатна оцінити, наскільки осмислений порядок табуляції або коректно чи оголошуються динамічні зміни. Наприклад, при відкритті модального вікна screen reader повинен почути його заголовок, а після закриття — повернутися до початкового елемента. Це перевіряється тільки вручну.

Порівняння автоматичного та ручного тестування

Комбінація обох підходів дає максимальну повноту. Ручне тестування виявляє в 2 рази більше проблем, ніж автоматичне, особливо в сценаріях з динамічним контентом.

Що входить в аудит?

• Повний звіт з переліком порушень за кожним критерієм WCAG 2.1 AA
• Пріоритизація (Critical, Major, Minor) з поясненням впливу
• Скріншоти та HTML-шляхи до проблемних елементів
• Рекомендації щодо виправлення з прикладами коду
• План усунення з оцінкою трудозатрат
• Консультація за результатами (1 година онлайн)

Вартість аудиту залежить від обсягу: лендинг — від 500 до 1500 доларів, корпоративний сайт — від 1500 до 5000 доларів, веб-застосунок — від 5000 доларів. Точна вартість визначається після попереднього аналізу.

Типові знахідки на українських сайтах

• Відсутність lang атрибута на HTML-елементі
• Погана контрастність сірого тексту на білому фоні
• Кастомні селекти та дропдауни без keyboard support
• Форми з placeholder замість label
• Слайдери та каруселі без кнопок керування
• Вимкнений zoom (maximum-scale=1)

Як швидко можна усунути порушення?

Терміни залежать від обсягу та складності. Прості виправлення (додавання alt, виправлення контрасту) виконуються за день. Глибока переробка компонентів з переписуванням ARIA-атрибутів може зайняти кілька тижнів. Ми надаємо план із покроковими рекомендаціями та можемо взяти реалізацію на себе.

Термін проведення аудиту

Наші інженери — сертифіковані експерти з досвідом понад 5 років у веб-доступності. Ми гарантуємо якісний аудит доступності сайту та надаємо звіт з чіткими рекомендаціями. Замовте аудит доступності вашого сайту — оцінимо масштаб робіт за 1 день та підготуємо комерційну пропозицію. Також отримайте консультацію щодо пріоритетності виправлень.